Styl nie stanowi treści dokumentu HTML, ale jest definicją jego formy. Jest bardzo silnym narzędziem służącym do formatowania dokumentu (i nie tylko). Pozwala globalnie lub lokalnie zmieniać sposób formatowania wybranego fragmentu dokumentu. Dzięki temu można stosować najbardziej oszczędną - "kanoniczną" -postać HTML nie tracąc na atrakcyjności wyglądu dokumentu.
Cascading Style Sheets - kaskadowe arkusze stylów - specyfikacje kolejnych wersji (CSS1, CSS2, CSS3) wzorcowych zestawów kodów formatujących.
Jest kilka powodów! Np.:
Elementarna definicja stylu składa się z selektora (czyli nazwy znacznika HTML) lub listy selektorów oddzielonych przecinkami i deklaracji ujmowanej w nawiasy klamrowe. Sama deklaracja to zbiór oddzielonych średnikami par cech (właściwości) i ich wartości:
Powyższe definicje spowodowałyby, że bloki ujęte znacznikami <P>...</P> wyświetlane byłyby dwudziestopunktową czcionką, a tytuły wewnątrz bloków <H1>...</H1>, <H2>...</H2> i <H3>...</H3> czcionką koloru czerwonego z wyśrodkowaniem tekstu.
Definicja stylu może być umieszczana:
Pierwszy sposób nic nie wnosi korzystnego pod względem wymienionych wcześniej zalet stosowania stylów i dlatego nie jest polecana, choć można go stosować wg potrzeb. Zalecane są sposoby drugi i trzeci.
Przykład definicji lokalnej wewnątrz dokumentu:
Uwaga na odmienną składnię!
Aby umieścić opis wyglądu wewnątrz nagłówka dokumentu HTML należy użyć znacznika STYLE:
Umieszczenie
definicji w pliku *.CSS ma dwie zalety:
- treść opisu może być zmieniana bez modyfikacji źródłowego dokumentu
HTML,
- pliki CSS mogą być współdzielone przez kilka dokumentów.
W celu przyłączenia zewnętrznego opisu wyglądu dokumentu należy wykorzystać
znacznik LINK:
Znacznik LINK określa nazwę i położenie pliku *.CSS jako wartość parametru "href".
Dokument może korzystać ze wszystkich sposobów lokalizacji definicji stylów jednocześnie. Kaskadowość to hierarchia, wg której ustalana jest kolejność obowiązywania poszczególnych źródeł definicji stylów. Ustalono, że najbardziej podstawowa jest definicja w osobnym pliku, wyżej w hierarchii jest definicja w nagłówku dokumentu, zaś najwyżej jest definicja lokalna przy poszczególnych elementach. Taka kolejność umożliwia stopniowanie uszczegółowienia formatowań wg potrzeb.
Elementy niższe w hierarchii drzewa dokumentu dziedziczą formatowanie elementów leżących wyżej w hierarchii, chyba że wyraźnie nada się im inne formatowanie. Jeśli np. tekst tabeli ma być przedstawiony za pomocą pogrubionej czcionki ARIAL, to wszystkie komórki tabeli będą w ten sposób formatowane, gdyż <TD> jest niżej w hierarchii niż <TABLE>. Jeśli zostanie zdefiniowane odrębne formatowanie dla elementów <TD> to wygląd czcionki w tej komórkach adekwatnie zmieni się.
Powyższy opis wyglądu zawiera dwie linie: pierwsza ustawia kolor znacznika BODY na wartość red (czerwony), zaś druga ustawia kolor znacznika H1 na wartość blue (niebieski). Ponieważ nie został określony kolor dla znacznika P, będzie on dziedziczony od znacznika 'ojcowskiego', zwanego BODY. Znacznik H1 jest także 'dzieckiem' w stosunku do znacznika BODY, ale druga instrukcja w znaczniku <STYLE> (tj. H1 { color: blue }) unieważnia dziedziczoną wartość.
[em] w proporcji do wysokości czcionki danego elementu
[ex] w proporcji do wysokości litery x
[px] piksele (kropki) na ekranie lub papierze
[%] procenty np. szerokości okna przeglądarki
[in] cale, 1in = 2.54cm
[cm] centymetry
[mm] milimetry
[pt] punkty, 1pt = 1/72 in
[pc] pica, 1pc = 12pt
Specyfikacja CSS przewiduje tworzenie tzw. klas, które pozwalają zróżnicować ten sam element zależnie od potrzeb. Za przykład posłuży blok <P>...</P>.
W dokumencie, składającym się z wielu akapitów, istnieje zapotrzebowanie na wyróżnienie kilku ich odmian o różnym wyglądzie. Te odmienne akapity definiuje się za pomocą klas.
W sekcji <BODY>...</BODY> wybór klasy wykonuje się wg wzoru:
Istnieją specjalne selektory dla elementów wg ich bieżącego stanu.
Pewna ich liczba dotyczy odsyłaczy.
A:link – formatowanie odsyłacza
A:visited - formatowanie odsyłacza już odwiedzonego
A:hover - formatowanie odsyłacza, gdy myszka, znajduje się nad elementem
A:active - formatowanie odsyłacza aktywnego w danym momencie
Te selektory powinny zostać umieszczine w definicji w następującej kolejności: link, visited, hover, active.
Selektor:focus - formatuje w wybrany sposób element, który przyjmuje w danym momencie zogniskowanie.
Cecha |
Opis |
Możliwe wartości |
Przykład
|
font-family
|
Typ czcionki |
nazwa czcionki |
{font-family:
arial} |
font- style |
Styl czcionki |
normal, italic, oblique
|
{font-style: italic} |
font-weight |
Grubość czcionki |
normal, bold, bolder,
lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
{font-weight:
bolder} |
font- size
|
Rozmiar
czcionki |
jednostki
formalne, xx-small, x-small, small, medium, large, x-large, xx-large,
larger, smaller, |
{font-size: 20px} |
font |
Komplet cech czcionki |
font-family,
font-weight, font-size, font-style |
{font: 12pt
sans-serif bold italic} |
Cecha |
Opis |
Wartość |
Przykład |
color |
Kolor czcionki |
nazwa, kod hexadecymalny |
{color: red}
|
background-color
|
Kolor tła |
nazwa, kod hexadecymalny |
{background-color:
#FF5500} |
background- image |
Grafika pełniąca rolę tła |
none,
adres URL |
{background-image:
url(tlo.gif)} |
background- repeat |
Powtarzalność tła |
repeat,
repeat-x, repeat-y, no-repeat |
{background-repeat:
repeat- x} |
background- attachment |
Tło scrolowane czy zaczepione |
scroll, fixed
|
{background-attachment:
scroll} |
background
|
Komplet cech
tła |
background-color,
background-image, background-repeat, background-attachment,
background-position |
{background:
red url(tlo.jpg) left top no-repeat} |
Cecha |
Opis |
Wartość |
Przykład |
word- spacing |
Odległość między wyrazami |
normal, jednostki formalne |
{word-spacing:
1.2em} |
letter- spacing |
Odległość między literami |
normal, jednostki formalne |
{letter-spacing:
0.2em} |
text- decoration |
Podkreślenie, przekreślenie, itp. |
none,
underline, overline, line-through, blink |
{text-decoration:
line- through} |
text- transform |
Przemiana tekstu |
capitalize, uppercase,
lowercase, none |
{text-transform:
uppercase} |
text- align |
Określa położenie tekstu wewnątrz elementu |
left, right,
center, justify |
{text-align:
center} |
text- indent |
Wcięcie |
jednostki formalne |
{text-indent:
20%} |
line- height
|
Określa odległość między dwoma sąsiednimi liniami |
normal, jednostki formalne |
{line-height:
120%} |
Cecha |
Opis |
Wartość |
Przykład |
margin-top |
Górny margines |
jednostki formalne |
{margin-top:
3em} |
margin-right
|
Prawy margines
|
jw. |
{margin-right:
4px} |
margin-bottom
|
Dolny margines
|
jw. |
{margin-bottom:
13%} |
margin-left
|
Lewy margines |
jw. |
{margin-left:
4em} |
margin |
Komplet cech marginesów |
jw. |
{margin: 2em
3em 1em 4em} |
padding-top
|
Górny odstęp
elementu |
jw. |
{padding-top:
0.2em} |
padding- right |
Prawy odstęp elementu |
jw. |
{padding-right:
12px} |
padding- bottom |
Dolny odstęp elementu |
jw. |
{padding-bottom:
0.4em} |
padding-left
|
Lewy odstęp
elementu |
jw. |
{padding-left:
7%} |
padding |
Odstępy elementu według kolejności: górna, prawa, dolna, lewa
|
jw. |
{padding: 2em
1em 3em 4em} |
border-top-width
|
Szerokość górnego obrzeża elementu |
thin, medium, thick, jednostki formalne |
{border-top-width:
thin} |
border-right-width
|
Szerokość prawego obrzeża elementu |
jw. |
{border-right-width:
medium} |
border-bottom-width
|
Szerokość dolnego obrzeża elementu |
jw. |
{border-bottom-width:
thick} |
border-left-width
|
Szerokość lewego obrzeża elementu |
jw. |
{border-left-width:
3px} |
border- width |
Szerokość obrzeża elementu według kolejności: górna, prawa,
dolna, lewa |
jw. |
{border-width:
thin thick medium thick} |
border- color |
Kolor obrzeża elementu |
nazwa koloru, kod hexadecymalny |
{border-color:
red} |
border- style |
Styl obrzeża elementu |
none, dotted, dashed,
solid, double, groove, ridge, inset, outset |
{border-style:
double} |
border- top |
Określa szerokość, kolor i styl górnej granicy (ramki) elementu
|
border-top-width,
border-style, color |
{border-top:
thin blue solid} |
border- right |
Określa szerokość, kolor i styl prawej granicy (ramki) elementu
|
border-right-width,
border-style, color |
{border-right: } |
border-bottom |
Określa szerokość, kolor i styl dolnej granicy (ramki) elementu
|
border-bottom-width,
border-style, color |
{border-bottom:
} |
border-left
|
Określa szerokość, kolor i styl lewej granicy (ramki) elementu
|
border-left-width,
border-style, color |
{border-left:}
|
border |
Określa szerokość, kolor i styl granicy (ramki) elementu według
kolejności: górna, prawa, dolna, lewa |
border-width,
border-style, color |
|
border- collapse |
Stosować w <TABLE>. Obramowania komórek osobno czy razem
|
collapse,
separate |
{border-collapse:
collapse} |
width |
Szerokość elementu |
auto,
jednostki formalne |
{width: 80px}
|
height |
Wysokość elementu |
jw. |
{height: 170px} |
Cecha |
Opis |
Wartość |
Przykład |
list-style- type |
Styl punktora listy <UL> lub <OL> |
disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none
|
{list-style-type:
lower- roman} |
list-style- image |
Grafika jako punktor listy |
adres URL, none
|
{list-style-image: url(rys.gif)} |
list-style- position |
Położenie punktora względem elementów listy |
inside, outside
|
{list-style-position:
outside} |
list- style |
Kompletna definicja listy |
disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none,
inside, outside, adres URL, none |
{list-style:
circle outside} |