Style, CSS i dlaczego

Style - forma treści

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.

CSS

Cascading Style Sheets - kaskadowe arkusze stylów - specyfikacje kolejnych wersji (CSS1, CSS2, CSS3) wzorcowych zestawów kodów formatujących.

Dlaczego stosować?

Jest kilka powodów! Np.:

Postać elementarnej definicji stylu

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:

selektor1 {cecha1:wartość1}
selektor1,selektor2,selektor3 {cecha1:wartość1; cecha2:wartość2}
Przykład
P {font-size: 20pt}
H1, H2, H3 {color: #FF0000; text-align: center}

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.

Lokalizacja definicji stylu

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.

Definicja lokalna wewnątrz dokumentu

Przykład definicji lokalnej wewnątrz dokumentu:

<P style='font-size:16pt; text-align:right'>Tekst akapitu.</P>

Uwaga na odmienną składnię!

Definicja w sekcji <HEAD>...</HEAD>

Aby umieścić opis wyglądu wewnątrz nagłówka dokumentu HTML należy użyć znacznika STYLE:

<HTML>
<HEAD>
<STYLE type="text/css">
  H1 { color: #FF0000}
  P {text-align: justify; font-size: 12pt}
</STYLE>
</HEAD>
<BODY>
  <H1>Tytuł</H1>
  <P>To jest tekst akapitu.</P>
</BODY>
</HTML>

Definicja w osobnym pliku

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:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="styldef.css" type="text/css">
</HEAD>
<BODY>
<H1>Tytuł</H1>
<P>To jest tekst akapitu.</P>
</BODY>
</HTML>

Znacznik LINK określa nazwę i położenie pliku *.CSS jako wartość parametru "href".

Kaskadowość

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.

Dziedziczenie

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ę.

<HTML>
<HEAD>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Tytuł</H1>
<P>Tekst akapitu</P>
</BODY>
</HTML>

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ść.

Jednostki formalne

Jednostki względne:

[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

Jednostki absolutne:

[in] cale, 1in = 2.54cm

[cm] centymetry

[mm] milimetry

[pt] punkty, 1pt = 1/72 in

[pc] pica, 1pc = 12pt

Klasy selektorów

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.

Przykład definicji elementu podstawowego ijego klas:
P {font-family: Arial; font-size: 12pt}
P.dodatki {font-family: Arial; font-size: 10pt; font-weight: bold}
P.uwagi {font-family: Courier; font-size: 10pt; color: red}

W sekcji <BODY>...</BODY> wybór klasy wykonuje się wg wzoru:

<p class=dodatki>Treść akapitu</p>
<p class=uwagi>Treść akapitu</p>

Pseudoklasy

Istnieją specjalne selektory dla elementów wg ich bieżącego stanu.

Pewna ich liczba dotyczy odsyłaczy.

Pseudoklasy selektorów 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.

Przykład
A:link {color:magenta}
A:visited{background-color: blue}
A:hover {color:black;background-color:red;}
A:active {background-color:blue; color:red}
Przykład klasy :hover (nie klikaj)

Inne pseudoklasy selektorów

Selektor:focus - formatuje w wybrany sposób element, który przyjmuje w danym momencie zogniskowanie.

Przykład
a:focus {color:blue; background-color:red}

Wyciąg z CSS1

Cechy czcionek

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}

Kolor i tło

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}

Tekst

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%}

Elementy prostokątne

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}

Wykazy

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}