HTML stílus, stíluslap és CSS használata, avagy HTML style

Ebből a cikkből ingyen megtanulhatsz mindent a HTML stílusbeállításokról, illetve a CSS stíluslapok csatolásáról, HTML-el való összekapcsolásáról.

0
HTML stílus, stíluslap és CSS használata, avagy HTML style cikk nyitóképe

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.

Tartalomjegyzék

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.

WordPress bővítmények

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.