HTML
Flash VIII.
Folytatjuk a Flash megismerését. A mai írásunkban megnézzük, hogyan tudjuk a hangokat háttérzeneként és effektekként felhasználni. Rovatunk a Merlin Stúdió segítségével készült.
Flash VII.
Flash VI.
Flash V.
Flash IV.
Flash III.
Távtan
Webesztétika
Az internetes betörés, vírusok
Tech
Mi is az a HDTV Ă©s mire jĂł?
Programajánló
�prilis 2024
H K S C P S V
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 1 2 3 4 5
Ebben a h�napban
HĂ­rfolyam
14:42 
Csongrád megyében is támogatják a Mintamenza program terjedését
14:41 
Ukrán válság - Az oroszok hajók elsüllyesztésével foglyul ejtették az ukrán flotta egy részét
14:40 
Ukrán válság - Orosz lap: Viktor Janukovicsot állítólag infarktussal kórházban kezelik
14:38 
Versenyuszoda épül Gödöllõn
14:36 
Ukrán válság - Magyar katona vezeti az EBESZ katonai megfigyelõit
13:44 
Diszkótragédia - Fenntartotta a korábbi jogerõs ítéletet a Kúria a West Balkán-ügyben
Szeged
Szegedi hĂ­rek
Vízilabda ob I - Molnár Tamásék Diapolo Szeged VE néven folytatják
Választás 2014 – Bajnai: áprilisban hosszĂş távra eldõl, az ország merre halad tovább
Balett és fantasztikus vígjáték a Szegedi Nemzeti Színház márciusi mûsorán
Választás 2014 – Botka: az Orbán-kormány leválthatĂł
Elindult az utastájékoztató-rendszer tesztüzeme a szegedi megállókban
HTML HTML
StĂ­luslapok
munkatársunktĂłl   2004 March 05, Friday  

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 taget félkövérrel szedi, holott te dõltet képzeltél el oda.
  Hozzászólások Nyomtat E-mail PDF

(Ezt a fejezetet Cactus készítette.)

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-s verzió óta kezeli a stíluslapokat.

Használat

A stílus leírását különbözõképpen is beágyazhatod 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. 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. 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. 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.


Hozz�sz�l�sok Kedves Olvas�! Jelentkezzen be �s akkor hozz�sz�lhat a t�m�hoz!



Webradio.hu - Szegedi, orsz�gos �s sport h�rek a nap 24 �r�j�ban!:Hírek arrow Távtan arrow HTML arrow Stíluslapok



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player