Uwaga: nie wszystkie elementy styl≤w s▒ akceptowane przez przegl▒darki, w kt≤rych rozpoczΩto implementacjΩ styl≤w.
W przypadku czcionek rozr≤┐niamy kilka blok≤w informacji.
Uprzedzaj▒c opis sposob≤w wprowadzania styl≤w do dokumentu, za│o┐ymy w tym miejscu, ┐e pos│ugujemy siΩ stylami lokalnymi (in-line) tworzonymi za pomoc▒ konstrukcji:
<p style="definicja stylu">Tre╢µ akapitu</p>
Aby zdefiniowaµ rodzinΩ czcionek, nale┐y wpisaµ w definicji stylu font-family: czcionka. Gdyby╢my sobie za┐yczyli, aby akapit by│ wy╢wietlany za pomoc▒ czcionki Times, powinni╢my napisaµ
<p style="font-family: Times">Tre╢µ akapitu</p>
Efekt bΩdzie nastΩpuj▒cy:
To jest akapit napisany za pomoc▒ czcionki Times
Analogicznie, mo┐emy podaµ czcionkΩ Courier:
To jest akapit napisany za pomoc▒ czcionki Courier
Poniewa┐ nigdy nie wiemy, jakimi czcionkami dysponuje czytelnik strony, mo┐emy siΩ zabezpieczyµ, podaj▒c kilka kolejnych czcionek, np:
<p style="font-family: Times, 'Times New Roman', 'Times New Roman CE'">Tre╢µ akapitu</p>
To jest akapit wy╢wietlony za pomoc▒ pierwszej dostΩpnej czcionki.
ProszΩ zwr≤ciµ uwagΩ, ┐e gdy podajemy kilka czcionek, rozdzielamy je przecinkami i spacj▒. Gdy czcionka ma kilka wyraz≤w w nazwie, ujmujemy je w apostrof ', podczas gdy ca│a definicja jest objΩta cudzys│owem.
Mo┐emy tak┐e poslu┐yµ siΩ nazw▒ rodzajow▒, np. serif, co jeszcze bardziej zwiΩksza szansΩ, ┐e akapit zostanie wy╢wietlony czcionk▒ szeryfow▒, gdyby zabrak│o w systemie czytelnika czcionek Times, Times New Roman itd..
<p style="font-family: serif">Tre╢µ akapitu</p>
To jest akapit wy╢wietlony za pomoc▒ pierwszej dostΩpnej czcionki szeryfowej.
Mo┐emy wykorzystywaµ tak┐e inne nazwy rodzajowe, np. sans-serif, cursive, fantasy, monospace. A oto przyk│ady (niekt≤re wy╢wietlane z b│Ωdami):
To jest akapit wy╢wietlony za pomoc▒ pierwszej dostΩpnej czcionki bezszeryfowej.
To jest akapit wy╢wietlony za pomoc▒ pierwszej dostΩpnej czcionki pochy│ej.
To jest akapit wy╢wietlony za pomoc▒ pierwszej dostΩpnej czcionki ozdobnej.
To jest akapit wy╢wietlony za pomoc▒ pierwszej dostΩpnej czcionki monotypicznej.
Wynik wy╢wietlania mo┐e byµ odmienny w ka┐dym konkretnym przypadku i nie jestem w stanie przewidzieµ, jaka konkretna czcionka jest u Pa±stwa anga┐owana do wy╢wietlania. Znam tylko jej nazwΩ rodzajow▒.
Oczywi╢cie mo┐na mieszaµ definicje, podaj▒c nazwy imienne i rodzajowe, np. "Times, 'Times New Roman', serif".
Do dyspozycji mamy trzy style czcionki: normal, italic i oblique. Dwie ostatnie s▒ wy╢wietlane w podobny spos≤b.
<p style="font-style: normal">Tre╢µ akapitu</p>
Tre╢µ akapitu wy╢wietlana w stylu normal
<p style="font-style: italic">Tre╢µ akapitu</p>
Tre╢µ akapitu wy╢wietlana w stylu italic
<p style="font-style: oblique">Tre╢µ akapitu</p>
Tre╢µ akapitu wy╢wietlana w stylu oblique (tylko IE)
Na razie rozr≤┐niane s▒ dwa warianty czcionek: normal i small-caps (ma│e kapitaliki). Przewiduje siΩ wprowadzenie dalszych wariant≤w, np. condensed, expanded itd.
<p style="font-variant: normal">Tre╢µ akapitu</p>
Tre╢µ akapitu wy╢wietlana w wariancie normal
<p style="font-variant: small-caps">Tre╢µ akapitu</p>
Tre╢µ akapitu wy╢wietlana w wariancie small-caps (tylko IE)
Do dyspozycji mamy a┐ 13 rozmaitych "wag" czcionki, r≤┐ni▒cych siΩ stopniem pogrubienia (nawet trudno je bΩdzie niekiedy rozr≤┐niµ na ekranie): normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Poka┐my to na przyk│adach:
<p style="font-weight: waga">Tre╢µ akapitu wy╢wietlana za pomoc▒ wybranej wagi</p>
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi normal
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi bold
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi bolder
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi lighter
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 100
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 200
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 300
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 400
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 500
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 600
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 700
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 800
Tre╢µ akapitu wy╢wietlana za pomoc▒ wagi 900
Wielko╢µ czcionki mo┐emy regulowaµ za pomoc▒ czterech metod: imiennych wielko╢ci absolutnych, wielko╢ci relatywnych, wysoko╢ci w jednostkach miary i wysoko╢ci w procentach.
Imienne wielko╢ci absolutne
xx-small, x-small, small, medium, large, x-large, xx-large
<p style="font-size: wielko╢µ absolutna">Tre╢µ akapitu</p>
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci xx-small
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci x-small
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci small
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci medium
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci large
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci x-large
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci xx-large
Wielko╢ci relatywne
larger, smaller (w stosunku do domy╢lnej)
<p style="font-size: wielko╢µ relatywna">Tre╢µ akapitu</p>
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci larger
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci smaller
Wielko╢µ w jednostkach miary
W dokumencie mo┐na u┐yµ kilku klasycznych jednostek miary: centymetry (cm), cale (in), milimetry (mm), punkty (pt) i pica (pc).
1in = 2.54cm
1pt=1/72in
1pc=12pt
Na przyk│ad:
<p style="font-size: 1cm"<>/p>
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci 1 cm
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci 8 mm
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci 0,1 cala
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci 14 punkt≤w
Tre╢µ akapitu wy╢wietlana za pomoc▒ wielko╢ci 1,5 pica
Wielko╢µ w procentach
Podanie wielko╢ci w procentach powinno daµ w efekcie procent wielko╢ci domy╢lnej dla danego selektora, np. akapitu, tytu│u itp.
Obie przegl▒darki interpretuj▒ to polecenie czΩ╢ciowo b│Ωdnie, np. w odniesieniu do tytu│u.
Na przyk│ad:
<h1 style="font-size: 125%">To jest tytu│ stopnia pierwszego 125%</h1>
Mo┐liwe jest u┐ycie mieszanej definicji czcionki, obejmuj▒cej r≤┐ne atrybuty, np. rodziny czcionek, wagi, wielko╢ci itp. Nie jest konieczne podawanie cech - wystarcz▒ same warto╢ci po pocz▒tkowej deklaracji font:.
<h3 style="font: italic bold 20pt Arial, Helvetica, sans-serif"></h3>
<p style="font: small-caps bold 14pt/18pt Times, 'Times New Roman', serif"></p>
Akapit ma│e kapitaliki, pogrubiony, 14 pkt, 18 pkt odstΩpu miΩdzy liniami bazowymi wierszy, Times...
Nale┐y zwracaµ uwagΩ na kolejno╢µ atrybut≤w. Poprawna kolejno╢µ to:
font-style font-variant font-weight font-size line-height font-family
Zmiana kolejno╢ci MO»E spowodowaµ wypadniΩcie atrybutu, kt≤ry nie zosta│ umieszczony we w│a╢ciwym porz▒dku.