Dnes je Přidat k oblíbeným
Zápis kaskádových stylů do HTML
- externím souborem- zápis tagem <link> v hlavičce
- stylopisem, zapsaným v párovém tagu <style> v hlavičce
- atributem style u stylovaného prvku
Zápis stylů do externího souboru
K tomuto zápisu budeme potřebovat dva soubory. Jeden "normální" s příponou .htm (.html, .php) a jeden, kde nadefinujeme styly. Ten uložíme s příponou .css. V souboru .htm do hlavičky (někam mezi tagy <head> a </head>) umístíme kód:
<link rel="stylesheet" type="text/css" href="jmeno_souboru_se_styly.css">
Do souboru se styly napíšeme pouze (bez jakýchkoli značek HTML!):
body
{background: teal
color: #ffff00;
}
h2
{text-align: justify;
}
Doporučuji používat tento způsob připojení stylů. Všechny stránky svého webu odkážete na jediný soubor.css a tím docílíte přehlednosti a stejného vzhledu a navíc budete mít vše na jednom místě. Změny vzhledu celého webu docílíte změnou jediného souboru a stránky se budou načítat rychleji.
Zápis stylů do hlavičky dokumentu pomocí tagu <style>
V souboru.htm (jiný při tomto způsobu ani nemáme) do hlavičky umístíme kód:<style>
body
{background: teal
color: #ffff00;
}
h2
{text-align: justify;
}
</style>Dosáhneme tak stejného výsledku jako v prvním případě. Tento způsob ale již nedoporučuji. Nejen, že je náročný na údržbu a méně nepřehledný, ale především novější specifikace jazyků od něj již upouštějí a za několik let (psáno 06/2007) ho možná již žádný prohlížeč nepochopí.
Zápis atributem style přímo u stylovaného prvku
K tagu, jehož obsah chceme nastylovat připojíme atribut style. Máme třeba tři odstavce a text prostředního chceme zobrazit velkým modrým písmem:<p style="font-size: 120%; color: blue">Velký modrý text prostředního odstavce</p>
<p>Text třetího odstavce</p>
Výsledek:
Text prvního odstavce
Velký modrý text prostředního odstavce
Text třetího odstavce
Tento způsob stylování používejte opravdu jen výjimečně, pokud se prvek stejného vzhledu již nikde nevyskytuje. Dá se to taky použít, pokud generujete styly pomocí nějakého skriptovacího jazyka.
Syntaxe ve stylopisu, aneb jak přesně definovat styly
Jak styly připojit už víme, takže se podívejme, jak přesně bude vypadat soubor.css. Každý soubor.css (stylopis) je tvořen seznamem pravidel. Každé pravidlo se skládá ze dvou částí- z popisu prvků, pro které bude styl platit (tzv. selektor), a z definice stylu, která je uzavřena ve složených závorkách {}. Touto definicí přiřazujeme nějaké CSS vlastnosti její hodnotu a zápis uvnitř složených závorek je ve tvaru {vlastnost: hodnota;}. Nezáleží na koncích řádků, mezerách ani tabulátorech. Proto používám pro přehlednější zápis, že každou vlastnost u delších definic píšu na nový řádek.
selektor1 {vlastnost: hodnota; vlastnost2: hodnota2}
selektor2 {vlastnost: hodnota;}
selektor3 {
vlastnost:hodnota;
vlastnost2: hodnota2;
vlastnost3: hodnota3;
vlastnost4: hodnota4;
}
Konkrétní zápis:
body {color: #ffffff; background: #000000}
p {font-size: 120%;}
h1 {
width:350px;
margin: 0 0 41px 18%;
background: url("images/pozadih1.gif") no-repeat top;
border: 2px solid green;
}
V další kapitole se podívejte, co jsou to vlastně ty selektory, které se píší před pravidla.