Uwaga: nie wszystkie elementy styl≤w s▒ akceptowane przez przegl▒darki, w kt≤rych rozpoczΩto implementacjΩ styl≤w.
Kolor mo┐emy przypisywaµ dowolnym elementom. Kilka przyk│ad≤w:
<h2 style="color: #FF0000">Czerwony tytu│ drugiego stopnia</h2>
<p style="color: #FF00FF">Akapit w kolorze Fuchsia</p>
Akapit w kolorze Fuchsia
<table border>
<tr>
<td style="color: #808000">Kom≤rka tabeli z oliwkowym tekstem</td>
</tr>
</table>
| Kom≤rka tabeli z oliwkowym tekstem |
Numerowany wykaz w kolorze niebieskim
<ol style="color: blue">
<li>punkt pierwszy
<li>punkt drugi
<li>punkt trzeci
</ol>
Wiele element≤w mo┐e mieµ przypisany kolor t│a. Przyk│ady (IE i NN wy╢wietlaj▒ je nieco odmiennie):
<h2 style="background-color: yellow">Tytu│ stopnia drugiego na ┐≤│tym tle</h2>
<p style="background-color: blue">Akapit na tle Aqua</p>
Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua.
<table border>
<tr>
<td style="background-color: #808000">Kom≤rka tabeli z zielonym t│em</td>
</tr>
</table>
| Kom≤rka tabeli z zielonym t│em |
Rozmaitym elementom mo┐emy przypisywaµ grafikΩ jako t│o. Przyk│ady:
<h1 style="background-image: url(canvas2.gif)">Tytu│ stopnia pierwszego na tle p│≤tna</h1>
<table border>
<tr>
<td style="background-image: url(greendot.gif)>Kom≤rka tabeli z zielon▒ kropk▒ jako t│em</td>
</tr>
</table>
| Kom≤rka tabeli z zielon▒ kropk▒ jako t│em |
T│o dokumentu mo┐e siΩ powtarzaµ tylko w pionie, tylko w poziomie, w obu kierunkach lub nie powtarzaµ siΩ w og≤le. Definiuj▒c w stylach cia│o dokumentu (BODY), mo┐emy podaµ nastΩpuj▒ce, przyk│adowe polecenie:
<style type="text/css">
<!--
BODY { background: #C0C0C0 url(greendot.gif);
background-repeat: repeat-y }
-->
</style>
Inne warto╢ci to repeat-x, repeat, no-repeat.
Przyk│ady:
repeat-y | repeat-x | repeat | no-repeat |T│em strony mo┐e byµ grafika. Wystarczy podaµ w stylu definicjΩ BODY {background: url(nazwa_obrazka)}, aby obrazek pojawi│ siΩ w tle dokumentu. Obrazek mo┐e siΩ przesuwaµ w miarΩ przewijania dokumentu (czyli tkwiµ w miejscu w stosunku do tre╢ci) lub pozostawaµ nieruchomo (tkwiµ w miejscu w stosunku do ekranu). W tym drugim przypadku powinni╢my podaµ definicjΩ:
BODY {background: url(nazwa_obrazka); background-attachment: fixed}
ProszΩ por≤wnaµ dwa przyk│ady, przesuwaj▒c pionowy suwak przegl▒darki (tylko IE4):
obrazek przesuwa siΩ na ekranie | obrazek tkwi nieruchomo na ekranie
T│o mo┐e mieµ r≤┐n▒ pozycjΩ. Najbardziej typowym przyk│adem jest t│o strony, kt≤rym jest obrazek.
Przyk│ad: t│o na ╢rodku strony
W tym akurat przyk│adzie zdefiniowali╢my t│o jako pojedynczy obrazek na ╢rodku ekranu, czyli za pomoc▒ polecenia BODY {background: url(pcq.gif) fixed no-repeat center}. Najwa┐niejszy jest tutaj parametr center.
To by│o tzw. polecenie mieszane, natomiast pe│na sk│adnia dla pozycji t│a wygl▒da nastΩpuj▒co (realizuje j▒ IE4):
background-position: warto╢µ
W przyk│adowej tabeli (z jedn▒ kom≤rk▒) mo┐emy wstawiµ grafikΩ jako t│o, bez definiowania pozycji.
| bez definiowania pozycji bez definiowania pozycji bez definiowania pozycji |
Mo┐emy jednak okre╢liµ pozycjΩ t│a:
background-position: top
| pozycja top pozycja top pozycja top pozycja top |
background-position: center
| pozycja center pozycja center pozycja center pozycja center |
background-position: bottom
| pozycja bottom pozycja bottom pozycja bottom |
W powy┐szych przyk│adach grafika ustawia│a siΩ domy╢lnie na ╢rodku, je╢li chodzi o po│o┐enie poziome. Mo┐emy jednak definiowaµ tak┐e warto╢ci dla po│o┐enia poziomego:
background-position: left
| pozycja left pozycja left pozycja left |
background-position: center
| pozycja center pozycja center pozycja center |
background-position: right
| pozycja right pozycja right pozycja right |
Zauwa┐my, ┐e parametr center daje ten sam wynik w pionie i poziomie.
Mo┐emy mieszaµ warto╢ci pozycji pionowej i poziomej, na przyk│ad top left czy bottom right:
background-position: top right
| pozycja top right pozycja top right pozycja top right |
background-position: bottom left
| pozycja bottom left pozycja bottom left pozycja bottom left |
Mo┐liwe jest wreszcie podanie warto╢ci liczbowych, np. background-position: 1cm 2cm, czyli 1 centymetr od lewego brzegu i 2cm od prawego.
background-position: 1cm 2cm
| pozycja 1cm 2cm pozycja 1cm 2cm pozycja 1cm 2cm |
background-position: 20% 80%
| pozycja 20% 80% pozycja 20% 80% pozycja 20% 80% |
Najwygodniejszym sposobem definiowania t│a jest oczywi╢cie wykorzystanie tzw. definicji mieszanej, w kt≤rej nie powtarza siΩ ca│ego zestawu "zaklΩµ" background-repeat, background-position itd. Wykorzystujemy tu polecenie:
background: kolejne warto╢ci
Na przyk│ad, polecenie dla kom≤rki tabeli:
<td style="background: url(obrazek) no-repeat bottom right>
spowoduje, ┐e w kom≤rce poka┐e siΩ dany obrazek (url), nie bΩdzie siΩ powtarza│ (no-repeat) i bΩdzie umieszczony w dolnym prawym rogu (bottom right).
Pokazana wy┐ej strona z pojedynczym obrazkiem jako t│em ma mieszan▒ definicjΩ:
BODY {background: url(pcq.gif) fixed no-repeat center}
DziΩki takiej definicji strona ma t│o w postaci pojedynczego (no-repeat) obrazka (url), kt≤ry jest umieszczony na ╢rodku ekranu i nie porusza siΩ (center fixed).