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ány

Syntaxe 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;
}

Máte zájem o kvalitní webové řešení?

Nebojte se nás na cokoliv zeptat, rádi Vám vše vysvětlíme a společně najdeme nejvhodnější řešení. Mám zájem!

Napište nám, ozveme se!

Napište nám hrubou představu o Vašem projektu. Zavoláme Vám zpět a detailně probereme parametry a možnosti realizace.
Chci nezávaznou nabídku!
Soubory cookies využíváme pro základní i pokročilé funkce, které Vám usnadňují procházení webu. Také nám pomáhají při optimalizaci stránek i reklamních kampaní, aby byly pro všechny uživatele co nejvíce přínosné. Kliknutím na tlačítko "Souhlasím" povolíte všechny cookies nebo můžete povolit jen technické či nastavit vlastní preference. Všechna preferenční nastavení můžete kdykoliv v budoucnu změnit pomocí tlačítka v levém dolním rohu stránky.

Využití funkčních cookies je nezbytné pro správné fungování www stránky a všech funkcí. Slouží pouze k technickým účelům stránky a k jejich obsahu nemá přístup žádná třetí strana. Funkční cookies umožňují např. vyhledávání, filtrování, nákupy, přihlašování nebo ukládání preferenčního nastavení cookies. Z uvedených důvodů není možné tyto cookies deaktivovat a musí být vždy povoleny.

Analytické cookies poskytují informace využívané k analytickým a statistickým účelům provozovatele webu a případně nástrojů třetích stran, které k těmto účelům využívá. Jedná se například o měření návštěvnosti, výkonu a použitelnosti www stránky, reklamních kampaní apod. Díky získaným datům z těchto cookies dokážeme optimalizovat výkon i funkčnost www stránky. Informace získané pomocí těchto cookies jsou zpracovávány souhrnně a zcela anonymně, bez možnosti identifikace konkrétního uživatele.

Marketingové cookies jsou zpravidla využívány našimi partnery k nastavení a optimalizaci relevantního obsahu v jejich partnerské reklamní síti. Veškerá dostupná data jsou tzv. pseudoanonymizována a díky tomu zpravidla není možná identifikace konkrétního uživatele. Poskytnutím souhlasu s využitím těchto marketignových cookies uvidíte v reklamních kampaních obsah a informace relevantní pro vašim zájmům.

Cookies