V minulém díle jsme se seznámili s tagem <body>. Víme, že v něm jsou informace, které chceme zobrazit. Nyní si povíme něco o atributech tohoto tagu. Atributy říkají prohlížeči, jaké vlastnosti má daný prvek mít. Co tedy můžeme od těla dokumentu chtít? Předně to je barva pozadí, dále obrázek na pozadí a rozměry okrajů.
Barvu pozadí definujeme atributem bgcolor. Barva se udává buď slovně (white, red, black apod.) nebo systémem RGB (#ffffff - bílá, #000000 - černá apod. Barvu pozadí definujeme i v případě, kdy má bít pozadí bílé. Je to proto, že ne každý má nastaveno bílé pozadí. A v takovém případě riskujeme, že si návštěvník u nás moc nepočte a pokud, pak jen s problémy. Proto Ještě jednou - barvu pozadí definujte vždy. Vám to nepřidělá téměř žádnou práci a uživatele nezklamete. Jak vypadla definice barvy pozadí v předchozích verzích HTML vidíte v následujících dvou příkladech (v obou případech bude pozadí bílé.
<body bgcolor="white">
Vlastní text
</body>
<body bgcolor="#FFFFFF">
Vlastní text
</body>
Ovšem ve čtvrté verzi HTML už tento zápis není správný. Proto si teď v adresáři, ve kterém máme náš pokusný HTML soubor, vytvoříme nový textový soubor, který pojmenujeme např. styl.css. V tomto souboru kaskádových stylů budou všechny použité atributy tagů. Do tohoto souboru uvedeme následující řádek:
body { background : #FFFFCC }
Pojďme si nyní rozebrat náš soubor styl.css: každý styl se skládá z jednoho pravidla. Každé pravidlo má dvě části - selektor (body) a deklaraci (background : #FFFFCC). Deklarace se skládá ze dvou částí -- z vlastnosti (background) a z její hodnoty (#FFFFCC). Definice stylu je uzavřená do složených závorek. Definujeme-li víc vlastností zároveň, musí být na konci každé deklarace středník. Například definujeme zároveň odsazení okraje (levý, pravý, horní a dolní) a základní velikost a barvu písma:
body {
background : #FFFFFF;
margin-left : 30px;
margin-right : 30px;
margin-top : 30px;
margin-bottom : 30px;
font-size : 15px;
color : #000000;
}Některé další možné vlastnosti selektoru body jsou uvedeny v tabulce:
| background-image : url(obrazek.jpg); | obrázek na pozadí |
| background-repeat : no-repeat; | opakování obrázku |
| background-position : center center | pozice |
| font-weight : bold; | typ písma |
| font-family : Arial; | řez písma |
Pozn.: I v kaskádových stylech můžeme používat komentáře. Na rozdíl od HTML však jimi je sekvence /* (začátek komentáře) a */ (konec komentáře). Chování je stejné jako u HTML.
Následně potřebujeme nějak oznámit prohlížeči, že má použít styly a kde je má hledat. To provedeme vložením následujícího tagu mezi tagy <head> a </head> (za atributem href následuje cesta k danému souboru. Ta může být relativní i absolutní, dokonce i mimo náš web; za atributem title následuje identifikátor - pro naší potřebu):
<link rel="stylesheet" href="styl.css" type="text/css" title="pokusný styl">
Odstavce v HTML tvoří párový tag <p> a </p>. Tento tag nám vynechá řádek a další text začíná na začátku nového řádku. Pojďme se nyní podívat, co nám s odstavcem provedou styly:
| text-align | zarovnání (left - vlevo, right - vpravo, center - na střed, justify - do bloku |
| text-indent | velikost odsazení prvního řádku v odstavci (absolutně nebo v %) |
| color | barva písma v odstavci |
| font size | velikost písma v odstavci |
| bgcolor | podbarvení odstavce |
| line-height | velikost řádkování (absolutně nebo násobek či procento velikosti písma |
Nadpisy v HTML vytváříme pomocí párového tagu <hx> a </hx>, kde x je celé číslo od 1 do 6, přičemž <h1> je největší a <h6> nejmenší nadpis. Nadpis vždy začíná na novém řádku a text za nadpisem taktéž. I s nadpisy můžeme pracovat pomocí stylů. Opět si ukážeme pár základních:
| text-align | zarovnání nadpisu (left - vlevo, right - vpravo, center - na střed) |
| color | barva písma v odstavci |
| letter-spacing | proložení písma v nadpisu |
Chceme-li v textu přejít na nový řádek, lze k tomu použít nepárový tag <br>
Tohle je první řádek. Tady ještě pokračuje,<br>ale tohle už je na novém řádku.
Pozn.: Je-li to možné, tomuto tagu se vyhýbejte. V XHTML tento tag totiž nepatří mezi standartní. Obejít se dá např. pomocí tabulky - jak si ukážeme později.
| Předchozí |Následující |Obsah sekce | Titulní stránka |
| © Zdeněk Kodrla, 2004 |