Písma a třídy · Programuj s Martinem

Vybereš webu pořádné písmo a naučíš se třídy – nejužitečnější trik celého CSS.

Ukaž mi to: hezčí písmo

Základní písmo prohlížeče je nudné. Vyměníme ho jedním pravidlem pro celou stránku:

body {
  font-family: Verdana, Arial, sans-serif;
}

font-family je seznam přání: „Použij Verdanu. Nemáš ji? Tak Arial. Ani ten ne? Tak jakékoli bezpatkové písmo (sans-serif).”

Písma, která má skoro každý počítač: Verdana, Georgia (patkové, hodí se na delší texty), Trebuchet MS, Courier New (psací stroj). Vyzkoušej si je – změna písma udělá s webem divy.

Ukaž mi to: třídy

Zatím umíš nastylovat všechny odstavce najednou. Ale co když má být jeden odstavec jiný – třeba důležité upozornění? Na to jsou třídy (class):

V HTML dáš značce jméno třídy:

<p class="upozorneni">Zítra se nejde do školy!</p>

A v CSS na něj zamíříš tečkou:

.upozorneni {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

background-color – barva pozadí toho jednoho prvku
border – rámeček: tloušťka, styl, barva
padding – mezera mezi textem a okrajem rámečku (aby text nebyl nalepený)
border-radius – kulaté rohy

Třídu můžeš dát kolika prvkům chceš – všechny se obléknou stejně. Je to jako školní uniforma pro značky.

Teď ty 💪

Nastav celému webu písmo přes font-family na body.
Vymysli si aspoň jednu třídu, která se hodí k tvému projektu, a použij ji na dvou místech.

🏫 Stránky školy – řešení (třída „aktualita")

<p class="aktualita">📢 V pátek je ředitelské volno!</p>
<p class="aktualita">📢 Sběr papíru začíná v pondělí.</p>

body {
  font-family: Verdana, Arial, sans-serif;
}

.aktualita {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

🙋 Osobní stránky – řešení (třída „oblibene")

<p class="oblibene">⭐ Nejoblíbenější hra: Minecraft</p>
<p class="oblibene">⭐ Nejoblíbenější jídlo: palačinky</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.oblibene {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

🌍 Cestovatelský deník – řešení (třída „tip")

<p class="tip">🎒 Tip na výlet: na Poledník vyraž brzy ráno, dokud není horko.</p>
<p class="tip">🎒 Tip: v Chorvatsku si vezmi boty do vody!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

⚽ Web klubu – řešení (třída „vyhra")

<li class="vyhra">Sokol Nebovidy – Lipová 3 : 1</li>
<li>Rohatec – Sokol Nebovidy 2 : 2</li>
<li class="vyhra">Sokol Nebovidy – Kyjov 4 : 0</li>

body {
  font-family: Verdana, Arial, sans-serif;
}

.vyhra {
  background-color: #dcfce7;
  font-weight: bold;
}

Vyhrané zápasy se hned zeleně zvýrazní – jako v opravdové tabulce!

✅

Kontrola: Web má nové písmo a máš v něm aspoň jeden prvek s vlastní třídou, který vypadá jinak než ostatní.

Co si z téhle lekce odnést

font-family na body změní písmo celého webu.
Třída = jmenovka: v HTML class="jmeno", v CSS .jmeno { ... }.
padding, border a border-radius udělají z obyčejného odstavce hezkou barevnou cedulku.