10-css-tridy.md

Třídy

---

Problém: jak odlišit elementy

<p>A víte, že…?</p>

<p>Ještě jeden odstavec</p>

p { color: blue; }

• Co kdybych chtěl vypsat odstavce modře?
• Ale co kdybych chtěl udělat jen první odstavec modrý?

---

Řešení: jak odlišit elementy

<p class="uvodnik">A víte, že…?</p>

<p>Ještě jeden odstavec</p>

.uvodnik { color: blue; }

• řešením je přidat třídu, která umožňuje se zaměřit v CSS přesněji
• třída se v HTML přidává jako atribut class
• v CSS se zapíše s tečkou na začátku
• třídu můžeme přiřadit libovolnému počtu značek

---

Třída platí pro více elementů

<h1 class="uvodnik">Tip</h1>

<p class="uvodnik">A víte, že…?</p>

<p>Ještě jeden odstavec</p>

.uvodnik { color: blue; }

• třída se tedy použije pokud má nějaký prvek speciální vlastnosti
• nebo se skupina vlastností opakuje a chceme si tak ušetřit zápis
• třída není ničím jiným než dalším atributem
• zatímco alt, src, href lze přidat jen některým značkám, atribut class lze přidat kterékoliv značce

---

Vícenásobné třídy

.tip { color: blue; }
.cool { background-color: red; }

<p class="tip">…</p>
<p class="cool">…</p>
<p class="cool tip">…</p>

• jeden atribut class může mít přiřazeno více hodnot ‒ tříd
• oddělujeme je mezerou

---

Využijeme třídy k odlišení sekcí