Zde vám přinášíme kompletní seznam stylů z normy CSS I, které jsou použitelné v HTML stránkách. Veškeré vlastnosti stylů jsou rozděleny do skupin podle svého významu. Každá skupina vlastností pak je v samostatné tabulce.

Vysvětlení významu jednotlivých sloupců tabulek:

Jméno – jméno vlastnosti.

Možné hodnoty – zde je zapsán seznam hodnot, které je možné použít u dané vlastnosti. Používá se následující legenda:

  • jedna svislá čárka | – znamená, že můžete použít jenom jednu z vypsaných hodnot. Například zápis scroll | fixed znamená, že můžete použít buď hodnotu scroll, nebo hodnotu fixed. Ale nelze použít obě najednou.
  • dvě svislé čárky || – můžete použít jakoukoli hodnotu i více hodnot najednou. Například zápis [underline || overline || line-through || blink] říká, že můžete použít najednou třeba underline i overline.
  • otazník za hodnotou – říká, že hodnota je nepovinná. Třeba zápis [‚font-weight‘]? znamená, že hodnotu příslušející font-weight můžete, ale nemusíte použít.
  • {1,2} – říká, že hodnota se může použít buď jednou, nebo dvakrát.
  • {1,4} – říká, že hodnota se může použít buď jednou až čtyřikrát

Implicitní hodnota – to je hodnota, kterou prohlížeč použije, pokud žádný styl nepoužijeme.

Možné použít na – ukazuje, na jaký druh značek je možné styl použít. V zásadě jsou tři druhy značek:

  • Blokové značky – vytváří blok textu, jako josu odstavce, tabulky, apod. Příklady: <h2>, <p>, <ul>, <td>.
  • Nahrazované značky – vytváří blok, který něčím nahrazen, třeba obrázkem, Java appletem. Příklad: <img>, <object>.
  • Značky v řádce – to jsou značky, které ovlivňují formátování textu, ale nevytváří žádný blok. Například značky <em>, <font>, <b>.

Dále je potřeba si uvědomit, že výjimkou ze všech značek je <br>. Tato značka nepatří do žádné skupiny, a je tak trochu černou ovcí. Na tuto značku se nedají žádné styly aplikovat, a ani by to nemělo žádný smysl.

A ještě poznámku pro pochopení. Kaskádovými styly CSS nastavujete vlastnosti všeho, co je uvnitř dané značky (pokud se vlastnost stylu dědí, jinak jenom pokud není uvnitř jiná značka). Takže třeba můžete nastavit font pomocí font-family na jakoukoli značku. Význam je ten, že platí pro všechny texty uvnitř této značky. Například určení fontu pro tabulku je potřeba chápat tak, že jste nastavili font pro všechny texty uvnitř tabulky.

Dědí se? – ukazuje, zda se vlastnost dědí. Pokud máte třeba nastavený styl na značku <p>, která představuje odstavec, potom dědění způsobuje, že styl platí i na všechny značky uvnitř odstavce.

Popis – zde je velice stručný popis významu. Pro dokonalé pochopení je potřeba se obrátit na příslušný článek ze seriálu o kaskádových stylech CSS.

Vlastnosti písma
Jméno Možné hodnoty Implicitní hodnota Možné použít na Dědí se? Popis
font-family libovolně dlouhý seznam fontů oddělených čárkami závisí na prohlížeči všechny značky ano nastavení druhů písma; prohlížeč použije první písmo v seznamu, které má k dispozici
font-style normal | italic | oblique normal všechny značky ano styl písma: italic = kurzíva, oblique = skloněné
font-variant normal | small-caps normal všechny značky ano small-caps = kapitálky
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal všechny značky ano tloušťka písma, normal = 400
font-size xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | délka | procento medium všechny značky ano velikost písma
font [‚font-style‘ || ‚font-variant‘ || ‚font-weight‘]? ‚font-size‘ [/’line-height‘]? ‚font-family‘ podle jednotlivých vlastností všechny značky ano zkrácený zápis – nastavuje všechny vlastnosti písma


