Základy formátování textu

Vrátíme se k příkladu, na kterém jsme si ukazovali html, a ukážeme si na něm v praxi nějaké to CSS formátování.

<body>
<h1>Nadpis první úrovně</h1>
<h2>Nadpis druhé úrovně</h2>
<p>text odstavce text odstavce text odstavce</p>
<h2>Nadpis druhé úrovně</h2>
<h3>Nadpis třetí úrovně</h3>
<p>text odstavce text odstavce text odstavce</p>
<ul>
<li>položka seznamu s odrážkami</li>
<li>položka seznamu s odrážkami</li>
<li>položka seznamu s odrážkami</li>
</ul>
<h3>Nadpis třetí úrovně</h3>
<p>text odstavce text odstavce text odstavce</p>
</body>

Stylování textu

Do hlavičky tohoto souboru jsem přidala tag, kterým odkazuji na externí styl, tj.
<link rel='stylesheet' href='styl.css' type='text/css' />

Do souboru stylu teď budeme postupně přidávat obsah a podíváme se, jak se bude stránka měnit, aniž bychom zasáhli do html.

Nejdřív si připomeneme, jak náš příklad vypadal bez formátování.

První krok

Do souboru se stylem dáme pro začátek toto:

body {
background-color: #FFDEAD;
color: #A0522D;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

A tady je tenhle první krok stylování.

V příkladech jsou uváděny odkazy na použité CSS vlastnosti, popsané podrobně na JPW, a to včetně hodnot a případných rozdílů v zobrazení v různých prohlížečích. Tam také najdete další spoustu CSS vlastností, protože my určitě všechny nepoužijeme.

Pomocí těch třech řádků ve stylu jsme nastavili pro body, tj. pro všechno, co je mezi tagy <body> a </body>, barvu pozadí, barvu písma a typ písma (použitý font). A pojďme dále.

Druhý krok

Do stylu dále doplníme:

h1, h2 {
color: #00008B;
}
h1 {
font-variant: small-caps;
font-style: italic;
}

A tady je druhý krok.

Nejprve jsme nastavili barvu pro nadpisy h1 a h2 - protože je chceme mít stejné, dovolili jsme si je sloučit, tj. zapsat je za sebou a jejich názvy oddělit čárkou, a požadované (společné) vlastnosti zapsat jen jednou. Samostatně pro h1 jsme pak nastavili styl a variantu písma.

Třetí krok

Podobně můžeme pokračovat podle libosti dál. Chcete nastavit formátování pro položky seznamu a pro seznam jako takový? Přidáme do stylu vlastnosti pro tagy <ul> a <li>:

ul {
border: 1px dashed #32CD32;
}
li {
list-style: square;
font-weight: bold;
}

Podíváme se, jak se nám to povedlo. Uznávám, nijak dvakrát to nevypadá - orámovali jsme zelenou, čárkovanou a 1px silnou čárou seznam a položkám jsme nastavili odrážky ve tvaru čtverce a tučné písmo.

Můžete se podívat na celý takto vytvořený styl.

Vše, co je označeno tagem, můžeme stylovat pomocí CSS tak, že do stylu zapíšeme tento tag a přiřadíme mu požadované vlastnosti.

Tohle nám ale nebude vždycky stačit; co když budu chtít mít některé odstavce zelené a některé červené? Tady už si jen s tagy nevystačíme, protože v kódu html se tyto dva odstavce nijak neliší. Ale určitě nám pomůže, když si je budeme moct ještě nějak pojmenovat a tím je rozlišit.

Podíváme se tedy dále na třídy a identifikátory.


Firefox: Prohlížeč, kterému můžete věřit
píše -dis- bb(zavináč)choltice.eu