CSS: 3. Hogyan? - Nyomtatható verzió

CSS: 3. Hogyan? - Nyomtatható verzió

+- HHW.hu (https://hhwforum.hu)
+-- Fórum: Informatika (https://hhwforum.hu/forumdisplay.php?fid=72)
+--- Fórum: Programozás (https://hhwforum.hu/forumdisplay.php?fid=78)
+---- Fórum: Webdesign (https://hhwforum.hu/forumdisplay.php?fid=82)
+---- Téma: CSS: 3. Hogyan? (/showthread.php?tid=347)

RE: CSS: 3. Hogyan? - HTML - 2008-10-07

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[/align]<div class='htmlmain'><head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>[/align]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[/align]<div class='htmlmain'>hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}[/align]

[Kép: 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[/align]<div class='htmlmain'><head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>[/align]
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[/align]<div class='htmlmain'><head>
<style type="text/css">

</style>
</head>[/align]

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[/align]<div class='htmlmain'><p style="color: sienna; margin-left: 20px">
Ez egy barnás bekezdés, 20 pixeles bal oldali margóval.
</p>[/align]

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[/align]<div class='htmlmain'>h3
{
color: red;
text-align: left;
font-size: 8pt
}[/align]és egy belső stíluslap ezeket a tulajdonságokat adja meg ugyanarra az elemre:<div class='htmltop'>HTML[/align]<div class='htmlmain'>h3
{
text-align: right;
font-size: 20pt
}[/align]

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[/align]<div class='htmlmain'>color: red;
text-align: right;
font-size: 20pt[/align]

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.