-
Podívejme se na naší webovou stránku.
-
Máme tu tyto hlavní nadpisy,
-
odstavec popisující králíky
-
a dále tu je několik odstavců,
-
s textem mé oblíbené písničky o králících.
-
Posledně jsme stylovali první
odstavec pomocí identifikátoru.
-
Ale teď máme odstavců víc
-
a chci je mít všechny se žlutým pozadím.
-
Jak bychom to mohli udělat
pomocí toho, co už známe?
-
Nejprve jsme se naučili,
-
jak vybrat všechny tagy určitého typu,
-
například pomocí selektoru 'p'.
-
Ale tím bychom obarvili všechny
odstavce, ne jen ty s písničkou.
-
Potřebujeme něco konkrétnějšího.
-
Potom jsme se naučili jak vybírat
tagy pomocí jejich vlastního ID,
-
jako když jsme vybrali odstavec
s identifikátorem "rabbit-song".
-
Ale tím jsme zase vybrali
jenom první odstavec.
-
A to IDčko už nemůžeme
přidat k ostatním odstavcům,
-
protože nemůžeme použít
jedno stejné ID u různých tagů.
-
Kdybychom chtěli vybrat
i ty ostatní odstavce,
-
museli bychom každému
z nich dát nové IDčko,
-
(například "song-lyrics2"
a "song-lyrics3"),
-
protože každé ID
musí být jedinečné.
-
A pak bychom pro každý z nich
museli přidat pravidla.
-
To by šlo, ale fíha,
to je strašně moc práce.
-
A u každé nové sloky písničky,
-
bychom nesměli zapomenout
na přidání dalšího IDčka do HTML
-
a dalšího ID do CSS pravidel,
-
a kdybychom chtěli přidat sto
slok, tak pojdeme únavou.
-
Ale, hádejte co?
-
Existuje lepší způsob. Říkáme mu "třídy".
-
Třída je v podstatě způsob,
-
kterým můžeme přidat
libovolný element do nějaké skupiny.
-
A do této skupiny můžeme přidat
libovolný počet elementů.
-
Třídu přidáme podobně jako ID,
potřebujeme atribut "class".
-
Takže nejprve ještě smažu to IDčko,
protože ho nahradíme.
-
Teď mám kurzor na začátku tagu .
-
Přidáme mezeru a napíšeme:
class rovná se uvozovky
-
Teď musíme vymyslet,
jak se třída bude jmenovat.
-
Hezké popisné jméno.
-
Nazveme ji "song-lyrics",
-
tedy česky "text-písně".
-
Jaké další elementy by
měly mít tuto třídu?
-
No, přece všechny ostatní
odstavce s textem písničky.
-
Takže musíme jít dolů
-
a přidat stejný atribut
ke všem odstavcům.
-
Tak, super.
Teď už můžeme přidat CSS pravidlo.
-
Půjdeme zpátky nahoru do tagu
-
a smažeme náš ID selektor z minula,
protože ho už nebudeme potřebovat.
-
A teď musíme vytvořit
selektor pro naši třídu.
-
Selektor třídy vždycky začíná tečkou.
-
Hned za ní napíšeme jméno třídy:
song-lyrics
-
a potom jako vždy, složené závorky,
vlastnost, dvojtečka, hodnota.
-
Ta-dá!
-
Celý text písničky má žluté pozadí.
-
A co by se stalo, kdybychom
tady to "s" napsali velké?
-
Nefunguje to.
-
To proto, že u názvů tříd
záleží na velikosti písmen.
-
Anglicky této vlastnosti
říkáme case-sensitive,
-
neboli citlivé na velikost.
-
A co by se stalo, kdybychom
místo tečky napsali křížek?
-
Zase to nefunguje.
-
Protože takhle si prohlížeč myslí,
že "song-lyrics" je ID,
-
a protože v atributu ID nic nenajde,
-
tak to vzdá.
-
A co se stane, když do našeho
jména přidáme mezery?
-
Hm, to taky nefunguje,
-
protože v názvech tříd mezery být nesmí.
-
A později uvidíme,
-
že mezera má ve světě CSS
svůj vlastní význam.
-
Tak to zase vrátíme zpátky.
-
Takže ještě jednou:
-
Když chceme přidat třídu,
-
vymyslíme jméno třídy,
-
přidáme ho do atributu
class v HTML.
-
Potom napíšeme pravidlo stylu,
-
které začíná s tečkou
a pokračuje jménem třídy.
-
A teď je vaše CSS opravdu třída!
