Shrnutí

V této lekci jsme se naučili, že:

• Pravidlo se skládá ze selektoru a z deklarací ve složených závorkách. Deklarace se skládá z vlastnosti a hodnoty: h1 { color: sienna; }.
• Komentáře se píší mezi /* a */ a prohlížeč je přeskočí.
• Selektory vybírají prvky, které pravidlo styluje:
  • univerzální selektor * vybere všechny prvky,
  • typový selektor vybere všechny prvky jednoho typu, například h2,
  • selektor třídy vybere prvky s určitou třídou, například .skupina pro class="skupina". Stejnou třídu může mít mnoho prvků a jeden prvek může mít více tříd,
  • selektor ID vybere jeden prvek s určitým id, například #plemena,
  • selektor atributu vybere prvky podle jejich atributů, například [target] nebo [target="_blank"],
  • pseudotřída vybere prvky v určitém stavu, například :hover pod ukazatelem myši.
• Selektory můžeme kombinovat:
  • čárka je seskupuje: h1, h2 vybere oba,
  • řetězení bez mezery vybere prvky, které odpovídají všem částem: a[target="_blank"], .skupina:hover,
  • mezera vybírá potomky v jakékoli hloubce: footer p,
  • > vybírá jen děti: main > div.
• Když stejnou vlastnost prvku nastavuje více pravidel, o vítězi rozhodne kaskáda. Vyhraje specifičtější selektor: id nad třídou, selektorem atributu a pseudotřídou a ty nad typem, * se nepočítá. Části selektoru se sčítají. Mezi stejně specifickými selektory vyhraje ten napsaný později. Styly v atributu style vyhrají nad všemi selektory.
• Některé vlastnosti, hlavně vlastnosti textu jako color, font-family a text-align, dědí potomci prvku, pokud nemají vlastní pravidlo. Jiné, například border a background-color, se nedědí.

V příští lekci, Barvy, se podíváme na všechny způsoby, jak v CSS zapsat barvu.