Kaskádové styly
4IZ268 – Webové technologie
Poslední modifikace: 2020-10-07 13:04:11 UTC
Úvod
Důvody vzniku CSS
-
zákazníci chtějí, aby webové stránky vypadly stejně jako tištěný katalog
-
přesné druhy písma
-
přesné barvy
-
přesné zarovnání a formátování jednotlivých částí stránky
-
-
weboví designeři zákazníkům vyhoví
-
stránky plné tagů
<font color="..." face="..." size="..."> -
složité, mnohdy vzájemně vnořené tabulky pro dosažení požadovaného efektu
-
mnoho částí stránky tvoří obrázky – umožňují věrně reprodukovat fonty a formátování
-
v horším případě je celá stránka jeden obrázek, případně jeden rozřezaný obrázek
-
Problémy s rádoby graficky dokonalými stránkami
-
zbytečně dlouhý HTML kód, mnoho obrázku → dlouho se přenáší
-
schopnosti prohlížečů se využívají až nadoraz – v jednom prohlížeči stránky vypadají dobře a v tom druhém dost špatně
-
při použití jiného rozlišení, než ve kterém jsou stránky navrženy, to také nedopadne moc dobře
-
změny v designu stránek jsou velice obtížné, protože je potřeba nahradit mnoho výskytů tagů a atributů ovlivňujících formátování
Připojení stylu ke stránce
Připojení stylu z externího souboru
Tento případ je nejvyužívanější, protože umožňuje využití
jednoho stylu několika stránkami. Styl se k dokumentu připojuje
pomocí elementu link, který můžeme
použít v záhlaví stránky.
<!DOCTYPE HTML>
<html>
<head>
<title>Pokusná stránka se stylem</title>
<link href="styl.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>Selektory
Vlastnosti
Dědění vlastností
Snadnost a intuitivnost použití kaskádových stylů je do velké míry dána děděním vlastností. Pokud nějakou vlastnost u elementu nastavíme a tento element obsahuje další elementy, automaticky tyto elementy dědí vlastnosti rodičovského elementu. Tímto způsobem je ve většině případů dosaženo nejlepšího výsledku bez nutnosti tvorby složitých selektorů.
h1 { color: blue }
<h1>Tohle je modré <em>a tohle kupodivu taky</em> -
barva se dědí</h1>U některých vlastností není dědění vhodné a proto se tyto vlastnosti nedědí.
Kaskáda – skládání vlastností
-
pro některé vlastnosti může být ve stylu/stylech určeno několik konfliktních hodnot
-
kaskáda určuje, která deklarace má nejvyšší váhu
-
primárně se priorita určuje podle:
-
uživatelova stylu s příznakem important
-
autorova stylu s příznakem important
-
autorova normálního stylu
-
uživatelova normálního stylu
-
výchozího stylu prohlížeče
-
-
pokud to nestačí, nejvyšší prioritu mají
-
inline deklarace stylu (atribut
style) -
pak deklarace se selektorem ID
-
pak deklarace s atributovým selektorem a pseudotřídami
-
a nakonec deklarace se selektorem typu nebo pseudoelementy
-
-
pokud to pořád nestačí, použije se pozdější deklarace
Základní vlastnosti
Písmo
-
rodina písma
-
styl písma – normální, kurzíva, skloněné
-
varianta písma – normální a kapitálky
-
duktus písma (síla tahu)
-
velikost
blockquote { font-weigth: bold;
font-style: italic;
font-size: 12pt;
line-height: 14pt;
font-family: "Times Roman", serif }Obecné rodiny písma
Jednotlivé OS používají různá písma → CSS pak nemusí být přenositelné
Řešení obecné rodiny písma, které se použijí, když se nenajde konkrétní font:
-
serif– patkové písmo -
sans-serif– bezpatkové písmo -
cursive– ozdobná kurzíva -
fantasy– ozdobné písmo -
monospace– neproporcionální písmo
