Stilo
En la kapo de la XHTML paĝo ni povas specifi la grafikajn ecojn de unuopaj eroj uzante la stil-lingvon CSS. La stilo estas aro de kelkaj ecoj. Se ni ekzemple volas, ke ĉiuj alineoj (do ĉiuj tekstoj inter markoj „<p>“) havu verdan koloron kaj kursivon, ni skribu:
p {
color: green;
font-style: italic;
}
Kaj la alineon ni simple skribas tiel ĉi:
<p>Jen la verda kursiva alineo, samkiel ĉiuj aliaj alineoj en tiu ĉi paĝo.</p>
Sed ni foje ne volas verdigi ĉiujn alineojn, nur kelkajn elektitajn. Tiukaze ni marku la elektitajn alineojn per iu nomo, ekzemple „arbaraj_literoj“. Kaj en la stilo ni specifas, ke ĉiuj alineoj de tipo „arbaraj_literoj“ havu la verdan koloron. (La nomo de la tipo ne povas enhavi ĉapelitajn literojn, spacojn, ktp.)
p.arbaraj_literoj {
color: green;
}
La elektitajn alineojn ni marku per la eco „class“:
<p>Jen normala alineo.</p> <p class="arbaraj_literoj">Jen verda alineo.</p> <p>Jen plua normala alineo .</p> <p class="arbaraj_literoj">Jen plua verda alineo.</p>
Ni eĉ povas specifi, ke ĉiuj alineoj havu ian econ, kaj la elektitaj havu la alian. Ekzemple ĉiuj alineoj estu kursivaj, nur la alineoj de tipo „arbaraj_literoj“ estus verdaj kaj ne-kursivaj:
p {
font-style: italic;
}
p. arbaraj_literoj {
color: green;
font-style: normal;
}
Ekzemple:
<!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="eo" lang="eo">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Koloraj alineoj</title>
<style type="text/css">
p {
font-style: italic;
}
p. arbaraj_literoj {
color: green;
font-style: normal;
}
</style>
</head>
<body>
<p>Jen normala alineo.</p>
<p class="arbaraj_literoj">Jen verda alineo.</p>
<p>Jen plua normala alineo.</p>
<p class="arbaraj_literoj">Jen plua verda alineo.</p>
</body>
</html>
Jen normala alineo.
Jen verda alineo.
Jen plua normala alineo.
Jen plua verda alineo.
posted by Viliam Búr at 9:35 PM
0 Comments:
Post a Comment
<< Home