CSS alapok - Stíluslapok működése

A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt stíluslapok. A stíluslapot egy szöveges fájlban kell megírni, amit .css kiterjesztéssel kell elmenteni.

Nézze meg ezen a példán keresztül, hogyan működnek a stíluslapok!

Karakterkódolás beállítása

A stíluslapfájl legelső sorába ajánlott a karakterkódolásra vonatkozó információt írni. Itt is az UTF-8 kódolást ajánlom, mint a HTML esetében. Ekkor így kell kezdődnie a stíluslapnak:

@charset "utf-8";

Kijelölők, tulajdonságok, értékek

Ezután az egész stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből (value).

@charset "utf-8";

h1 {
color: red;
}

Ebben az egyszerű stíluslapban a h1 címke a kijelölő (selector), a color: red; sor pedig a meghatározás, ezen belül a color a tulajdonság (property), a red pedig ennek a tulajdonságnak az értéke (value). Általánosan:

@charset "utf-8";

kijelölő {
    tulajdonság1: érték1;
    tulajdonság2: érték2;
    tulajdonság3: érték3;
    ...
}

A tulajdonság megnevezése után kettőspontot ( : ) kell írnunk, majd következik az érték, ami után pontosvesszőt ( ; ) kell tennünk.

A kijelölő egy címkét jelöl ki a HTML dokumentumban, és erre a kijelölt címkére vonatkozik a formázása.

CSS kommentek

HTML megjegyzést vagy kommentet a  jelek közé írhatunk. CSS-ben pedig a /* és a */ jelek közé. Egy megjegyzés több sort is átfoghat. A megjegyzéseket nem veszi figyelembe a böngésző, semmilyen hatással nincsenek a kinézetre, két dolgot szolgálnak:

Hosszabb stíluslapokhoz érdemes megjegyzéseket írni a megfelelő helyre, hogy ha később elővesszük, akkor tudjuk, mit miért írtunk. Ez főleg akkor fontos, ha nem csak magunknak készítjük a stíluslapot, hanem másnak is meg kell értenie.
Teszteléskor hasznosnak fogjuk találni a megjegyzést. Ideiglenesen megjegyzések közé tehetünk kódrészleteket, amikre éppen nincs szükség.

@charset "utf-8";

/*Ez egy megjegyzés.*/

h1, h2, h3 {
color: red; /*Ez egy megjegyzés.*/
}/*Ez
egy
többsoros megjegyzés.*/

Stíluslap beágyazása

Az elkészült stíluslap bármennyi HTML oldalhoz használható egyidejűleg. Viszont ahhoz, hogy a stíluslap hatással legyen rá, össze kell kötni a HTML fájlt és a stíluslapot. Ezt háromféleképpen tehetjük meg:

1. Külső stíluslapok
Ha egy HTML fájlra alkalmazni kívánunk egy stíluslapot, akkor a fejrészbe (<head>...</head>) kell írni a következőt, ha a két fájl azonos mappában van:

<head>
<link href="stiluslapneve.css" rel="stylesheet" type="text/css">
</head>

A rel és a type attribútumnak mindig ez kell hogy legyen az értéke, ha stíluslapot ágyazunk be, a href-nek pedig a stíluslap elérési útvonalát kell tartalmaznia a HTML fájlhoz képest. Ez a leggyakrabban alkalmazott megoldás a stíluslapok beágyazására, ezt a sort minden weboldalunk kódjába bemásolhatjuk a href-nek a megfelelő értéket adva.

2. Belső stíluslapok
Olyan stílusok megadásakor érdemes használni ezt a módszert, aminél tudjuk, hogy csak egyetlen weboldalhoz fogjuk felhasználni. Ugyanis ha egy stíluslapot már kettő, vagy több weboldalhoz is felhasználunk, akkor ajánlott külön stíluslapban tárolni őket, és a fenti 1. módszerrel társítani a weboldalhoz. A <head>...</head> részbe kell beírni a stíluslapot a <style>...</style> címkék közé.

<head>
<style type="text/css">

  h1 {

      color: red;

      text-align: center;

  }

  

  h2 {

      color: blue;

      text-decoration: underline;

      margin-bottom: 1em;

  }

</style>
</head>

3. Szövegközi stílusok
A style attribútumot bármelyik címkén belül használhatjuk. Ezt akkor érdemes használni, ha egy stílus csak egyszer, vagy nagyon kevésszer fordul elő a weboldalon, és ezért nem akarjuk külön kiírni a külső stíluslapban.

