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.

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.

>> 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.

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.

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

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!

További leckék