Maturitní otázka č. 13
13. CSS jako nadstavba HTML
1. Co je CSS, výhody a nevýhody
CSS (Cascading Style Sheets - Kaskádové styly) je jazyk sloužící k popisu způsobu zobrazení dokumentů napsaných v HTML nebo XML. Zatímco HTML říká, "CO" na stránce je (kostra), CSS říká "JAK" to má vypadat (barva, velikost, pozice).
- Výhody: Zásadní je oddělení obsahu od formy. Z jednoho místa (jednoho CSS souboru) lze změnit vzhled tisíců podstránek najednou. Výrazně se zmenšuje datová velikost HTML kódu. Umožňuje responzivní design (stránka se přizpůsobí velikosti mobilu či PC).
- Nevýhody: V minulosti byly velké problémy s nekonzistentní podporou v různých prohlížečích (kód fungoval v Chrome, ale v Internet Exploreru byl rozbitý). U obrovských projektů může být CSS bez použití preprocesorů (SASS, LESS) nepřehledné.
2. Způsoby zápisu CSS do HTML stránek
Existují tři způsoby aplikace stylů, přičemž slovo "Kaskádové" v názvu znamená, že mají různou prioritu (bližší k prvku přebíjí vzdálenější):
- Externí (External): Styl je v samostatném souboru (např. styl.css). Do HTML se připojí hlavičkou: <link rel="stylesheet" href="styl.css">. Nejlepší způsob, nejpoužívanější. Nejnižší priorita.
- Interní (Internal): Zapsán přímo v HTML souboru v hlavičce <head> uvnitř tagů <style> ... </style>. Používá se jen u jednostránkových mikro-webů.
- Zabudovaný (Inline): Zapsán přímo jako atribut daného HTML tagu. Příklad: <h1 style="color:red;">. Má nejvyšší prioritu (přebije externí soubor), ale je považován za špatnou praxi, protože porušuje pravidlo oddělení vzhledu od obsahu.
3. Praktická úloha: Tvorba externího stylopisu (styl.css)
Podle zadání se má upravit vzhled celého dokumentu index.html zapsáním následujících pravidel do souboru styl.css:
/* a. Všechen základní text bude červený, psaný fontem Arial */
body {
color: red;
font-family: Arial, sans-serif;
}
/* c. Celá stránka bude mít žluté pozadí */
/* Lze sjednotit s tagem body, ale pro ukázku zvlášť: */
body {
background-color: yellow;
}
/* b. Všechny nadpisy všech úrovní budou zelené, font Tahoma */
h1, h2, h3, h4, h5, h6 {
color: green;
font-family: Tahoma, sans-serif;
}
/* d. Všechny obrázky modře orámované plnou 2 px tlustou čarou */
img {
border: 2px solid blue;
}
/* e. Všechny odkazy budou psány bíle */
a {
color: white;
}Tento soubor by se do index.html připojil vložením `<link rel="stylesheet" href="styl.css">` do sekce `<head>`. Díky kaskádě (dědičnosti) se červená barva písma aplikuje na celý dokument s výjimkou nadpisů a odkazů, kterým jsme explicitně nastavili barvu vlastní.