CSS: 3. Hogyan?

LV
0
 

HTML

VIP
2007.05.20.
77
0
6
31
Hogyan illessz be egy stí­luslapot?
Amikor egy böngésző elolvas egy stí­luslapot át fogja alakí­tani az oldalt a stí­luslapnak megfelelően. Háromféle módon illeszthetsz be stí­luslapot az oldaladba:

1.) Külső stí­luslap
A külső stí­luslap akkor hasznos, hogyha több oldal megjelenését szeretnéd egyetlen fájllal irányí­tani. Mindegyik oldal forráskódjának fej (head) szerepelnie kell a stí­luslap elérési útvonalának a <link> parancs segí­tségével.
<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'><head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>[/CENTER]A böngésző ki fogja olvasni a stí­lus definí­ciókat a mystyle.css fájlból és annak megfelelően fogja formázni az oldal stí­lusát.

Külső stí­luslapot bármilyen szövegszerkesztő programmal tudsz készí­teni. Arra figyelj, hogy ne használj HTML parancsokat a stí­luslapon belül és .css formátumba mentsd el a munkád végeztével. Például:
<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}[/CENTER]

lamp.gif
Figyelj arra, hogy ne hagyj üres helyet az értékek és a mértékenységek között, mert néhány böngésző hibásan fogja értelmezni! Például véletlenül "margin-left: 20px" -t í­rtál a "margin_left: 20px" helyett.

2.) Beépí­tett stí­luslap
Beépí­tett stí­luslapot akkor használj, hogyha egy oldalnak egyéni megjelenést szeretnél adni. A stí­luslapot az oldal head részében adhatod meg a <style> parancs használatával. <div class='htmltop'>HTML[/CENTER]<div class='htmlmain'><head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>[/CENTER]
A böngésző most olvasni fogja a stí­lus definí­ciókat és ezeknek megfelelően fogja beállí­tani az oldalt.
Megjegyzés: Régebbi böngészők nem ismerik a <style> parancsot ezért ki fogják hagyni, viszont a tartalmát meg fogják jelení­teni. Ezt ki tudod védeni egyszerűen úgy, hogy a <style></style> közti részt HTML-es megjegyzésbe teszed ().
<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'><head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>[/CENTER]

3.) Belső stí­lus
A belső stí­lussal a CSS előnyeit veszí­ted el, ugyanis a HTML elemekhez hozzárendelsz egy style attritbútumot amin belül adod meg az elem stí­lusát.<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'><p style="color: sienna; margin-left: 20px">
Ez egy barnás bekezdés, 20 pixeles bal oldali margóval.
</p>[/CENTER]

4.) Többszörös stí­luslapok
Hogyha azonos kiválasztóra több tulajdonság lett beállí­tva különböző stí­luslapokban, akkor az értékek öröklődni fognak a jobban meghatározó stí­luslapból.Például egy külső stí­luslap a következő tulajdonságokat tartalmazza a h3 kiválasztóra:<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>h3
{
color: red;
text-align: left;
font-size: 8pt
}[/CENTER]és egy belső stí­luslap ezeket a tulajdonságokat adja meg ugyanarra az elemre:<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>h3
{
text-align: right;
font-size: 20pt
}[/CENTER]

Hogyha ezt a két beállí­tást (a külső és belső stí­luslapban szereplő tulajdonságokat) egy oldalon alkalamazod, akkor a h3 tulajdonságai ezek lesznek:<div class='htmltop'>HTML[/CENTER]<div class='htmlmain'>color: red;
text-align: right;
font-size: 20pt[/CENTER]

A szí­n (color) a külső stí­luslapból lett örökölve, mí­g a szöveg helye (text-align) és a betűméret (font-size) a belső stí­luslapból.
 
Kedvezményes Data.hu prémium előfizetés itt! Tölts villámgyorsan, korlátok nélkül!