Jazyk kaskádových stylů (CSS)

CSS popisuje formátování a obecně vzhled webové stránky. Sestává z pravidel zapsaných jako selektor {vlastnost: hodnota; další vlastnost: další hodnota;}. Selektor určuje, na jaké prvky stránky se má tělo pravidla použít. Na velikosti písmen a řádkování nezáleží, ale mezery mají velký význam v selektorech.

Selektory

Pro jednoduchost jsou všechny selektory uvedené na příkladech (a většina z toho je příklad obrázkem, Komenský by měl radost):

Třídy

Třídy umožňují formátovat různým způsobem tagy, přestože jsou stejného typu. Často se nadužívají tak, že většina stránky jsou tagy <div> s různě nastavenými třídami. Název třídy může být libovolné slovo. Můžeme ho taky měnit z Javascriptu jako vlastnost prvek.class.

Jako bonus na zmatení: prvek může být členem více tříd, když je v HTML oddělíme mezerou: <div class="doleva nahoru">. Všimněte si, že tady má mezera zásadně jiný význam než v CSS.

Pseudo-třídy

Pseudo-třídy mají na začátku dvojtečku místo obyčejné tečky. Nenastavujeme je sami, vznikají ve stránce samy od sebe. Pár užitečných příkladů:

Fiktivní prvky

V omezené míře se do stránky dá i přidávat obsah, anebo vybírat části existujícího obsahu. Nefunguje to úplně vždycky a většina z těchhle selektorů je dobrá tak akorát na hraní:

Sousední prvky

Před znak + (plus) můžeme napsat selektor prvku, který musí tomu vybranému těsně předcházet. Podobný selektor je ~ (tilda, vlnovka), která platí obecněji – selektor před vlnovkou musí být napsaný někde dříve ve stránce.

Na prvky později ve stránce takový selektor napsat nejde, protože by tím šlo dělat dost hrozné věci. Tohle pořadí naopak zajišťuje, že prohlížeči stačí stránku jednou přečíst, vykreslit a bude hotovo.

Identifikátor

Mřížkou # můžeme vybrat prvek s konkrétním id.

Význam a použití jsou vlastně stejné jako u tříd. Rozdíl je v tom, prvek s každým id by měl být ve stránce jenom jeden, zatímco třída se může libovolně opakovat. A navíc: každý prvek může mít jen jediné id, zatímco tříd může mít nastavených několik. Selektor podle id se tedy hodí použít na jednoznačné označení prvku, co je ve stránce jediný, například menu a patička textu.

Selektory na vlastnost

Do hranatých závorek můžeme napsat selektor na vlastnost. Variant je překvapivě hodně, tak si dejme pár příkladů:

Text nemusíme dávat do uvozovek – je to potřeba jen v případě, že obsahuje třeba mezeru.

Všimněte si, že tímhle způsobem jde zapsat selektory podle identifikátoru jako [id="nazev"]. Se selektory na třídu je to horší, protože [class="trida"] vybere jen prvky, co mají nastavenou jedinou třídu. Můžeme ale použít selektor na slovo (zatím nezmíněný), a potom [class~="trida"] dělá přesně to, co .trida. Jen se hůř čte.

Vlastnosti

Do složených závorek píšeme, co se má stát, ve tvaru vlastnost: hodnota;