Úvod do CSS3

CSS (odvodené zo Cascading Style Sheets) je štýlovací jazyk pre HTML dokument. CSS opisuje ako budú elementy vykreslené na počítači alebo inom zariadení.

Vďaka CSS si vieme definovať dizajn pre jednotlivé layouty, ich rozloženie, farby a ostatné grafické prvky.

Syntax CSS

CSS predstavuje pravidlo pre HTML element. HTML elementom je napríklad <h1></h1> tag. Aby sme mohli pre tag definovať pravidlá, je potrebné ich deklarovať {}.

V bloku v zátvorkách už priradíme konkrétne hodnoty.

h1 {
  color: red;
  }

kde:

1. color predstavuje názov vlastnosti (v tomto prípade sa jedná o farbu)

2. red predstavuje hodnotu priradenú k vlastnosti (v tomto prípade farba bude červená)

Upozornenie: CSS deklarácia jednotlivých vlastností vždy musí končiť ;

CSS selektory

Existuje viacero druhov CSS selektorov.

Element selektor

Typyckým príkladom selectoru je konkrétny html element, napríklad tag p. Ak mu priradíme v CSS súbore vlastnosť

p { background: blue; }

znamená to, že sme vybrali všetky p elementy na webstránke a priradili sme im modrú farbu.

ID selektor

ID selektor nám umožňuje prideliť vlastnosti k elementu, ktorému sme v HTML priradili konkrétne id. Označuje sa # a následná názov selektoru definovaného v HTML.

#news {font-size: 12px;}

Class selektor

Class selektor nám umožňuje prideliť vlastnosti k elementu, ktorému sme v HTML priradili konkrétnu triedu. Označuje sa . a následná názov selektoru definovaného v HTML.

.item {font-size: 12px;}

Poznámka: Selektor existuje oveľa viac. Postupne sa s nimi oboznámime v priebehu tutoriálu a v úlohách.

Úloha

  1. Otvor si v editore súbor test.html, ktorý sme vytvorili na začiatku
  2. Priraď div elementu selektor id s názvom test
  3. Priraď ul elementu triedu class s názvom zoznam
  4. Na začiatok súboru napíš <style></style>
  5. Do bloku medzi <style></style> napíš kód, kde pre všetky li elementy zmeníš farbu písma na modrú
  6. Pridaj do bloku kód, ktorý zmení farbu všetkým a elementom, kde rodičom je li element
  7. Zmeň farbu a elementu pri hover efekte na červenú
  8. Ulož súbor test.html
  9. Pozri si výsledok v prehliadači
  10. Vymaž všetok kód nachádzajúci sa v bloku <style></style>
  11. Nastav farbu iba prvého li elementu na modrú
  12. Nastav farbu iba posledného li elementu na modrú
  13. Nastav farbu každého druhého li elementu na modrú