Alapfokú Html tanfolyam 19. rész

Stíluslapok

A HTML nyelv főként a tartalom leírására szolgál, irányelveket ad a böngészőknek a megjelenítésre vonatkozva, azonban teljességgel elképzelhető, hogy pl. egy böngészőprogram a <CITE> taget félkövérrel szedi, holott te dőltet képzeltél el oda. Ezért született meg az igény a stíluslapokra, amely pont a HTML komplementere: csak a megjelenítésre tartalmaz irányelveket. Történelmi megközelítésben vizsgálódva fontos lehet megemlíteni, hogy az Internet Explorer a 3.0-s, a Netscape Navigator a 4.0-es verzió óta kezeli a stíluslapokat.

Használat

A stílus leírását több technika segítségével is beágyazhatod az oldaladba:

A <LINK> tag segítségével

a REL paraméter értéke természetesen "StyleSheet", a TYPE-é pedig "text/CSS" legyen! A TITLE paraméterbe beírhatsz egy címet a stíluslapról, amelyet a böngészők pl. arra használhatnak, hogy a felhasználó választhasson, hogy az oldalad mondjuk Star Trek vagy X-Files színekkel, betűtípusokkal jelenjen-e meg (az alapértelmezett stíluslapot tedd utolsónak, mert pl. az IE 3.0 nem ajánlja fel a választást, hanem a legutolsót használja). Természetesen a HREF paraméter tartalmazza a stíluslap URL-jét. Ennyi rizsa után egy konkrét példa. Célszerű a <HEAD> szekcióba tenni.

A <HEAD> szekción belül, közvetlenül a <STYLE> tag-gel

itt lényegében beágyazod magát a stíluslapot a <HEAD> szekcióba. Például. Nagy hátránya az előző módszerrel szemben, hogy elvész a stíluslapok nyújtotta dinamizmus: ha meg szeretnéd változtatni az általad tervezett site arculatál, bizony mindegyik oldalt végig kell járnod a stílusok átírásához. Hasznos lehet viszont, ha sebtiben akarsz összedobni három-négy oldalt.

Az egyes tageken belül

Ez azt jelenti, hogy a tag kap egy STYLE paramétert, amelyen belül definiálod a kinézett, például. Ez mindhárom módszer közül a legrosszabb: egyrészt ugyanúgy, mint a második módszernél, nem lehet központilag megváltoztatni, másrészt eléggé idegen a HTML gondolatvilágától, ugyanis összekeveri a tartalmi és a formai definíciókat.

Mindent összevetve az első módszer tűnik a legjobbnak, de a kezdeti próbálgatásokhoz talán a második a legegyszerűbb, mivel itt egy file-t szerkesztesz, de egybemarad a stíluslap, tehát később kiemelhető onnan külön file-ba.

A stíluslapok felépítése

Most, hogy már tisztáztuk, hogyan tudod majd felhasználni a stíluslapodat, ideje megírnod. Először azonban egy kis fejtágítás következik.

Akinek "számítástechnikus agya" van, vagy foglalkozott már pl. OOP-vel, az bizonyára érteni fogja a stílusok hierarchiarendszerét. Azonban nem mindenki úgy ül le, hogy bemutassa pl. a virágüzletét a Weben, hogy előtte nem csak felhasználói szinten foglalkozott számítástechnikával. A stíluslapok hierarchiarendszeréről lesz ugyanis most szó.

A lényeg az, hogy ha megadod egy tag kinézetét, akkor a többi, azon belüli tag örökli azt, ha csak felül nem írod. Például ha a BODY tag-et pirosra állítod, és a B-t aláhúzottra, akkor mivel a B a BODY-n belül van, pirosan és aláhúzva jelenik meg. Ha viszont a P kék, akkor kéken fog megjelenni. Ha pedig egy P tag-en belül elhelyezel egy B tag-et, akkor az kék lesz, és aláhúzott.Emellett vastag is-vajon miért? Természetesen azért, mivel a böngészők a B tag-et alapértelmezésben vastagon jelenítik meg, és nem mondtuk meg neki, hogy vékony legyen. Tehát az első esetben a B örökölte a félkövérséget, a piros színt és saját magától az aláhúzottságot, ebben a sorrendben. A második esetben viszont örökölte a félkövérséget, a piros színt, a kék színt és az aláhúzottságot. Mivel a piros is, a kék is szín és mivel a kék volt utóbb, a szöveg kékkel jelenik meg. Igen, ez elsőre nem valami egyeszerű, de kétségkívül logikus.

A stíluslap bejegyzése a következő formában jelenik meg:

Szülők.Név {Paraméter1:Érték1, Érték2, Érték3; Paraméter2:Érték1, Érték2;...}

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, a fenti példában a B tag mindig aláhúzottan jelent meg. Ha azt szeretnénk, hogy csak azok a vastagbetűs szövegek legyenek aláhúzva is, amelyek 1-es fejlécben szerepelnek, a szülőt természetesen H1-nek kell beírni:

H1.B {Text-decoration: underline}

Ekkor a kenyérszövegekben nem jelenik meg az aláhúzás. Egy paraméternek azért adhatsz több értéket is, hogy pl. egy szöveg egyszerre lehessen aláhúzott és villogó (mindkettő text-decoration). Egy tag-en belül különböző gyermekosztályokat is létrehozhatsz, amelyek szülője ugyanúgy a felette álló tag, mint a normál tag-ek esetében. Például:

.fejlec {Font-family: "StarTrekGen HV BT", "Times New Roman", serif; Font-Size: 30pt}

Ezek után ha szeretnél egy kenyérszövegen belül elhelyezni egy fejlécet, a DIV tag CLASS paraméterének írjad be, hogy fejlec:

<P><DIV CLASS="fejlec">Eleg jól kiüt a környezetből</DIV>, nem igaz? </P>

Ha szeretnéd, hogy a H1-en belüli fejlécek még pirosak is legyenek, a .fejlec sor után írd be, hogy

H1.fejlec {color: red}

Ekkor ha a <DIV> tag-eta H1-en belül használod, akkor a standard .fejlec alstíluson kívül megkapja a csak a H1-es .fejlecre jellemző piros színt. Az A tag-nek ezenkívül három gyermekstílusa van: A:Link, A:Visited, A:Active. Ezekkel állíthatod be külön a normál, a már meglátogatott és az éppen aktív élőkapocs kinézetét.