pondelok, júla 03, 2006

Štýl

Preklady

V hlavičke stránky XHTML možno pomocou jazyka CSS zadať grafické vlastnosti jednotlivých prvkov stránky. Štýl prvku sa zadáva ako vymenovanie niekoľkých vlastností. Napríklad ak chceme, aby všetky odstavce (teda všetky texty mezi značkami „<p>“) mali zelenú farbu a šikmé písmo, zadáme:

p {
 color: green;
 font-style: italic;
}

Odstavec potom napíšeme jednoducho takto:

<p>Tento odstavec je zelený a šikmý,
 tak ako všetky odstavce na tejto stránke.</p>

Niekedy však nechceme, aby mali zelenú farbu všetky odstavce, ale iba niektoré vybrané. V takom prípade dané odstavce označíme vymysleným slovom, napríklad „lesne_pismo“. V štýle zadáme, že sa zelenou farbou majú zobraziť len odstavce typu „lesne_pismo“. (V názve typu sa nesmú nachádzať dĺžne a mäkčene, ani medzery, atď.)

p.lesne_pismo {
 color: green;
}

Vybrané odstavce označíme pomocou parametra „class“:

<p>Toto je obyčajný odstavec.</p>
<p class="lesne_pismo">Toto je zelený odstavec.</p>
<p>Ďalší obyčajný odstavec.</p>
<p class="lesne_pismo">Ďalší zelený odstavec.</p>

Môžeme dokonca zadať, že všetky odstavce majú nejakú vlastnosť, len vybrané odstavce ju majú inú. Napríklad všetky odstavce budú šikmým písmom, len odstavce typu „lesne_pismo“ budú zelenou farbou a rovným písmom:

p {
 font-style: italic;
}
p.lesne_pismo {
 color: green;
 font-style: normal;
}

Príklad:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Farebné odstavce</title>
<style type="text/css">
p {
 font-style: italic;
}
p.lesne_pismo {
 color: green;
 font-style: normal;
}
</style>
</head>
<body>

<p>Toto je obyčajný odstavec.</p>
<p class="lesne_pismo">Toto je zelený odstavec.</p>
<p>Ďalší obyčajný odstavec.</p>
<p class="lesne_pismo">Ďalší zelený odstavec.</p>

</body>
</html>

Toto je obyčajný odstavec.

Toto je zelený odstavec.

Ďalší obyčajný odstavec.

Ďalší zelený odstavec.

posted by Viliam Búr at 9:35 PM