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

Potřebujete vytvořit web, e-shop, aplikaci?
NEZÁVAZNÁ POPTÁVKA

Naše reference
Salon Olivia - kadeřnický salon Saller-sport - e-shop se sportovním vybavením Žehlíme rádi - žehlení na zakázku
zobrazit další
Napsali o nás
Společnost BECORP GROUP s.r.o. se v druhé polovině roku 2013 stala vítězem tendrového zadání na redesign našich firemních www stránek, které se zúčastnilo 5 firem. Provedení objednávky proběhlo flexibilně za vstřícné spolupráce zaměstnanců obou firem. Termíny byly ...
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

COOKIES - OK