1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
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)
|
