6.6. Styly v praxi

Z předchozí části kapitoly vidíme, že styly jsou opravdu mocný a výkonný nástroj pro zlepšení grafického vzhledu našich stránek. Jedinou nevýhodou je, že zatím ne všechny prohlížeče podporují všechny vlastnosti, které jsme zde popsali. Netscape Communicator podporuje styly až od verze 4.0. Internet Explorer je podporuje již od verze 3.0. Bohužel ani jeden z prohlížečů nepodporuje všechny vlastnosti stylů. Naštěstí každá nová verze přináší výrazná zlepšení v podpoře stylů. Styly tedy může hojně používat, ale stránky musíme psát tak, aby svůj význam neztratily ani v prohlížečích, které styly nepodporují.

Nyní si na jednoduché stránce prakticky ukážeme použití stylů. Nejprve si do souboru mujstyl.css uložíme definici stylu: 

BODY            { text-align: justify;
                  background-color: white;
                  color: black }

A:link          { color: blue }
A:visited       { color: gray }
A:active        { text-decoration: blink }


P               { text-indent: 20pt;
                  margin-top: 0pt }

.nadpis         { text-align: center }

H1              { text-transform: uppercase;
                  background-color: blue;
                  color: yellow;
                  padding: 4px }

H2              { font-family: Arial, sans-serif }

.autor          { font-variant: small-caps }

Styl ke stránce připojíme s využitím elementu LINK. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Stylově stylová stránka</TITLE>
<LINK REL=StyleSheet HREF="mujstyl.css" TYPE="text/css">
</HEAD>
<BODY>

<DIV CLASS=nadpis>
<H1>Stylově stylová stránka</H1>
Jiří Kosek
</DIV>

<H2>CSS</H2>

Káskádové styly dokumentů umožňují standardizovaným způsobem
kontrolovat grafický vzhled webovských stránek. Jejich popis
nalezneme v dokumentu
<A HREF="http://www.w3.org/pub/WWW/TR/REC-CSS1.html">Cascading
Style Sheets, level 1</A> jehož autory jsou
<SPAN CLASS=autor>H&aring;kon Wium Lie</SPAN> 
a <SPAN CLASS=autor>Bert Bos</SPAN>.

<P>Jedinou nevýhodou je zatím malá podpora prohlížečů. To se
však rychle mění, takže brzy bude mít většina uživatelů webu 
k dispozici odpovídající prohlížeč.

<P>Pomocí stylů můžeme ovlivňovat mnoho vlastností stránky.
Použitý řez písma, barvu textu i pozadí, velikost okrajů,
vzdálenost mezi odstavci, velikost odstavcové zarážky, způsob
zarovnání a mnoho dalšího.

</BODY>
</HTML>

Výsledné zobrazení naší stránky v prohlížeči Internet Explorer 4.0 si můžeme prohlédnout na obrázku 6.3 – „Stránka využívající styly“.

Obrázek 6.3. Stránka využívající styly

Stránka využívající styly

Tabulka 6.4. Vlastnosti písma

Vlastnost Možné hodnoty Implicitní hodnota Aplikuje se na Dědí se? Interpretace procentních hodnot Popis
font-family seznam písem záleží na prohlížeči všechny elementy ano – rodina písma
font-style normal | italic | oblique normal všechny elementy ano – styl písma: normal = normální, italic = kurzíva, oblique = skloněné
font-variant normal | small-caps normal všechny elementy ano – varianta písma: normální nebo kapitálky
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal = 400 všechny elementy ano – duktus písma (tj. „jak bude písmo silné“)
font-size xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | délka | procento medium všechny elementy ano relativně k rodičovské velikosti písma velikost písma
font font-style || font-variant || font-weight]? font-size [/ line-height]? font-family implicitní hodnoty jednotlivých vlastností všechny elementy ano použitelné pro font-size a line-height komplexní nastavení vlastností písma

Tabulka 6.5. Vlastnosti pro nastavení barev a pozadí

Vlastnost Možné hodnoty Implicitní hodnota Aplikuje se na Dědí se? Interpretace procentních hodnot Popis
color barva záleží na prohlížeči všechny elementy ano – barva
background-color barva | transparent tt transparent} všechny elementy ne – barva pozadí
background-image URL | none none všechny elementy ne – obrázek na pozadí
background-repeat repeat | repeat-x | repeat-y | no-repeat repeat všechny elementy ne – směry, ve kterých se bude obrázek na pozadí opakovat
background-attachment scroll | fixed scroll všechny elementy ne – pozadí se pohybuje se stránkou (scroll) nebo je jako přibité (fixed)
background-position procento | délka] {1,2} | [top | center | bottom] || [left | center | right] 0% 0% (odpovídá top left) blokové a nahrazované elementy ne vztahují se k velikosti vlastního elementu poloha obrázku na pozadí (udává se X- a Y-pozice)
background background-color || background-image || background-repeat || background-attachment || background-position implicitní hodnoty jednotlivých vlastností všechny elementy ne pouze u background-position komplexní nastavení vlastností pozadí

Tabulka 6.6. Vlastnosti textu