Vlastnosti barev a pozadí
Jméno Možné hodnoty Implicitní hodnota Možné použít na Dědí se? Popis
color barva závisí na prohlížeči všechny značky ano barva popředí, barva textu, apod.
background-color barva | transparent transparent všechny značky ne barva pozadí
background-image url | none none všechny značky ne obrázek na pozadí
background-repeat repeat | repeat-x | repeat-y | no-repeat repeat všechny značky ne opakování obrázku na pozadí
background-attachment scroll | fixed scroll všechny značky ne scroll = pozadí se pohybuje s textem, fixed = pozadí je přibité
background-position [procento | délka]{1,2} | [[top | center | bottom] || [left | center | right]] 0% 0% blokové a nahrazované značky ne poloha obrázku na pozadí
background ‚background-color‘ || ‚background-image‘ || ‚background-repeat‘ || ‚background-attachment‘ || ‚background-position‘ podle jednotlivých vlastností všechny značky ne zkrácený zápis – nastavuje všechny vlastnosti pozadí


Vlastnosti textu
Jméno Možné hodnoty Implicitní hodnota Možné použít na Dědí se? Popis
word-spacing normal | délka normal všechny značky ano velikost mezery mezi jednotlivými slovy
letter-spacing normal | délka normal všechny značky ano velikost mezery mezi jednotlivými písmeny
text-decoration none | [underline || overline || line-through || blink] none všechny značky téměř ne efekty: underline = podtržení, overline = čára nad, line-through = přeškrtnutí, blink = blikání
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | procento baseline značky v řádce a uvnitř buněk tabulky ne vertikální zarovnání
text-transform capitalize | uppercase | lowercase | none none všechny značky ano převede text na: capitalize = kapitálky, uppercase = velká písmena, lowercase = malá písmena
text-align left | right | center | justify závisí na prohlížeči blokové značky ano horizontální zarovnání: left = vlevo, roght = vpravo, center = na střed, justify = do bloku
text-indent délka | procento 0 blokové elementy ano velikost odsazení první řádky v odstavci
line-height normal | číslo | délka | procento normal všechny značky ano výska řádku


Vlastnosti boxů
Jméno Možné hodnoty Implicitní hodnota Možné použít na Dědí se? Popis
margin-top délka | procento | auto 0 všechny značky ne výška mezery nad horním okrajem
margin-right délka | procento | auto 0 všechny značky ne šířka mezery na pravém okraji
margin-bottom délka | procento | auto 0 všechny značky ne výška mezery nad dolním okrajem
margin-left délka | procento | auto 0 všechny značky ne šířka mezery před levým okrajem
margin [délka | procento | auto]{1,4} 0 všechny značky ne zkrácený zápis – nastavení šířka mezery kolem celého boxu
padding-top délka | procento 0 všechny značky ne výška vnitřního horního okraje
padding-right délka | procento 0 všechny značky ne šířka vnitřního pravého okraje
padding-bottom délka | procento 0 všechny značky ne výška vnitřního dolního okraje
padding-left délka | procento 0 všechny značky ne šířka vnitřního levého okraje
padding [délka | procento]{1,4} 0 všechny značky ne zkrácený zápis – nastavení všech vnitřních okrajů
border-top-width thin | medium | thick | délka medium všechny značky ne šířka horní části rámečku
border-right-width thin | medium | thick | délka medium všechny značky ne šířka pravé části rámečku
border-bottom-width thin | medium | thick | délka medium všechny značky ne šířka dolní části rámečku
border-left-width thin | medium | thick | délka medium všechny značky ne šířka levé části rámečku
border-width [thin | medium | thick | délka]{1,4} medium všechny značky ne zkrácený zápis – šířka všech částí rámečku
border-color [barva]{1,4} podle jednotlivých vlastností všechny značky ne zkrácený zápis – nastavuje barvu všech okrajů
border-style none | dotted | dashed | solid | double | groove | ridge | inset | outset none všechny značky ne styl rámečku: solid = plná čára, double = dvojitá plná čára, atd.
border-top ‚border-top-width‘ || ‚border-style‘ || barva podle jednotlivých vlastností všechny značky ne zkrácený zápis – nastavení všech vlastností horní části rámečku
border-right ‚border-right-width‘ || ‚border-style‘ || barva podle jednotlivých vlastností všechny značky ne zkrácený zápis – nastavení všech vlastností pravé části rámečku
border-bottom ‚border-bottom-width‘ || ‚border-style‘ || barva podle jednotlivých vlastností všechny značky ne zkrácený zápis – nastavení všech vlastností dolní části rámečku
border-left ‚border-left-width‘ || ‚border-style‘ || barva podle jednotlivých vlastností všechny značky ne zkrácený zápis – nastavení všech vlastností levé části rámečku
border ‚border-width ‚|| ‚border-style‘ || barva podle jednotlivých vlastností všechny značky ne zkrácený zápis – nastavuje všechny vlastnosti okraje
width délka | procento | auto auto blokové a nahrazované značky ne šířka
height délka | auto auto všechny značky ne výška
float left | right | none none blokové a nahrazované značky ne umístění plovoucího objektu vůči rodičovské značce
clear none | left | right | both none všechny značky ne určuje omezení, ze které strany nesmí být obtékáno: none = může z obou stran, left = nesmí z levé, right = nesmí z pravé, both = nesmí vůbec