Ha mondjuk alkalmaztuk a fenti egyszerű stíluslapot az oldalunkra, és minden címsor piros lett és középre igazított, de mi egyetlen címsornál azt szeretnénk, ha mégis kék és jobbra igazított lenne, akkor ezt így adhatjuk meg a kívánt címsornál (a szövegközi stílus felülbírálja az összes többi stílust, erről később szó lesz):

<h1 style="color: blue; text-align: right;">

A rangsor

A CSS a rangsorolt stíluslapokat jelenti magyarul. Az elnevezés abból származik, hogy egyetlen HTML oldalhoz egyszerre több külső és belső stíluslapot is hozzárendelhetünk, és közben még szövegközi stílusokat is alkalmazhatunk. Emlékeztetőül:

Külső stíluslapot használunk akkor, amikor egy CSS fájlt hozzákapcsolunk egy HTML oldalhoz.
Belső stíluslapot használunk akkor, amikor a stílusdefiníciókat magába a HTML oldal fejrészébe (<head>...</head>) írjuk.
Szövegközi stílust minden címkéhez megadhatunk a style attribútummal.

Tehát egy oldalhoz egyszerre több külső stíluslapot is csatolhatunk, és közben még használhatunk belső és szövegközi stílusokat is ugyanabban az oldalban. Ez akkor lesz érdekes, ha a különböző stíluslapok ugyanarra a címkére írnak elő ugyanolyan tulajdonságokat. Ekkor a böngészőnek el kell tudnia dönteni, hogy melyik stílus végezze a formázást. Ezzel kapcsolatban általános szabályként elmondható: Mindig a formázandó HTML kódhoz legközelebbi stíluslap végzi a formázást.

Tegyük fel, hogy egy oldalhoz 3 külső stíluslapot csatolunk, és használunk belső és szövegközi stílusokat is. Ha ezek a különböző stíluslapok ugyanarra a címkére írnak elő formázást, akkor végül az adott címkéhez legközelebbi stílus fog rá hatással lenni. Ez azt jelenti, hogy a böngésző elkezd a HTML kódban fentről lefelé haladni, és mindig alkalmazza a talált stílusokat a megfelelő címkékre. Először olyanná fogja formázni az oldalt, ahogyan a forrásban legelsőnek megadott külső stíluslapban találja. Utána folytatja a formázást a forrásban másodikként megadott stíluslappal, ez a stíluslap át fogja írni azoknak a címkéknek a tulajdonságait, amiket az előtte lévő első stíluslap is megadott. A böngésző ugyanígy jár el a harmadikként megadott külső stíluslap, és a belső stíluslap esetén is. Végül, egy címkére megadott szövegközi stílus felül fogja írni az összes előtte lévő stílust.

A formázásokra azonban még két másik stíluslap is hatással van: a böngésző alapértelmezett stíluslapja, és a felhasználó által beállított stílusok.

A böngésző is stíluslapokat használ egy olyan oldalhoz is, amihez mi semmilyen stílust nem adtunk meg. A böngésző ebben a stíluslapban olyanokat definiál, hogy például a h1 címsor vastagon és nagyobb betűmérettel jelenjen meg; a linkek kékek és aláhúzottak legyenek stb. Érhető módon ezt a stíluslapot akármelyik más felül fogja írni, hiszen ez az alapértelmezett megjelenést írja le a böngésző által.

A legtöbb böngészőben megadhatunk saját magunk által írt stíluslapot, ami alapján a böngésző alapértelmezettként meg fogja jeleníteni az oldalt. Ebben például nagyobb szövegméretet tudunk megadni. Azonban a saját stíluslapot nagyon kevesen állítják be, inkább a szöveg méretét szokták csak beállítani egy böngészőben.

Az alábbi ábra az imént elmondottakat mutatja be. Az ábra olyan sorrendben jelzi a stílusokat, amilyen sorrendben a kódban előfordulnak, és amilyen közel állnak a formázandó címékhez. A lentebb, azaz a formázandó címkéhez közelebb álló stílus felülbírálja a hátrébb állót:

Böngésző alapértelmezett stíluslapjai.

↓

Felhasználó beállításai.

↓

Külső stíluslap

↓

Beágyazott stílus

↓

Szövegközi stílus

↓

Formázandó címke

Ha a felhasználó beállította egyes értékekre, hogy felülbírálják a weboldalak által megadott stílusokat, akkor így módosul a sorrend: (Ez sokkal ritkább eset)