summaryrefslogtreecommitdiffhomepage
path: root/cs-cz/css.html.markdown
diff options
context:
space:
mode:
authorSuzane Sant Ana <tetestonaldo@gmail.com>2017-12-31 14:27:06 -0200
committerGitHub <noreply@github.com>2017-12-31 14:27:06 -0200
commit42f9329bb3a028d374d6397991ac48b44064741e (patch)
tree1e75e2b3e122aeb863e3ffa037f6f64c4027fbf8 /cs-cz/css.html.markdown
parente6b77595f2669d66ac7be43c6e6083cbff80a9a7 (diff)
parent70a36c9bd970b928adde06afb2bd69f6ba8e5d5c (diff)
Merge pull request #1 from adambard/master
update
Diffstat (limited to 'cs-cz/css.html.markdown')
-rw-r--r--cs-cz/css.html.markdown253
1 files changed, 253 insertions, 0 deletions
diff --git a/cs-cz/css.html.markdown b/cs-cz/css.html.markdown
new file mode 100644
index 00000000..54a0a08e
--- /dev/null
+++ b/cs-cz/css.html.markdown
@@ -0,0 +1,253 @@
+---
+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"]
+lang: cs-cz
+filename: learncss-cz.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)