CSS Tutoriál II. – Zápis CSS

V druhém dílu tutoriálu se podíváme na to, jak vlastně takový CSS stylesheet vypadá a jak CSS zapisujeme.

Při zápisu CSS stylu uplatníme hlavně složené závorky {}. CSS dokument – stylesheet nezačíná obvykle žádnou deklarací, jak jsme byli zvyklí z HTML, může však začínat komentářem – popisem stylesheetu. Komentáře v CSS se zapisují podobně jako víceřádkové komentáře v Javascriptu – pomocí /* a */.

/* CSS komentář */

Když však v úvodu žádný komentář není, začínají rovnou vlastnosti. Kvůli přehlednosti se nezapisují závorky v jedné řadě, ale první závorka těsně za jméno elementu, každá vlastnost na vlastní řádek a na novém řádku ukončující závorka. Vlastnosti se zapisují tak, že nejdříve napíšeme element na stránce, ke kterému vztahujeme vlastnost (nebo jakýkoli jiný selektor),  poté složenou závorku a v ní : vlastnost: hodnota vlastnosti;  Jednotlivé vlastnosti oddělujeme středníkem, dáváme ho i na úplný konec výpisu vlastností. Příklad:

div {
padding: 5 px; 
margin: auto;
}

Pokud chceme stejné vlastnosti přiřadit více elementům, zapíšeme je s čárkou. Pokud například chceme, aby nejenom tato sekce ale i další odstavec mimo:

div,p {
padding: 5 px; 
margin: auto;
}

Pokud přiřazujeme vlastnosti třídě a nebo identifikátoru, musíme před jméno třídy napsat . a nebo před jméno identifikátoru #

.odstavec_vpravo {
float: right;
} 

#jedinecny_odkaz {
font-size:16px; 
text-decoration: none
}

Pokud chceme určit přesně který prvek upravujeme, napíšeme ho vnořeně. Například pokud chceme upravit obrázky  v odstavcích vpravo:

.odstavce_vpravo img {
float:left;
width:100px;
height 100px;
}

První element označuje ten větší, obecnější. Druhý element je vnořený. Například pokud bychom chtěli nastavit vlastnost pro všechny odkazy v buňce tabulky:

td a {text-decoration:none;}

Další možností zápisu jsou pseudo-elementy. Existuje jich asi 10, v praxi se však nejvíce setkáme s :link, :visited, :active nebo :hover. Tyto pseudo-elementy se týkají odkazů. Konkrétně popisují jejich vzhled při různém stavu. a:link popisuje odkaz, než na něj klikneme. a:visited – navštívený odkaz, a:active – aktivní odkaz, a:hover – odkaz, při přejetí myší. Například :hover můžeme využít i k jiným elementům, většinou se ale používá pro efekty při přejetí myší spíše Javascriptový onMouseOver. Zápis pseudo-elementů vypadá takto:

a:hover {
text-decoration: underline; 
color: blue;
}

Základy správného zápisu máme tedy za sebou a v příštím díle si řekneme něco více o pravidlech kaskádování v CSS.