learnxinyminutes-docs/css.html.markdown at master

V ranných dobách webu se nevyskytovaly žádné vizuální elementy, pouze čistý text, ale s vývojem webových browserů se staly stránky plné grafických prvků běžné.

A právě proto vzniklo CSS, aby oddělilo obsah (HTML) od vzhledu webové stránky.

Pomocí CSS můžete označit různé elementy na HTML stránce a přiřadit jim různé vzhledové vlastnosti.

Tento návod byl napsán pro CSS 2, avšak CSS 3 se stalo velmi oblíbené a v dnešní době už běžné.

POZNÁMKA Protože CSS produkuje vizuální výsledky, je nutné k jeho naučení všechno zkoušet třeba na dabbletu. Tento článek se zaměřuje hlavně na syntaxi a poskytue také pár obecných tipů.

/* komentáře jsou ohraničeny lomítkem s hvězdičkou, přesně jako tyto dva
   řádky, v CSS není nic jako jednořádkový komentář, pouze tenhle zápis   */

/* ################
   ## SELEKTORY
   ################ */

/* Selektor se používá pro vybrání elementu na stránce:
selektor { vlastnost: hodnota; /* více vlastností...  }*/

/*
Toto je náš element:
<div trida='trida1 trida2' id='nejakeID' attr='hodnota' otherAttr='cs-cz co neco' />
*/

/* Můžeme vybrat tento element třeba podle jeho třídy */
.trida1 { }

/* nebo obou tříd! */
.trida1.trida2 { }

/* nebo jeho jména */
div { }

/* nebo jeho id */
#nejakeID { }

/* nebo podle toho, že má atribut! */
[attr] { font-size:smaller; }

/* nebo že argument nabývá specifické hodnoty*/
[attr='hodnota'] { font-size:smaller; }

/* začíná nějakou hodnotou (CSS 3) */
[attr^='ho'] { font-size:smaller; }

/* nebo končí něčím (CSS 3) */
[attr$='ta'] { font-size:smaller; }

/* nebo obsahuje nějakou hodnotu, která je v atributu oddělená mezerami */
[otherAttr~='co'] { }
[otherAttr~='neco'] { }

/* nebo obsahuje hodnotu oddělenou pomlčkou - "-" (U+002D) */
[otherAttr|='cs'] { font-size:smaller; }


/* Můžeme spojit různé selektory, abychom získali specifičtější selektor.
   Pozor, nedávejte mezi ně mezery! */
div.nejaka-trida[attr$='ta'] { }

/* Můžeme vybrat element, který je potomek jineho */
div.vnejsi-element > .jmeno-tridy { }

/* nebo zanořen ještě hlouběji. Potomci jsou přímo pod vnější třídou, pouze 1
   úroveň pod rodičem. Tento selektor bude fungovat na jakékoliv úrovni pod
   rodičem */
div.rodic .jmeno-tridy { }

/* Varování: stejný selektor bez mezery má úplně jiný význam
   Vzpomínáte si jaký? */
div.rodic.jmeno-tridy { }

/* Možná budete chtít vybrat element, který leží přímo vedle */
.jsem-primo-pred + .timto-elementem { }

/* nebo kdekoliv na stejné úrovni stromu */
.jsem-kdekoliv-pred ~ .timto-elementem { }

/* Existují selektory nazvané pseudo třídy, kterými můžeme vybrat elementy,
   když jsou v určitém stavu */

/* na příklad, když kurzor najede na element */
selektor:hover { }

/* nebo již navštívený odkaz */
selektor:visited { }

/* nebo nebyl navštíven */
selektor:link { }

/* nebo když je vybrán, např kliknutím do inputu*/
selektor:focus { }

/* element, ktery je prvni potomek rodiče */
selektor:first-child {}

/* element, který je poslední potomek rodiče */
selektor:last-child {}

/* Stejně jako pseudo třídy, umožňují pseudo elementy stylizovat určité
   části dokumentu */

/* odpovídá virtuálnímu prvnímu potomku */
selektor::before {}

/* odpovídá virtuálnímu poslednímu potomku */
selektor::after {}

/* Na vhodném místě, může být použitá hvězdička jako žolík, který vybere každý element */
* { } /* všechny elementy */
.rodic * { } /* všechny vnořené elementy */
.rodic > * { } /* všichni potomci */

/* ####################
   ## VLASTNOSTI
   #################### */

