20.3.: Írjunk egyszerű stíluslapot!
Az eddigiekben csak használtuk a stíluslapokat, de nem tudtunk írni egyet. Nos, éppen itt az ideje!
A parancsok és a lehetséges értékek használhatósága nem nehéz. Igen fontos az öröklődés, mivel a végső formázást a legutoljára használt CSS határozza meg. A lényeg: ha egy tagnak megadjuk a kinézetét, akkor azon belül az összes tag ezt örökölni fogja, hacsak felül nem írjuk ezt!
Például ha a BODY taget kékre állítjuk és a B taget döntöttre, akkor mivel a B a BODY-n belül van, ezért a <B> és a </B> közötti rész kéken és döntötten jelenik meg. Ezt természetesen tovább lehet bonyolítani össze-vissza öröklődő tulajdonságokkal, de nem feltétlenül érdemes. Véleményem szerint a fenti példában emlegetett B taget nem érdemes átdefiniálni "csak a hecc" kedvéért, mivel későbbiekben nem tudunk kiigazodni a túlbonyolított tulajdonságokon.
A stíluslapok bejegyzései egyébként az alábbi formátumban jelennek meg:
Szülők.Név (Paraméter1: Érték1, Érték2, Érték3; Paraméter2: Érték1, Érték2, Érték3)
A fenti sorban 1 paraméterhez mindig 3 érték tartozik, de ez természetesen bármennyi lehet. (De azért minimum 1 legyen!) A 2 paraméter sem kötelező, mivel abból is csupán annyi a kikötés, hogy minimum 1 legyen. Ha a szülőt nem adjuk meg, akkor a beállított értékek a szülőtől függetlenül jelennek meg. Ha azt szeretnénk, hogy csak a H1-es fejlécben aláhúzott szövegek jelenjen meg kéken, akkor a következő sort kell kiadnunk:
H1.U {color="blue"}
Saját magunk is definiálhatunk alosztályokat. Ez ugyanolyan értékű része lesz a szülőosztálynak, mint bármi más része. Adjuk ki például a következő parancsot egy CSS-fájlban:
.alairas {Font-family="Arial, Times Nem Roman CE"; Font-size=15pt; color="red"}
Használata is egyszerű. Ha például a B tagben szeretnénk egy imént definiált stílust használni, akkor a következő részt kell betenni a HTML-fájlba:
<B class=”alairas”> Ez már aláírás-stílus </b>
Lássunk erre egy gyakorlati példát! (htmlpelda31.html)
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Piros és középre igazított cím.</h1>
<p class="center">Piros és középre igazított paragrafus.</p>
</body>
</html>
Most már jöhet a CSS-referencia!
- << Előző
- Következő