Vlastnost Možné hodnoty Implicitní hodnota Aplikuje se na Dědí se? Interpretace procentních hodnot Popis
word-spacing normal | délka normal všechny elementy ano – o kolik se má zvětšit mezislovní mezera
letter-spacing normal | délka normal všechny elementy ano – o kolik se má zvětšit mezera mezi jednotlivými písmeny
text-decoration none | [underline || overline || line-through || blink] none všechny elementy ne – „ozdoba“ textu: underline = podtržení, overline = čára nad, line-through = čára přes, blink = blikání
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | procento baseline inline elementy ne vztahují se k hodnotě line-height vertikální zarovnání
text-transform capitalize | uppercase | lowercase | none none všechny elementy ano – převod textu na: capitalize = kapitálky, uppercase = velká písmena, lowercase = malá písmena
text-align left | right | center | justify záleží na prohlížeči blokové elementy ano – zarovnání textu: left = na levý praporek, right = na pravý praporek, center = centrování, justify = do bloku
text-indent délka | procento blokové elementy ano vztahují se k šířce rodičovského elementu velikost odstavcové odrážky (odsazení první řádky odstavce)  
line-height normal | číslo | délka | procento normal všechny elementy ano relativně k velikosti písma elementu výška řádky; číslo udává násobek velikosti písma (většinou by měl být alespoň 1.2)

Tabulka 6.7. Vlastnosti boxů – I.

Vlastnost Možné hodnoty Implicitní hodnota Aplikuje se na Dědí se? Interpretace procentních hodnot Popis
margin-top délka | procento | auto 0 všechny elementy ne vztahují se k šířce rodičovského elementu velikost horního okraje
margin-right délka | procento | auto 0 všechny elementy ne vztahují se k šířce rodičovského elementu velikost pravého okraje
margin-bottom délka | procento | auto 0 všechny elementy ne vztahují se k šířce rodičovského elementu velikost spodního okraje
margin-left délka | procento | auto 0 všechny elementy ne vztahují se k šířce rodičovského elementu velikost levého okraje
margin délka | procento | auto] {1,4} implicitní hodnoty jednotlivých vlastností všechny elementy ne vztahují se k šířce rodičovského elementu komplexní nastavení velikosti okrajů
padding-top délka | procento 0 všechny elementy ne vztahují se k šířce rodičovského elementu velikost vnitřního horního okraje
padding-right délka | procento 0 všechny elementy ne vztahují se k šířce rodičovského elementu velikost vnitřního pravého okraje
padding-bottom délka | procento 0 všechny elementy ne vztahují se k šířce rodičovského elementu velikost vnitřního spodního okraje
padding-left délka | procento 0 všechny elementy ne vztahují se k šířce rodičovského elementu velikost vnitřního levého okraje

Tabulka 6.8. Vlastnosti boxů – II.

Vlastnost Možné hodnoty Implicitní hodnota Aplikuje se na Dědí se? Interpretace procentních hodnot Popis
padding [délka | procento] {1,4} 0 všechny elementy ne vztahují se k šířce rodičovského elementu komplexní nastavení velikostí vnitřního okraje
border-top-width thin | medium | thick | délka medium všechny elementy ne – šířka horní části rámečku
border-right-width thin | medium | thick | délka medium všechny elementy ne – šířka pravé části rámečku
border-bottom-width thin | medium | thick | délka medium všechny elementy ne – šířka spodní části rámečku
border-left-width thin | medium | thick | délka medium všechny elementy ne – šířka levé části rámečku
border-width [thin | medium | thick | délka] {1,4} implicitní hodnoty jednotlivých vlastností všechny elementy ne – komplexní nastavení šířky rámečku
border-color barva {1,4} hodnota vlastnosti color všechny elementy ne – barva rámečku
border-style [none | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} none všechny elementy ne – nastavení tvaru rámečku
border-top border-top-width || border-style || barva implicitní hodnoty jednotlivých vlastností všechny elementy ne – nastavení vlastností horní části rámečku
border-right border-top-width || border-style || barva implicitní hodnoty jednotlivých vlastností všechny elementy ne – nastavení vlastností pravé části rámečku

Tabulka 6.9. Vlastnosti boxů – III.

Vlastnost Možné hodnoty Implicitní hodnota Aplikuje se na Dědí se? Interpretace procentních hodnot Popis
border-bottom border-top-width || border-style || barva implicitní hodnoty jednotlivých vlastností všechny elementy ne – nastavení vlastností spodní části rámečku
border-left border-top-width || border-style || barva implicitní hodnoty jednotlivých vlastností všechny elementy ne – nastavení vlastností levé části rámečku
border border-width || border-style || barva implicitní hodnoty jednotlivých vlastností všechny elementy ne – komplexní nastavení vlastností rámečku
width délka | procento | auto auto blokové a nahrazované elementy ne vztahují se k šířce rodičovského elementu šířka
height délka | auto auto blokové a nahrazované elementy ne – výška
float left | right | none none všechny elementy ne – umístění plovoucího objektu: left = vlevo, right = vpravo, none = normální objekt
clear none | left | right | both none všechny elementy ne – čekání na skončení plovoucích elementů: left = vlevo, right = vpravo, both = na obou stranách

Tabulka 6.10. Klasifikační vlastnosti

Vlastnost Možné hodnoty Implicitní hodnota Aplikuje se na Dědí se? Interpretace procentních hodnot Popis
display block | inline | list-item | none block všechny elementy ne – druh elementu
white-space normal | pre | nowrap normal blokové elementy ano – způsob práce s mezerami: normal = normální, pre = mezery a kance řádek se zachovají, nowrap = text se nebude zalamovat do řádek
list-style-type disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none disc elementy, které mají display: list-item ano – druh odrážek v seznamech
list-style-image URL | none none elementy, které mají display: list-item ano – obrázek použitý jako odrážka v seznamu
list-style-position inside | outside outside elementy, které mají display: list-item ano – umístění odrážky: outside = před textem, inside = v textu položky seznamu
list-style list-style-type || list-style-position || list-style-image implicitní hodnoty jednotlivých vlastností elementy, které mají display: list-item ano – komplexní nastavení vzhledu položek seznamu

Předcházející  Nahoru  Další
  Domů  

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2010 Jiří Kosek
blog comments powered by Disqus