CSS
Cascading Style Sheets

Co je CSS?

Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je v informatice jazyk pro popis způsobu zobrazení elementů na stránkách napsaných v jazycích HTML, XHTML nebo XML.

Jazyk byl navržen standardizační organizací W3C, autorem prvotního návrhu byl Håkon Wium Lie. Byly vydány CSS1, CSS2 a CSS3. Dne 7. června 2011 byla dokončena revize CSS 2.1 Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah a strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí.

Syntax

Definice kaskádových stylů sestává z několika pravidel. Každé pravidlo obsahuje selektor a blok deklarací. Každý blok deklarací pak obsahuje deklarace oddělené středníky ; a každá deklarace sestává z identifikátoru vlastnosti, následuje dvojtečka : a hodnota vlastnosti.

Selektory

    body – Tyto deklarace budou platit pro všechny výskyty elementu body.
    body p – Tyto deklarace budou platit pro všechny elementy p, které se nachází v elementu body, v jakékoliv hloubce.
    body>div – Tyto deklarace budou platit pro všechny elementy div, které jsou potomky elementu body. To znamená, že pokud bychom měli element div, který se nachází v <body><blockquote><div>…, tyto deklarace by pro něj neplatily, protože tento div není přímým potomkem elementu body.
    .trida – Tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavenou třídu trida. To se provádí pomocí HTML atributu class.
    #id – Tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavený identifikátor id. To se provádí pomocí HTML atributu id.
    :link, :visited, :hover a :active – Tyto deklarace budou po řadě platit pro dosud nenavštívené odkazy, navštívené odkazy, část textu, na kterém stojí ukazatel myši, a aktivní odkaz.
    sel1, sel2, sel3 – Selektory můžeme seskupovat pomocí čárek. Následující deklarace pak budou platit pro všechny selektory.

Tabulka kompatibility výčtu selektorů

Edge Firefox Chrome Safari
border 4 1 1 1
display 8 3 4 3.1
flex 11 28 29 9
float 4 1 1 1
font-language-override - 34 - -