webová řešení

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

CSS na Wikipedii

Naše reference
idioma s.r.o. ProTravel CK s.r.o. PostovneZdarma - mobilní aplikace slevového serveru
zobrazit další

Jaká bude cena vašeho projektu?
NEZÁVAZNÁ POPTÁVKA

Napsali o nás
S výsledkem jsem velmi spokojena. Dobré nápady a pěkná grafika.
zobrazit další
Naši klienti
REALITY FLASH s.r.o.Ferratum Czech s.r.o.TS Plzeň a.s.Václav KoudelaVáclav KoudelaModul Servis s.r.o.Assessment Systems International s.r.o.idioma s.r.o.Fuji Koyo Czech, s.r.o.PRO TRAVEL CK s.r.o.
Blog o webdesignu
4. díl: Přehledný design aneb Jak rozjet nový internetový obchod

Poslední 4 týdny se vám pokoušíme sepsat ty nejdůležitější kroky, díky kterým dosáhnete se svým novým internetovým obchodem lepších výsledků. Dnes se opět podíváme na další, velmi důležitý prvek, kterým je vzhled a celkový design e-shopu. 3 vteřiny a pryč Jakmile se vám podaří přivést na stránku potenciálního zákazníka, je velmi důležité jej na stránce udržet a následně přimět k prodeji. A samotný design vašeho obchodu je v tomto směru velmi důleižtým aspektem. Dle studií stačí uživateli pouhé 3 vteřiny, aby se rozhodl, zda-li na www stránce ...

zobrazit blog - zobrazit novinky

POUŽÍVÁME COOKIES - OK