Přehled vlastností CSS

Tabulka 10. 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 11. 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 12. 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 13. 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 14. 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 15. 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 16. 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í     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–2014 Jiří Kosek
blog comments powered by Disqus