HTML stílusok, stíluslapok használata, avagy HTML style
A HTML stílus (vagy angolul a HTML style) arra való, hogy a weboldalunk kinézetét személyre tudjuk szabni vele. Például ezeken keresztül adhatjuk meg, hogy a háttér színe piros legyen, vagy a szöveg a mérete nagy.
Ha szeretnénk a weboldalunknak egyedi kinézetet, stílust adni, akkor 4 lehetséges módon tehetjük azt meg.
Nézzük meg a HTML stílusok, stíluslapok csatolási lehetőségeit:
- Összekapcsolhatjuk a HTML dokumentumunkat egy külső CSS fájllal
- A HTML dokumentumon belül a <HEAD> szekcióban is megadhatjuk a stílusbeállításokat
- Beimportálhatjuk a külső stíluslapot
- Beágyazhatjuk az adott elem kezdőcímkéjébe (tag-jébe) a stílus definíciókat
Most pedig vizsgáljuk meg ezeket a stílusbeállítási lehetőségeket egyesével.
Beágyazott, inline stílus
Ez tekinthető a legegyszerűbb és leggyorsabb stílus (style) megadás módnak, viszont ebből kifolyólag számos hátránya is van.
Szintaktika
<p style="STÍLUS DEFINÍCIÓK;">TARTALOM</p>
Code language: HTML, XML (xml)Fontos megjegyezni, hogy nem csak a p taggel működnek a stílusok, nyugodtan írhattam volna BODY-t vagy bármi mást.
A legtöbben, akik ezt a cikket olvassák már tisztában vannak a p tag használatával, így tudhatják, hogy egy sima p tag így néz ki: <p>TARTALOM</p>.
De most kapott egy „style=”STÍLUS DEFINÍCIÓK;”” kiegészítést.
A „style=” szekció után kell idézőjelek közé megadnunk a stílus beállításait.
Példa
Rengeteg stílusbeállítás létezik, de ehhez a példához nem szükséges még mindet ismernünk. Legyen elég annyi, hogy a „color” a szöveg színét állítja. E szerint így alakul a példánk:
HTML + CSS kód
<p style="color:red;">Ez egy piros szöveg lesz.</p>
<p>Ez nem piros, mert itt nincs stílusdefiníció.</p>
Code language: HTML, XML (xml)Eredmény
Ez egy piros szöveg lesz.
Ez nem piros, mert itt nincs stílusdefiníció.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Előnyök
- Rendkívül gyorsan és egyszerűen hozzátudjuk adni a kívánt elemhez a kívánt stílust.
Hátrányok
- Nem tudjuk egységesen szerkeszteni az összes p stílusát. Ha később megadunk még egy p elemet, akkor annál újra meg kell adni a szöveg színét.
Stílus (STYLE) a HEAD szekcióba
Ez a megoldás már sokkal kedvezőbb, hiszen itt elég egyetlen egyszer megadnunk és a HTML dokumentumunkba lévő összes p elem piros lesz.
Szintaktika
<HEAD>
<style type="text/css">
STÍLUSDEFINÍCIÓ
</style>
</HEAD>
Code language: HTML, XML (xml)A fenti példából látszik, hogy a STYLE-t a HEAD-en belül kell megadni! A <style> taget </style>-al le kell zárnunk. A kettő közé kerülnek a stílus meghatározások. Alább láthattok egy példát.
Példa
HTML + CSS kód
<!DOCTYPE html>
<head>
<style type="text/css">
p {color:red;}
</style>
</head>
<body>
<p>Minden p-nek pirosnak kell lennie.</p>
<p>Ennek is.</p>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
Minden p-nek pirosnak kell lennie.
Ennek is.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Előnyök
- Elég egyetlen egyszer megadnunk és az összes elem olyan lesz, amilyennek szeretnénk.
Hátrányok
- Az adott oldalon élni fognak a stílusbeállítások, viszont ha csinálunk egy másik aloldalt az oldalunkhoz (például egy Információk oldalt pluszba), akkor ott már nem lesznek érvényesek a stílusbeállításaink.
HTML dokumentum összekapcsolása külső CSS fájllal
Őszintén megvallva ez az én kedvenc módszerem. Ez teszi a kódot a leginkább tisztává és átláthatóvá.
Szintaktika
<link rel=stylesheet type="text/css" href="CSS.ELÉRÉSI.ÚTVONALA">
Code language: HTML, XML (xml)Ha a CSS fájl (.css kiterjesztésű legyen!) és a HTML dokumentum ugyanabba a mappába van, akkor elegendő csak a CSS fájl nevére hivatkozni és nem kell az elérési útvonalát megadni.
Fontos tudni, hogy a <link> tag-et a <HEAD>-ben kell elhelyezni.
A „rel” és a „type” részeket ne módosítsuk, hiszen innen tudja a böngésző, hogy egy CSS fájlra mutatunk. Egyedül a „href” részbe módosítsuk a CSS fájl elérését.
Érdemes még tudni, hogy akár több CSS fájlt is belinkelhetünk, de nem érdemes ész nélkül többet használni, mert az a weboldalunk betöltődését lassíthatja.
Példa
Most pedig nézzünk egy példát:
HTML kód
<!DOCTYPE html>
<head>
<link rel=stylesheet type="text/css" href="stilus.css">
</head>
<body>
<p>Minden p-nek pirosnak kell lennie.</p>
<p>Ennek is.</p>
</body>
</html>
Code language: HTML, XML (xml)CSS kód (stilus.css)
p {
color:red;
}
Code language: CSS (css)Eredmény
Minden p-nek pirosnak kell lennie.
Ennek is.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti példát megvizsgálva megállapíthatjuk, hogy a HTML kódba hivatkozunk (vagy linkeljük) a stilus.css nevű fájlra, amelyben megvan adva, hogy a p elemek pirosan jelenjenek meg. Így a jobb szélső részben láthatjuk, hogy az összes p elemünk pirosként jelenik meg.
Előnyök
- Ha egyszer meghatározzuk a CSS stílusdefinícióit, akkor többé már nem kell. Elég, ha minden egyes oldalon, dokumentumon csak erre az egy fájlra hivatkozunk.
Hátrányok
- Egy kicsit időigényes. Sok időbe telik míg létrehozol egy új fájlt, meghatározod a stílusokat, majd összelinkeled a két fájlt.
Stíluslap beimportálása
Az @import segítségével külső stíluslapokat importálhatunk be HTML-fájlunkba. Ez tulajdonképpen ugyanazt csinálja, mintha belinkelnénk a CSS fájlt, csak ez itt nem HTML, hanem CSS utasítás.
Szintaktika
@import url(ELÉRÉSI.ÚTVONAL);
Code language: CSS (css)Pár információ az @import-ról
- A @import utasítás megengedi, hogy egy CSS fájlba egy másik CSS fájlt importálj.
- A @import utasításnak a dokumentum tetejében kell elhelyezkednie, de fontos, hogy a @charset deklaráció után legyen megtalálható.
- Támogatja a média lekérdezéseket is.
- Az importálási utasítás végére kötelező kitenni a pontosvesszőt.
Példa
A példánk ugyanúgy néz ki, mint az előző esetben, csak a CSS fájlra való mutatás változott.
HTML kód
<!DOCTYPE html>
<head>
<meta charset="utf-8">
@import url("STILUS.css");
</head>
<body>
<p>Minden p-nek pirosnak kell lennie.</p>
<p>Ennek is.</p>
</body>
</html>
Code language: HTML, XML (xml)CSS kód (stilus.css)
p {
color:red;
}
Code language: CSS (css)Eredmény
Minden p-nek pirosnak kell lennie.
Ennek is.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Pár CSS stílusbeállítás
Alább megadok pár stílusbeállítási lehetőséget, amelyeket kipróbálhattok a CSS tesztelgetések során.
- color: (pl.: green;) a szöveg színét állathatjátok be vele
- background-color: (pl.: black;) a háttérszínt lehet beállítani vele
- font-size: (pl.: 22px;) szövegméretet lehet állítani
- text-align: (pl.: center;) szövegigazításra használatos
- margin: (pl.: 15px;) margót ad a szövegeknek
