docCSS - style kaskadowe
download 
Reklamacja Transkrypt
CSS - style kaskadowe
CSS - style kaskadowe
Cascadind Style Sheets
Znaczenie CSS
Arkusze stylów pozwalają nam na ścisłą kontrolę wyglądu
strony. Możemy zdefiniować np. odpowiednie czcionki dla
danych elementów oraz zachowywanie się odnośników na
działanie kursora myszy. Elementy te możemy wykorzystywać
wielokrotnie do różnych dokumentów jako szablon a także
zapisać w jednym pliku zewnętrznym który będzie mógł być
wykorzystywany przez wszystkie dokumenty danego serwisu.
Style CSS możemy umieszczać na trzy sposoby:
1. Przez zamieszczenie w kodzie html , w sekcji <head>
odnośnika do odrębnego plik (arkusza stylów)
<LINK REL=STYLESHEET TYPE="text/css" HREF="plik.css">
2.
Wpis w kodzie html w sekcji <HEAD> tagu w którym określamy
cechy strony, w której kod umieszczamy:
<style type="text/css">
<!-A:LINK {COLOR: #FFFFFF; text-decoration: bold;} --> </style>
3. Określenie stylu w kodzie html
<p style="font-variant: small-caps; font-size: 10pt; font-weight: bold;
color: red; font-family: Verdana">styl strony</p>
Lub inne określenie:
•wpisane <P Style="font-family: Arial; font-size: 16pt;
color:red; text-align:center">
Tekst opisany stylami</P>
•Osadzone
•Zewnętrzne
Stylami osadzonymi nazywamy arkusz stylów, który jest osadzony w sekcji <HEAD>
dokumentu HTML. Przykładowy dokument wykorzystujący style osadzone może wyglądać
np. tak:
<HTML>
<HEAD>
<STYLE type="text/css">
<!-- BODY { background-color : red; } P { color : #FFFF00; font-size : 14pt; } -->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Najpierw deklarując type="text/css" definiujemy osadzony arkusz stylów.
W przykładzie zostały zdefiniowane atrybuty dla BODY i <P>każdy tekst objęty tymi
znacznikami będzie miał wielkość czcionki 14pt, oraz kolor żółty.
Zastosowano schemat:
obiekt { właściwość1 : wartość1; właściwość2 : wartość2;
Style zewnętrzne umieszczone są poza dokumentem HTML w pliku *.css.
Przykładowy plik zapisany np. w Notatniku pod nazwą styl1.css (umieszczony serwisie)
BODY { margin-top: 20pt; margin-left: 20pt; } A:HOVER { color: #990000; } A:LINK { color:
#FFFF00; }
margines lewy i górny na 20p oraz rollower odnośników: link nie odwiedzany będzie miał kolor
bordowy zaś po najechaniu na niego myszką zmieni kolor na żółty
Deklaracja stylu na stronie:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso8859-2">
<meta name="Description" <meta NAME="language" CONTENT="pl">
<link HREF="styl1.css" REL="STYLESHEET">
<title>Moja strona</title>
Definicja stylu rozpoczyna się od selektora – wzorca. Po selektorze następuje blok
deklaracji. Jest on zawarty pomiędzy nawiasami klamrowymi: {...}. Blok deklaracji składa
się z pooddzielanych średnikiem par: atrybut: wartość Np.
h1 { margin-left: -8%;}
h1 jest selektorem.
body {
color: black;
background: #AAFFFF;
margin-left: 10%;
margin-right: 10%;
}
selektorem jest body.
Selektor może się również składać z kilku znaczników oddzielonych przecinkami:
h2,h3,h4,h5,h6 { margin-left: -4%; }
Selektorem szczególnym jest *.
Definicja * { font-family: Verdana, sans-serif; font-size: 16pt; } zmieni
czcionkę wszystkich znaczników.
Ogólna forma zapisu stylu dla danego elementu strony : elementA,elementB,
{ własność1: wartość ;
własność2: wartość ;
} Na początku wypisujemy element lub elementy który ma mieć określony przez
nas styl następnie w nawiasie klamrowym podajemy własności i ich wartości
np. H1,H2,H3,H4,H5 {font-weight: bold; color: green; font-family: Arial;}
Style kontekstowe
Jeśli chcemy, aby np. wszystkie elementy P pisane z podktesleniem miały
inny kolor, to używamy stylów kontekstowych.
p u { color : blue };
Style linków
Używamy CSS do tworzenia schematu dla wyglądu linków.
a:link - wygląd linku
a: hover - wygląd po najechaniu kursora myszki
a:visited - link który był już odwiedzony
a:active - aktywny link
np.
a:hover { FONT-SIZE: 15px; BACKGROUND: red; COLOR: #363636; FONTFAMILY: Verdana, Helvetica; TEXT-DECORATION: underline }
lub
A:hover {text decoration:bold; color:#CC3434;}
A:link {text-decoration:underline; color:blue;}
Jeśli dokument zawiera kilka różnych rodzajów akapitów wówczas
definiujemy klasę znacznika. Np.
P
P.inny {
{
text-align: justify;}
text-align: right;}
Zapis w kodzie strony:
<P> ... tutaj tekst zwykłego akapitu ... </P>
<P class="inny"> ... tutaj tekst innego akapitu ... </P>
Selektor p.inny to selektor klasy. Możemy go również wykorzystać w
bloku div
<div class="inny"> ... tutaj tekst innego akapitu ... </div>
Jednostki długości
H5 { margin: 0.5em } /* w proporcji do wysokości
czcionki danego elementu */
H5 { margin: 1ex } /* w proporcji do wysokości litery x */
P { font-size: 10px } /* piksele na ekranie */
jednostki absolutne: H1 { margin: 0.5in } /* cale, 1in = 2.54cm */
H2 { line-height: 3cm } /* centymetry */
H3 { word-spacing: 4mm } /* milimetry */
H4 { font-size: 12pt } /* punkty, 1pt = 1/72 cala */
H4 { font-size: 1pc } /* pica, 1pc = 12 punktów */
Tekst
text-align: - wyrównuje tekst względem marginesów. Wartości: left, center, right, justify (wyrównuje tekst do obu
marginesów). text-decoration: - 'dekoruje' tekst. Wartości: underline, overline, line-through, none - odpowiednio podkreśla, linia ponad
tekstem, przekreśla, likwiduje wcześniejsze wartości.
line-height: - określa wysokość linii (odstęp między dolnymi krawędziami liter w wierszach). Wartości: liczba, mnożona
przez wysokość czcionki (np. 1.4); dowolna inna jednostka długości; wartość procentowa; normal nakazuje zastosowanie
wartości domyślnej.
vertical-align: - określa pozycję elementów wpisanych względem reszty tekstu. Może być użyta telko do takich
elementów. Wartości:
baseline; tekst umieszczany na linii bazowej; bottom; podstawa elementu na wysokości podstawy elementu rodzicielskiego; middle; środek elementu na wysokości środka elementu rodzicielskiego; sub; tekst poniżej linii bazowej (subscript); tylko IE; super; tekst powyżej linii bazowej (superscript); tylko IE; text-top; najwyższy punkt na wysokości najwyższego punktu czcionki elementu rodzicielskiego; text-bottom; najniższy punkt na wysokości najniższego punktu czcionki elementu rodzicielskiego; top; najwyższy punkt elementu na wysokości najwyższego elementu rodzicielskiego; wartość procentowa text-indent: - wcięcie akapitu na określoną głębokość. Może być przydatne do rozpoczynania akapitu zamiast stosowania
seri niełamliwych spacji. Dopuszczalne jednostki długości i wartości procentowe.
text-transform: - zastępuje (konwertuje) wielkość liter występujących w pliku tekstowym literami określonymi przy
pomocy wartości. Wartości:
capitalize; - pierwszy znak wielką literą;
uppercase; - wszystkie znaki wielkimi literami;
lowercase; - wszystkie znaki małymi literami: none; - pozostawia litery niezmienione (zastępuje ustawienia
odziedziczoną)
letter-spacing: - ustala odstępy między literami. Dopuszczalne wszelkie jednostki długości. Przykład:
<P STYLE="letter-spacing: 8px" >odstępy między literami wynoszą 10pt</P> odstępy między literami wynoszą 8px
float: - jak zawijać jeden tekst wokół drugiego (np. jeden akapit opływa drugi). Wartości:
right; - tekst pierwszego akapitu umieszczony z prawej strony, opływany przez tekst drugiego akapitu przykład 1 (otwiera nowe okno, ok. 5kb)
left; - tekst pierwszego akapitu umieszczony z lewej strony, opływany przez tekst drugiego akapitu przykład 1 (otwiera nowe okno, ok. 5kb)
none; - zachowuje wartość odziedziczoną. clear: - stosuje się by zmusić przeglądarkę do wyświetlenia danego elementu poniżej innego elementu
zamiast opływania (float). Wartości left, right, both, none ustalają położenie początku ruchomego wiersza
za ruchomym obiektem.
list-style-type: - określa znaczek (albo literę/cyfrę) stosowany do oznaczania kolejnych elementów listy.
Może być użyty tylko w obrębie znacznika <LI>. Wartości (nie wszystkie mogą być wyświetlone zgodnie
ze swoją nazwą):
disc, circle, square - listy nieuporządkowane;
decimal; czyli ciąg 1, 2, 3, ...
decimal-leading-zero; wstawia wiodące zera : 01, 02, 03, ..., 58, 59.
lower-roman;, upper-roman; liczby rzymskie (małe: i,ii,iii; duże: I,II,III)
lower-latin; albo lower-alpha; małe litery alfabetu łacińskiego a, b, c,
upper-latin; albo upper-alpha; duże litery alfabetu łacińskiego A, B, C,
Czcionki
font-family: - określa grupę czcionek, przy użyciu których należy wyświetlić tekst. Dopuszczalne są 'rodziny ogólne'
czcionek, lub ich nazwy własne np.:Verdana, Arial, "Vera Humana 95", sans-serif;. Elementy listy czcionek
oddzielamy przecinkami, a nazwy wielowyrazowe ujmujemy w cudzysłowy. Przeglądarka wyświetla tekst pierwszą
znalezioną czcionką, dlatego warto chwilę pomyśleć, która czcionka może wystąpić u użytkownika i projektować
stronę używając właśnie tej czcionki.
font-size: - wysokość czcionki. Najpopularniejszą jednostką wysokości jest punkt (pt); dopuszczalne są inne
jednostki względne i bezwzględne. Ponadto można stosować następujące wartości względne (bo przeglądarki różnie
interpretują):xx-small, x-small, small, medium, large, x-large, xx-large oraz larger i smaller - odpowiednio
zwiększają lub zmniejszają wyświetlany tekst (który ma odziedziczoną wysokość np. chcemy dodatkowo powiększyć
w stosunku do całego akapitu pogrubiony element. Przykład:
<P>akapit pisany czcionką odpowiednią dla akapitu, a teraz <B STYLE="font-size: larger;" >uwaga!</B></P>
akapit pisany czcionką odpowiednią dla akapitu, a teraz uwaga!
font-style: - określa styl czcionki. Wartości: italic, oblique, normal. Efekt wartości italic i oblique jest podobny.
Różnica polega na tym, że italic korzysta z czcionki pochyłej (zwykle każdy styl czcionki - pogrubienie, pochylenie
itp. - jest zapisane w oddzielnym pliku na dysku, np. Arial.ttf to czcionka prosta, Arialbd.ttf to czcionka pogrubiona,
Ariali.ttf to czcionka pochyła), natomiast oblique pochyla czcionkę prostą. normal nakazuje zastosowanie wartości
domyślnej. oblique nie działa w NN. Czcionka pochyła jest mniejsza od pochylonej.
font-weight: - określa stopień pogrubienia tekstu. Wartości: bold, 100-900 co 100, bolder, lighter. normal nakazuje
zastosowanie wartości domyślnej. Stosowanie wartości liczbowych wymaga przetestowania. Zwykle można
wyodrębnić 3 wagi: 100-300 - najmniejsze pogrubienie; 400-500 - średnie; 600 i więcej - największe pogrubienie.
Nie należy przesadzać z pogrubianiem tekstu - zgadnij co będzie wyróżnione, jeśli wszystko będzie pogrubione.
color: - definiuje kolor tekstu. Dopuszczalne są kody kolorów lub nazwy własne.
Przykłady styli CSS:
<!--style start-->
<style>
<!-A:hover {text decoration:bold; color:#CC3434;}
A:link {text-decoration:underline; color:blue;}
-->
</style>
<!--style stop-->
<style type="text/css">
<!-a:link {text-decoration: none; font-weight: bold;}
a:hover {font-weight: bold; color: blue; text-decoration: underline;}
-->
</style>
<style type="text/css">
<!-A:link {color:#008080;font-weight:bold; text-decoration:none;}
A:visited {color:#008080;font-weight:bold; text-decoration:none;}
A:hover { color:#A92B52;font-weight:bold; text-decoration:none;};
-->
</style>
Import zewnętrznego arkusza stylów
Każdą stronę można opisać za pomocą importowanego arkusza stylów. Import jest definiowany za pomocą
następującego polecenia, umieszczanego w ramach HEAD:
<style>
<!-@import url("adres arkusza");
-->
</style>
Np.
<style>
<!-@import url("http://www.pckurier.pl");
-->
</style>
Można podać adres względny, jak i bezwzględny. Np.
<style>
<!-@import url("http://www.polbox.com.pl/lupus/style/toolstyl.css");
-->
</style>
