Syntaxe příkazu CSS

V předchozí kapitole jsme použili klasický příklad „Ahoj světe!“ ("Hallo Word!"), abychom si udělali představu o tom, jak snadné je stylizovat HTML element pomocí CSS. Jak zapsat příkaz CSS? V této kapitole se zaměříme na skladbu a syntaxi CSS, abychom hlouběji pochopili, jak funguje. Podívejme se znovu na dříve zmíněný příklad, kde jsme měli CSS příkaz cílený na tagy (elementy jazyka HTML) H1:

h1 {
	color: DeepSkyBlue;
}

Máme zde selektor(anglicky selector) s jednou vlastností (anglicky property) a jednou hodnotou (anglicky value) – to jsou základní prvky CSS a měli byste se pokusit zapamatovat si jejich názvy, jak budete postupovat tímto tutoriálem. V tomto příkladu je h1 název selektoru, color je vlastnost a DeepSkyBlue je hodnota.

Mezi těmito třemi prvky je řada speciálních znaků: { } - složené závorky kolem vlastnosti a hodnoty, znak dvojtečka oddělující vlastnost od hodnoty a středník za hodnotou. Každý z nich usnadňuje prohlížeči analýzu a pochopení vašeho CSS kódu: Složené závorky umožňují seskupit několik vlastností do stejného příkazu (selektoru), dvojtečka říká překladači v prohlížeči, kde končí vlastnost a začíná hodnota, a středník, kde končí hodnota.

To se může zdát trochu příliš složité pro jednoduchý selektor, jako je ten výše, ale když použijeme složitější názvy selektorů s více vlastnostmi a komplexnějšími hodnotami, dává to dokonalý smysl. Dovolte mi to ilustrovat na složitějším příkladu:

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

Nyní máme několik selektorů, první směřuje na několik prvků HTML, stejně jako na několik vlastností a několik hodnot – teď asi chápete, proč potřebujeme syntaktická pravidla CSS, aby bylo možné správně roztřídit vaše instrukce.

Formátování a znaky mezery v CSS

Možná se divíte, proč formátuji selektor tak, jak to vidíte: Počáteční složená závorka je na stejném řádku jako název selektoru, ale koncová je na samostatném řádku, vlastnosti jsou odsazené a za dvojtečkou je mezera oddělující vlastnost a hodnotu, ale ne před ní. Proč? Protože se mi to tak líbí, ale pravdou je, že překladač CSS mezery ignoruje.

Někteří lidé dávají přednost tomu, aby počáteční složená závorka byla na samostatném řádku a aby před dvojtečkou byla mezera:

h1
{
	color : DeepSkyBlue;
}

Funguje to stejně dobře. Bylo napsáno mnoho softwaru pro "zhutnění" / minimalizaci CSS, aby text zabíral co nejméně místa, například takto:

h1{color : DeepSkyBlue;}

Bude to také dobře fungovat, ale u složitějších příkazů to ztíží čtení a úpravu. Překladač to však pochopí stejně dobře jako v našem prvním příkladu, díky speciálním znakům použitým jako oddělovače.

Souhrn

V této kapitole jsme se dozvěděli, že základními prvky CSS jsou selektory, vlastnosti a hodnoty. Dokument CSS může obsahovat více selektorů a selektor může mít více vlastností, které mohou mít hodnotu sestávající z jednoho nebo několika prvků. Také jsme se dozvěděli, že složené závorky, dvojtečky a středníky oddělují každou ze tří složek od sebe navzájem a že mezery a formátování jsou skutečně na vás - překladači to obvykle nevadí.

Probrali jsme si některé základní selektory s několika základními vlastnostmi, ale selektory jsou mnohem širší téma a existuje spousta dalších vlastností, se kterými lze pracovat. Budeme se tomu věnovat mnohem podrobněji v následujích kapitolách tohoto tutoriálu.