selektor {

    /* Jednotky délky můžou být relativní nebo absolutní */

    /* Relativní jednotky */
    width: 50%;       /* počet procent šířky rodičovského elementu */
    font-size: 2em;   /* násobek puvodní velikosti fontu elementu */
    font-size: 2rem;  /* nebo kořenového elementu */
    font-size: 2vw;   /* násobek 1% šířky zařízení (viewport) (CSS 3) */
    font-size: 2vh;   /* nebo jeho výšky */
    font-size: 2vmin; /* násobek 1% výšky nebo šířky, dle toho, co je menší */
    font-size: 2vmax; /* nebo větší */

    /* Absolutní jednotky */
    width: 200px;     /* pixely */
    font-size: 20pt;  /* body */
    width: 5cm;       /* centimetry */
    min-width: 50mm;  /* milimetry */
    max-width: 5in;   /* palce */

    /* Barvy */
    color: #F6E;                 /* krátký hexadecimální formát */
    color: #FF66EE;              /* dlouhý hexadecimální formát */
    color: tomato;               /* pojmenovaná barva */
    color: rgb(255, 255, 255);   /* hodnoty rgb */
    color: rgb(10%, 20%, 50%);   /* procenta rgb */
    color: rgba(255, 0, 0, 0.3); /* hodnoty rgba (CSS 3) Poznámka: 0 < a < 1 */
    color: transparent;          /* ekvivalentní jako nastavení alfy 0 */
    color: hsl(0, 100%, 50%);    /* procenta hsl (CSS 3) */
    color: hsla(0, 100%, 50%, 0.3); /* procenta hsl s alfou */

    /* Obrázky jako pozadí elementu */
    background-image: url(/cesta/k/obrazku.jpg); /* uvozovky jsou dobrovolné */

    /* Fonty */
    font-family: Arial;
    /* když název fontu obsahuje mezeru, tak musí být v uvozovkách */
    font-family: "Courier New";
    /* když se první nenaleze, použije se další atd. */
    font-family: "Courier New", Trebuchet, Arial, sans-serif;
}

Použití

Uložte CSS soubor s příponou .css.

<!-- Musíte vložit css soubor do hlavičky vaší stránky. Toto je
     doporučená metoda. Viz http://stackoverflow.com/questions/8284365 -->
<link rel='stylesheet' type='text/css' href='cesta/k/stylu.css' />

<!-- Také lze vložit CSS přímo do HTML. -->
<style>
   a { color: purple; }
</style>

<!-- Nebo přímo nastavit vlasnost elementu -->
<div style="border: 1px solid red;">
</div>

Priorita nebo kaskáda

Element může být vybrán více selektory a jeho vlastnosti můžou být nastaveny více než jednou. V těchto případech, má jedno zadání vlastnosti prioritu před druhým. Obecně platí, že více specifické selektory mají přednost před těmi méně specifickými.

Tento proces se nazývá kaskáda, proto i název kaskádové styly(Cascading Style Sheets).

Máme následující CSS

/* A */
p.trida1[attr='hodnota']

/* B */
p.trida1 { }

/* C */
p.trida2 { }

/* D */
p { }

/* E */
p { vlastnost: hodnota !important; }

a tento element

<p style='/*F*/ vlastnost:hodnota;' trida='trida1 trida2' attr='hodnota' />

Priorita stylu je následující. Pamatujte, priorita pro každou vlastnost, ne pro celý blok.

E má nejvyšší prioritu kvůli slůvku !important. Je doporučováno se úplně vyhnout jeho použití.
F je další, kvůli stylu zadanému přimo do elementu
A je další, protože je více specifické, než cokoliv dalšího. Má 3 selektory: jméno elementu p, jeho třídu trida1, atribut attr='hodnota'.
C je další, i když je stejně specifický jako B, protože je uveden až po něm.
B je další
D je poslední

Kompatibilita

Většina z možností v CSS 2 (a spousta v CSS 3) je dostupná napříč všemi browsery a zařízeními. Ale pořád je dobrá praxe, zkontrolovat dostupnost, před užitím nové vlastnosti/fičury.

Zdroje

Přehled dostupnosti CanIUse.
CSS hřiště Dabblet.
Mozilla Developer Network - CSS dokumentace
Codrops

Další čtení

Pochopení priority v CSS: specifičnost, děditelnost a kaskáda
Vybírání elementů pomocí atributů
QuirksMode CSS
Z-Index - překrývání obsahu
SASS a LESS pro CSS pre-processing
CSS-Triky

8.5 KiB Raw Permalink Blame History

Použití

Priorita nebo kaskáda

Kompatibilita

Zdroje

Další čtení

8.5 KiB

Raw Permalink Blame History