
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. Rengeteg stílusbeállítás létezik, 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.
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.