Klasifikační vlastnosti
Jméno Možné hodnoty Implicitní hodnota Možné použít na Dědí se? Popis
display block | inline | list-item | none block všechny značky ne určuje, jak se má značka zobrazit, použití pro HTML sporné
white-space normal | pre | nowrap normal všechny značky ano jak se bude zacházet s mezerami: pre = jako u značky <pre>, nowrap = text se nebude lámat do řádek
list-style-type disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none disc seznamy ano tvar odrážek před seznamem: disc = plný kruh, circle = kroužek, square = čtverec, decimal = číslování 1,2,3, lower-roman = i,ii,ii,iv, upper-roman = I,II,III,IV, lower-aplha = a,b,c, upper-alpha = A,B,C
list-style-image url | none none seznamy ano obrázek jako odrážka u seznamu
list-style-position inside | outside outside seznamy ano typ předsazení odrážky: outside = odrážka bude předsazena, inside = nebude předsazena
list-style ‚list-style-type‘ || ‚list-style-position‘ || ‚list-style-image‘ podle jednotlivých vlastností seznamy ano zkrácený zápis – nastavuje všechny vlastnosti seznamu


Seznam písem

U vlastnosti font-family je možné určit seznam písem. Prohlížeč potom tento seznam prochází a použije první písmo v seznamu, které má k dispozici. Tento seznam by se měl zakončit takzvaným generickým jménem fontu:

  • serif – klasické patkové písmo, jako je Times.
  • sans-serif – klasické bezpatkové písmo, jako je Arial a Helvetica.
  • monospace – neproporcionální písmo, jako je Courier, nebo Terminal.
  • cursive – písmo s kurzívou.
  • fantasy – různá ozdobná písma

Příklady generických jmen písem:

  • Toto je písmo serif.
  • Toto je písmo sans-serif.
  • Toto je písmo monospace.
  • Toto je písmo cursive.

Seznam možných jednotek délky

Délky lze určovat buď absolutně (určíme rovnou skutečnou velikost), a nebo relativně (určíme, kolikrát chceme být větší vůči situaci, kdybychom styl nepoužili).

Absolutní určení délky:

  • in – palce. Jeden palec je 2,54 cm.
  • mm – milimetry.
  • cm – centimetry.
  • pt – pointy. 72 pointů je jeden palec. 6 pointů je jedna pica.
  • pc – pica. 12 pica je jeden palec.

Relativní určení délky:

  • em – Výška písma na řádce. Například 2em znamená, že požadujeme délku rovnou dvojnásobku výšky písma na řádce. (Stejný efekt dosáhneme pomocí zápisu 200%).
  • ex – Výška písmene x. Zápis 3ex znamená, že požadujeme délku, která je rovná trojnásobku výšky písmena x.
  • px – pixel, neboli bod na obrazovce.

Seznam způsobů určení barev

Barvy lze určovat buď jménem barvy (16 nejběžnějších barev je pojmenováno), a nebo její RGB hodnotou, která vyjadřuje, kolik musíme smíchat červeného (Red), zeleného (Green) a modrého (Blue) světla.

Zápisy pomocí RGB hodnoty:

  • #rrggbb – například #80FFFF
  • #rgb – například #1a3 se roztáhne na #11aa33
  • rgb(r,g,b) – určuje, kolik dílů tří světel se použije (možné hodnoty jsou 0 až 255), například rgb(50,255,0)
  • rgb(r%,g%,b%) – určuje, kolik procent každého ze tří světel se použije, například rgb(10%,50%,90%)

Zápis url

URL se zapisuje, když je potřeba zadat jméno souboru, většinou onrázku. Potom se url zapisuje zhruba takto:

body {background-image: url("pictures/pozadi/pozadi_2.png");}

Zápis procent

Procenta se zapisují takto: 200%.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět