Základy CSS
K čemu je CSS dobré a jak ho rychle začít používat.
CSS (anglicky Cascading Style Sheets) je velmi rozšířený způsob, jak upravovat visuální vzhled dokumentů na internetu. V češtině se CSS běžně nazývá spojením kaskádové styly.
Pomocí CSS pravidel se nejčastěji upravuje podoba HTML značek.
Zápis CSS
Jednoduché použití CSS na HTML značku pro nadpis <h1> může vypadat následovně:
h1 {
color: red;
}Tento kód způsobí, že obsah následujícího HTML kódu:
<h1>Text</h1>Bude červený. Proč to tak bude?
-
h1je tzv. CSS selektor, kterým se zaměří prvek na stránce (selektorů je velké množství), tento selektor zaměří všechny značky<h1>, které se na stránce vyskytují {a}jsou složené závorky a obalují všechny předpisy pro daný selektor (na české klávesnici je lze zapsat jako Pravý Alt + B/N)-
colorje CSS vlastnost – všech vlastností je obrovské množství – konkrétněcolorslouží pro nastavení barvy :– pomocí dvojtečky se odděluje název vlastnosti od její hodnotyred– CSS hodnota přiřazená k vlastnosti před dvojtečkou;– středník odděluje více párů vlastnost – hodnota, za poslední dvojicí se psát nemusí, ale je to docela dobrý zvyk-
Mezery a odřádkování jsou v předchozí ukázce CSS pouze pro přehlednost. Zápis „
h1{color:red;}“ povede ke stejnému výsledku.
Živá ukázka – nejjednodušší použití CSS na HTML dokument
Připojení CSS
Aby se mohly kaskádové styly v HTML stránce projevit, musí se nějak připojit.
Značka <style>
Nejrychlejší a nejsnazší je vložit CSS předpisy do HTML značky <style>, která se obvykle přidává před samotný obsah do hlavičky stránky (volitelná značka <head>).
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<h1>Červený text</h1>
U vícestránkového webu by se ale muselo CSS se značkou <style> kopírovat na všechny podstránky. Velké weby navíc mají styly značně rozsáhlé a datově objemné, takže by se totéž CSS muselo znovu a znovu stahovat s každou stránkou.
Proto se CSS ve značce <style> moc nepoužívá. Případně jen pro menší množství pravidel.
Atribut style
Psát CSS jde i přímo k jednotlivým HTML značkám do atributu style.
<h1 style="color: red">Červený text</h1>Tento postup nazývaný jako inline zápis se ale používá jen výjimečně, protože je obtížnější takový kód spravovat. Navíc se obvykle CSS předpisy používají opakovaně, takže by neustálé opakování kódu nebylo moc elegantní.
Měli-li by být všechny nadpisy <h1> červené, musela by mít každá tato značka style="color: red". Při vyčlenění CSS a zaměření pomocí selektorů to stačí napsat jednou.
Externí CSS
Asi nejčastěji se používá externí CSS soubor. Někde v adresáři s webem se vytvoří soubor s příponou *.css (třeba styl.css) a jednotlivé CSS předpisy se píší přímo do něj.
Tento soubor se potom připojí ze všech stránek, kde je potřeba, značkou <link> (před obsahem v části <head>):
<link rel="stylesheet" href="styl.css">Pomocí rel="stylesheet" se prohlížeč dozví, že se jedná o soubor se styly.
Občas se je možné setkat s připojením stylů vypadajícím následovně:
<link rel="stylesheet" type="text/css" href="styl.css">Uvádění typu je zbytečné, protože „text/css“ je výchozí typ pro rel="stylesheet".
- Nejjednodušší HTML + CSS kostra s externím stylem
CSS vlastnosti
Pro základní ovládnutí CSS je dále nutné znát asi deset CSS vlastností.
Vzhled textu
font– nastavení fontu, velikosti písma (font-size) nebo výšky řádku (line-height)color– barva textutext-align– zarovnání textu- stylování odkazů
Komentáře