Zápis CSS

Začneme hned příkladem. Chceme mít třeba odstavce modrou barvou s prostrkanými písmeny ve slovech (mezery určité velikosti mezi písmeny).

p {
  color: blue;
  letter-spacing: 2px;
  }

Pozn.: U noční verze webu má odstavec přidáno světlé pozadí, kvůli lepší čitelnosti.

Obecný zápis vypadá následovně:

selektor {
  css-vlastnost1: hodnota-css-vlastnosti1;
  css-vlastnost2: hodnota-css-vlastnosti2;
  }

Vlastnosti mohou být zapsány v libovolné pořadí. Selektorem může být tag, třída, identifikátor nebo * (viz další kapitolu). Přehled CSS vlastností a jejich hodnot je v samostatné kapitole. Za hodnotou vlastnosti se pak píše středník sloužící k oddělění jednotlivých vlastností. Na konci tedy být nemusí, ale jak již jsem zmiňoval, je lepší ho psát i na konec. Pokud pak chceme nějakou vlastnost přidat, mohli bychom na něj zapomenout a pak by to dělalo neplechu.

Záleží pak na Vás, jak CSS zápis formátujete. Zda píšete vlastnosti do řádku či pod sebe, zda používáte mezery či ne. Osobně v praxi používám různé způsoby, podle toho, jak se mi to zrovna hodí. V ukázkách na tomto webu zapisuji CSS vlastnosti nejčastěji pod sebe, od kraje jsou pak odraženy pomocí tabelátoru. Takový zápis je pak vhodnější pro studium, jelikož je přehlednější a rychleji se v něm dá orientovat. V praxi je však lepší kratší zápisy psát do jednoho řádku. CSS soubor pak nemá zbytečně mnoho řádků – lépe se tedy upravuje.

Pokud už přemýšlíte, jak zapisovat barvy (jen s anglickými názvy přeci nemůžeme vystačit), o pár řádků níže je návod, jak se barvy v CSS zapisují.

Zkusme si teď však ukázat následující kód:

p {color: blue;}
p {color: green;}

Budou odstavce modré nebo zelené? Pokud tento stylopis vyzkoušíme, uvidíme, že odstavce máme zelené. V CSS platí, že později napsané pravidlo má přednost. Dá se to však obejít pokud k prvnímu zápisu přidáme zápis !important (před středník).

p {color: blue !important;}
p {color: green;}

Tentokrát budou odstavce modré. Important přebije i přímý zápis pomocí atributu style u HTML tagu, který má jinak přednost před externím CSS zápisem.

Jeden zápis pro více selektorů

Pokud chceme přiřadit stejnou vlastnost více selektorům (tagům), můžeme to udělat dvěma způsoby, druhý způsob je však o mnoho úspornější.

První způsob

h1 {color: green;}
h3 {color: green;}
p {color: green;}

Druhý způsob

h1, h3, p {color: green;}

Důležité je oddělení jednotlivých selektorů (tagů) čárkou!

Média v CSS

Média (konkrétně atribut media) zajišťují, že různým výstupním zařízením (monitor, projektor, …) můžeme přiřadit různý styl.

Osobně používám následující zápis:

<link rel=“stylesheet“ type=“text/css“ href=“css/styl.css“ media=“screen, projection, tv“>
<link rel=“stylesheet“ type=“text/css“ href=“css/styl-tisk.css“ media=“print“>

K HTML tedy připojuji dva CSS soubory, jeden s názvem styl.css a druhý s názvem styl-tisk.css. První udává vzhled dokumentu při zobrazení na monitoru, projektoru a televizní obrazovce; druhý pak udává vzhled HTML dokumentu při tisku.

Obzvlášť tiskovému stylu bychom měli věnovat pozornost. Pokud si chce totiž někdo naši stránku vytisknout, tak tisk menu, okrasných grafických prvků a různých barev je zbytečný (důležitý je obsah); a také by tisk dokumentu, tak jak vypadá na obrazovce, zbytečně zvyšoval náklady na tisk.

Pokud tedy určujeme styl pro více výstupních zařízení, oddělujeme je čárkou. Pokud není atribut media uveden, styl se aplikuje na všechna výstupní zařízení.

Pro atribut media máme více hodnot, než jsem uvedl v příkladech, například hodnotu all (aplikuje se na všechna výstupní zařízení, stejně, jako když neuvedeme nic). Dále hodnoty aural, braille, handheld aj. Ale tyto hodnoty jsem nikdy nepoužil, takže toho o nich moc nevím.

Komentáře v CSS

Jsou analogií ke komentářům v HTML.

V CSS je jako komentář vše, co je uzavřeno mezi /* */.

Příklad:

p {
  color: blue; /* Na jare asi zmenim odstavce na zelene. */
  letter-spacing: 2px;
  }

No, nic duchaplnějšího mě nenapadlo, ale princip je snad jasný. Komentář pak můžeme umístit téměř kamkoli. U komentářů v CSS bychom se měli raději vyhnout diakritice, může to pozlobit.

Jednotky v CSS

Jak je z příkladů patrné, jednotky se píší hned za číselnou hodnotu, tedy bez mezery.

Jiří Šarišský
Latest posts by Jiří Šarišský (see all)

Související příspěvky:

Třídy a identifikátory Div a span Připojení CSS k HTML Co je CSS