diff --git a/cs-cz/css.html.markdown b/cs-cz/css.html.markdown new file mode 100644 index 00000000..a86302f7 --- /dev/null +++ b/cs-cz/css.html.markdown @@ -0,0 +1,252 @@ +--- +language: css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] + - ["Geoffrey Liu", "https://github.com/g-liu"] + - ["Connor Shea", "https://github.com/connorshea"] + - ["Deepanshu Utkarsh", "https://github.com/duci9y"] +translators: + - ["Michal Martinek", "https://github.com/MichalMartinek"] +filename: learncss.css +--- + +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](http://dabblet.com/). +Tento článek se zaměřuje hlavně na syntaxi a poskytue také pár obecných tipů. + +```css +/* 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: +
+*/ + +/* 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`. + +```xml + + + + + + + +
+
+``` + +## 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 + +```css +/* A */ +p.trida1[attr='hodnota'] + +/* B */ +p.trida1 { } + +/* C */ +p.trida2 { } + +/* D */ +p { } + +/* E */ +p { vlastnost: hodnota !important; } +``` + +a tento element +```xml +

+``` +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](http://caniuse.com). +* CSS hřiště [Dabblet](http://dabblet.com/). +* [Mozilla Developer Network - CSS dokumentace](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops](http://tympanus.net/codrops/css_reference/) + +## Další čtení + +* [Pochopení priority v CSS: specifičnost, děditelnost a kaskáda](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Vybírání elementů pomocí atributů](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - překrývání obsahu](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) a [LESS](http://lesscss.org/) pro CSS pre-processing +* [CSS-Triky](https://css-tricks.com)