Cascading style sheets (CSS)
Kaskádové styly (angl. Cascading style sheets, zkr. CSS) je technologie, díky které dokáží weboví kodéři určit vzhled a vlastnosti jednotlivých HTML tagů a oddělit tak samotnou strukturu dokumentu a její vizuální část.
Původní záměr byl ponechat nastavení vizuálních vlastností jednotlivých HTML elementů v režii značkovacího jazyka HTML. I proto je v jeho úvodních specifikacích mnoho tagů, které toto nastavení umožňují. S ohledem na přehlednost a jednoduchost vývoje se ale od tohoto záměru postupem času upustilo a organizace W3C vytvořila specifikaci kaskádových stylů.
Selektory CSS
Připravili jsme pro vás také ukázku základních selektorů, tedy způsobu, jakým se jednotlivá pravidla aplikují na konkrétní HTML elementy.
div // nastavení vlastností všem elementům <div>
div h1 // všechny nadpisy <h1>, které jsou uvnitř elementu <div>
div > h1 // všechny nadpisy <h1>, které jsou přímými potomky elementu <div>
div + h1 // všechny nadpisy <h1>, které jsou přímými sourozenci elementu <div>
#element // element s konkrétním atributem id="element"
.elementy // prvky s konkrétními atributy class="elementy"
a:hover (1), a:visited (2) // pseudoselektory prvku <a>, které se aktivují v případě, že 1) nad tento element najede uživatel myší, 2) byl element již v minulosti prokliknut
:before, :after // vytvoření pseudoelementů, které jsou umístěny před/pod a za/nad element, na který jsou tyto pseudoselektory aplikoványSyntaxe CSS
Základní syntaxe kaskádových stylů není nikterak složitá jak můžete vidět v naší ukázce:
body {
background-color: #fff; // nastavení barvy pozadí na bílou barvu
color: #000; // nastavení barvy písma na černou barvu
font-family: arial; // nastavení fontu písma na ARIAL
}
// při hover efektu odkazu, který je umístěn uvnitř <body> a bezprostředně následuje za odstavcem <p> se barva textu změní na červenou a podtrhne
body > p + a:hover {
color: #f00;
text-decoration: underline;
}
