Czech translation for CSS (#1771)

1 files changed, 252 insertions, 0 deletions

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:
+<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`.
+
+```xml
+<!-- 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
+
+```css
+/* A */
+p.trida1[attr='hodnota']
+
+/* B */
+p.trida1 { }
+
+/* C */
+p.trida2 { }
+
+/* D */
+p { }
+
+/* E */
+p { vlastnost: hodnota !important; }
+```
+
+a tento element
+```xml
+<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](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)