Referenční přehled vlastností CSS1
(Cascading Style Sheets, level 1)

Tento dokument shrnuje nejdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading Style Sheets, level 1, jsou však uspořádány do přehledných tabulek.

© Jiří Kosek, 1997

Obsah

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

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 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í

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" text: 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 na hodnotu line-height elementu 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 0 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)

Vlastnosti boxů

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 no 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ů
4 hodnoty: nahoře, vpravo, dole, vlevo
3 hodnoty: nahoře, vpravo a vlevo, dole
2 hodnoty: nahoře a dole, vpravo a vlevo
1 hodnota: nohoře a vpravo a dole a vlevo
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 dolní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
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
4 hodnoty: nahoře, vpravo, dole, vlevo
3 hodnoty: nahoře, vpravo a vlevo, dole
2 hodnoty: nahoře a dole, vpravo a vlevo
1 hodnota: nohoře a vpravo a dole a vlevo
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
4 hodnoty: nahoře, vpravo, dole, vlevo
3 hodnoty: nahoře, vpravo a vlevo, dole
2 hodnoty: nahoře a dole, vpravo a vlevo
1 hodnota: nohoře a vpravo a dole a vlevo
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:
4 hodnoty: nahoře, vpravo, dole, vlevo
3 hodnoty: nahoře, vpravo a vlevo, dole
2 hodnoty: nahoře a dole, vpravo a vlevo
1 hodnota: nohoře a vpravo a dole a vlevo
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
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 -- left, right = plovoucí objekt (např. obrázek obtékaný textem), 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

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

Řízení pozice

Vlastnost Možné hodnoty Implicitní hodnota Aplikuje se na Dědí se? Interpretace procentních hodnot Popis
position absolute | relative | static static všechny elementy ano -- způsob pozicování elementu;
static odpovídá běžnému formátování
left délka | procento | auto auto všechny elementy ne -- posunutí elementu vpravo;
záporná hodnota posune vlevo
top délka | procento | auto auto všechny elementy ne -- posunutí elementu dolů;
záporná hodnota posune nahoru
width
height		 délka | procento | auto auto elementy blokové, nahrazované a s  position: absolute ne vztahují se k šířce (výšce) rodičovského elementu šířka a výška elementu
clip auto | rect([délka | auto] [délka | auto] [délka | auto] [délka | auto]) auto elementy s  position: absolute ne -- definice obdélníkové části elementu, která bude viditelná (standardně je viditelný celý element)
overflow none | clip | scroll none elementy s relativní nebo absolutní pozicí ne -- způsob zobrazení elementů, jejichž obsah se nevejde do vyhrazeného prostoru:
none = obsah elementu přeteče,
clip = obsah elementu bude oříznut,
scroll = po obsahu půjde skrolovat
z-index auto | číslo auto elementy s relativní nebo absolutní pozicí ne -- pozice elementu na pseudoose z
visibility inherit | visible | hidden inherit všechny elementy pro inherit -- viditelnost elementu:
visible = viditelný,
hidden = neviditelný

Použitá syntaxe

A | BPrávě jedna z entit A a B
A || BAlespoň jedna z entit A a B v libovolném pořadí
[ ... ]Skupiny
?Předcházející entita je nepovinná
{A,B}Předcházející entita se opakuje nejméně A-krát a nejvíce B-krát

Jednotky

Délkové jednotky

Délkové údaje se zapisují jako celá nebo desetinná čísla s nebo bez znaménka. Dvojice písmen identifikující jednotky musí být připojena ihned za číslem.

Relativní jednotky:

emVýška aktuálního písma. Odpovídá šířce písmene 'M'.
exVýška písmene 'x'.
pxPixely -- 1 pixel odpovídá jednomu bodu obrazovky.

Absolutní jednotky:

inPalce. 1 in = 2,54 cm = 72 pt
cmCentimetry.
mmMilimetry. 10 mm = 1 cm
ptBody. 1 pt = 1/72 in = 1/12 pc
pcPica. 1 pc = 12 pt

Procenta

Procenta se zapisují jako celá nebo desetinná čísla s nebo bez znaménka, za kterými ihned následuje znak '%'. Hodnoty zadané jako procento se relativně vztahují k nějaké jiné hodnotě, od které se odvodí absolutní velikost. Pokud používáme procenta, musíme si vždy uvědomit, od které hodnoty se bude absolutní velikost odvíjet. Většinou se jedná o šířku elementu.

Čísla

Číslo je celé nebo desetinné s nebo bez znaménka.

Barvy

Při specfikování barev máme několik možností. Tou první je použití jména barvy. Jména jsou stejná jako v HTML a jsou následující: aqua (jasná modrozelená), black (černá), blue (modrá), fuchsia (anilínová červeň), gray (šedivá), green (zelená), lime (citrónově zelená), maroon (kaštanová), navy (tmavá modř), olive (olivová), purple (purpurová), red (červená), silver(stříbrná), teal (tmavá modrozelená), white (bílá), yellow (žlutá).

Druhou možností je zapsat barvu přímo v RGB notaci pomocí červené, zelené a modré složky barvy. Jsou celkem čtyři možnosti:

#rgbpř. #f00 je červená
#rrggbbpř. #ffff00 je žlutá
rgb(r, g, b)r, g, b jsou od 0 do 255
rgb(r%, g%, b%)r, g, b jsou od 0 do 100

URL

Zápis URL si nejlépe ukážeme na příkladě: 
	url(http://www.server.cz/info/img/logo.gif)
Závorky, čárky, mezery a uvozovky musíme zapsat tak, že jim předřadíme zpětné lomítko '\'.

Seznam písem

Písma zadáváme jako čárkami odděleněný seznam jejich názvů. Písma uvedná dříve mají větší prioritu. Jako poslední písmo v seznamu bychom měli vždy uvést obecný název písma:
serifklasické patkové písmo (např. Times)
sans-serifbezpatkové písmo (např. Helvetica nebo Arial)
cursivekurzíva
fantasyozdobné písmo
monospaceneproporcionální písmo (např. Courier)

Druhy elementů

Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. H1 a P).

Inline elementy jsou běžnou součástí textu na řádce. Nemají okolo sebe žádné zalomení řádek (např. STRONG).

Nahrazované elementy jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG a OBJECT).

Stránku připravil Jiří Kosek, jirka@kosek.cz
Poslední modifikace: 09-11-97