Segédletek.hu
Segédletek weblap szerkesztéshez!
 |
Fórum:
Postaláda:
Szavazás:
Hány éves vagy?
Segédletek:
Linkek:
css alapok:
Ebben a segédletben a CSS stíluslapok használatáról lesz szó
A rangsorolt stíluslapok (Cascading Style sheets, CSS )segítségével megadhatjuk az HTML dokumentum elemeinek stílusát. Beállíthatunk vele színeket, betűtípusokat, pozícionálhatjuk az elemeket, és még sok mindent.
A CSS stíluslap lehet külön fájlban, lehet az aktuális fájlban, és lehet közvetlenül az elem attribútuma is.
A stíluslap minden eleme kijelölőből(selector) és meghatározásból(declaration) áll.
pl:
Ezzel megadjuk a <p></p> elemek közötti rész hátterét, betűtípusát és betűszínét.
Ez egy általános kijelölő és a dokumentum összes <p></p> elemére vonatkozik.
Ezen felül írhatunk Azonosító kijelölőket is. pl:
Ezzel írtuk egy egyedi stílust, amelyet egy elemre használhatunk. pl:
<div id="header">Fejléc</div>>
Arra is szükségünk lehet, hogy egy egyedi kijelölőt többször is használhassunk. Ezeket osztálykijelölőknek nevezzük.
Ennek a módszere:
Ezzel egy olyan stílust írtunk, ami a betűméretet megnöveli, és a színt pirosra állítja, de csak azokban az elemekben, ahol a class attribútumot hibaüzenetre állítjuk. pl:
<span class="hibaüzenet">Hibás fájl formátum</span>
<p>itt van még sok szöveg</p>
<span class="hibauzenet">Itt egy hibaüzenet</span>
Most, hogy így ezt tisztáztuk, nézzük meg, hogy hova helyezhetjük el a stíluslapokat, és azt is meglátjuk, hogy mi a fontossági sorrend.
Egy stílus meghatározás minél közelebb van az adott elemhez, annál magasabb a prioritása.
Stíluslapot elhelyezhetünk külön fájlban:
style.css
Erre így tudunk hivatkozni:
Stíluslapot elhelyezhetünk a <head></head> részben is az alábbi módon:
És a harmadik hely, ahova stílust rakhatunk, az közvetlenül az elem:
Most hogy ezzel megvagyunk fontos, hogy tisztában legyünk a prioritási sorrenddel.
Ez a sorrend a következő (növekvő sorrend)
-A böngésző alap beállításai
-A külső stíluslapok
-A head részben definiált stíluslapok
-A közvetlenül attribútumként megadott stílusok
Nézzünk rá egy példát is:
style.css
és a html:
Itt az a helyzet állt elő, hogy a külső stíluslapban definiáltuk a <p> elemre, hogy a szöveget középre igazítsa. A head részben ezt felülírtuk, és mivel az van hozzá közelebb([i]magasabb a prioritása[/b]) Az lesz az érvényes. Fontos megjegyezni, hogy csak a text-align tulajdonságot írtuk felül, a többi tulajdonság marad a külső lapban definiált érték.
Mindezeknek a birtokában már bátran neki lehet állni a CSS megismerésének behatóbb szinten. Ehhez nagyon jó segítséget nyújt a CSS referencia
A CSS stíluslap lehet külön fájlban, lehet az aktuális fájlban, és lehet közvetlenül az elem attribútuma is.
A stíluslap minden eleme kijelölőből(selector) és meghatározásból(declaration) áll.
pl:
p{
font-size:Arial, Helvetica, sans-serif;
background-color:#FFDEAD;
color:#000080;
}
Ezzel megadjuk a <p></p> elemek közötti rész hátterét, betűtípusát és betűszínét.
Ez egy általános kijelölő és a dokumentum összes <p></p> elemére vonatkozik.
Ezen felül írhatunk Azonosító kijelölőket is. pl:
#header{
position:absolute;
top:0px;
left:0px;
}
Ezzel írtuk egy egyedi stílust, amelyet egy elemre használhatunk. pl:
<div id="header">Fejléc</div>>
Arra is szükségünk lehet, hogy egy egyedi kijelölőt többször is használhassunk. Ezeket osztálykijelölőknek nevezzük.
Ennek a módszere:
.hibauzenet{
font-size:1.2em;
font-color:#FF0000;
}
Ezzel egy olyan stílust írtunk, ami a betűméretet megnöveli, és a színt pirosra állítja, de csak azokban az elemekben, ahol a class attribútumot hibaüzenetre állítjuk. pl:
<span class="hibaüzenet">Hibás fájl formátum</span>
<p>itt van még sok szöveg</p>
<span class="hibauzenet">Itt egy hibaüzenet</span>
Most, hogy így ezt tisztáztuk, nézzük meg, hogy hova helyezhetjük el a stíluslapokat, és azt is meglátjuk, hogy mi a fontossági sorrend.
Egy stílus meghatározás minél közelebb van az adott elemhez, annál magasabb a prioritása.
Stíluslapot elhelyezhetünk külön fájlban:
style.css
p{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFDEAD;
color:#000080;
}
Erre így tudunk hivatkozni:
<html>
<head>
<title>CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Ez egy bekezdés!</p>
</body>
</html>
Stíluslapot elhelyezhetünk a <head></head> részben is az alábbi módon:
<html>
<head>
<title>CSS</title>
<style type="text/css">
p{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFDEAD;
color:#000080;
}
</style>
</head>
<body>
<p>Ez egy bekezdés!</p>
</body>
</html>
És a harmadik hely, ahova stílust rakhatunk, az közvetlenül az elem:
<html>
<head>
<title>CSS</title>
</head>
<body>
<p style="text-align:center; font-family:Arial, Helvetica, sans-serif; background-color:#FFDEAD; color:#000080;">Ez egy bekezdés!</p>
</body>
</html>
Most hogy ezzel megvagyunk fontos, hogy tisztában legyünk a prioritási sorrenddel.
Ez a sorrend a következő (növekvő sorrend)
-A böngésző alap beállításai
-A külső stíluslapok
-A head részben definiált stíluslapok
-A közvetlenül attribútumként megadott stílusok
Nézzünk rá egy példát is:
style.css
p{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFDEAD;
color:#000080;
}
és a html:
<html>
<head>
<title>CSS</title>
<style type="text/css">
p{
text-align:left;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFDEAD;
color:#000080;
}
</style>
</head>
<body>
<p>Ez egy bekezdés!</p>
</body>
</html>
Itt az a helyzet állt elő, hogy a külső stíluslapban definiáltuk a <p> elemre, hogy a szöveget középre igazítsa. A head részben ezt felülírtuk, és mivel az van hozzá közelebb([i]magasabb a prioritása[/b]) Az lesz az érvényes. Fontos megjegyezni, hogy csak a text-align tulajdonságot írtuk felül, a többi tulajdonság marad a külső lapban definiált érték.
Mindezeknek a birtokában már bátran neki lehet állni a CSS megismerésének behatóbb szinten. Ehhez nagyon jó segítséget nyújt a CSS referencia
Írta: requiem - 2006-07-07 13:46:09
* Nem vagy bejelentkezve!* Nem töltheted le a segédlet forrását egyben!
* Nem szavazhatsz a segédletre!
* Nem írhatsz a segédlethez tartozó fórum témába!
| talaca | 2010-01-13 10:37:54 |
| Szia! Azt szeretném megkérdezni, hogy hogyan tudom a táblázatot(az egész weblapot)középre igazítani? El?re is köszi. |
|
Kapcsolat | Szerzői jogok | Oldaltérkép | Impresszum | Segédletet írnék
© Copyright 2006-2007 segedletek.hu
