Kompletní seznam vlastností CSS stylů použitelných v HTML

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.

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.