Szintaktika - Stíluslapok lépcsőzetessége

A CSS szabvány által definiált stíluslapok legfontosabb jellemzője a lépcsőzetesség. A szabvány a nevét is innen kapta: cascading = lépcsőzetes. (A „rangsorolt” magyarra fordítást is gyakran használják a szakirodalomban.) A stíluslapok alkalmazásának számos előnye van:

• A dokumentum forráskódja áttekinthetőbb, mert szétválasztható a tartalom megadása a megjelenítési stílus definiálásától.
• Több HTML dokumentum is hivatkozhat egy stíluslap fájlra, így egyetlen fájl átírásával módosítható akár egy nagy portál összes oldalának megjelenítése.
• Kisebb HTML fájlméretek érhetőek el, tehát gyorsabb lehet az oldalak letöltése és megjelenítése.
• Lényegesen több stílusmegadási lehetőség közül választhatunk, mint amikor – még a CSS megjelenése előtti időkben – a HTML formázó utasításait kellett használni.

A weblapod elkészítése során a stílusok definiálásakor az alábbi „lépcsők” közül választhatsz:

1. Ha egy HTML elem valamelyik megjelenítési tulajdonságát nem definiálod, akkor az a böngésző alapbeállítása szerinti értéket fogja felvenni. Számos esetben ez a legjobb megoldás annak ellenére, hogy így részben elveszíted a kontrollt a weblapod megjelenítése fölött. A látogatóidnak ez azért lehet előnyös, mert így számukra szokásos módon jelenhetnek meg egyes elemek, például a linkek.

2. Külső stíluslapnak hívják azt, amikor a megjelenítési információk egy külön szövegfájlban kerülnek elhelyezésre. Erre a fájlra egy hivatkozás mutat a HTML dokumentum fejlécében, például:

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

   Az @import utasítás alkalmazásával is csatolható külső stíluslap egy dokumentumhoz.

   <style type=”text/css”>
      @import url("stiluslap1.css");
      h1 {color: #0000ff}
      p {color: #0000ff}
   </style>

   Az @import utasításnak meg kell előznie az összes stílus deklarációt a style elemen belül.

   A gyakorlatban többnyire a link elemet szokták használni külső stíluslap csatolására.

   A href attribútum (illetve a második példában az url tulajdonság) értékeként szereplő elérési útvonal megadására ugyan azok a szabályok vonatkoznak, mint a linkek URL-jére.

   Egy HTML dokumentumhoz több külső stíluslap is csatolható.

3. A HTML dokumentumok fejlécében dokumentum szintű stíluslapokat lehet definiálni. Ebben az esetben a style elemen belül lehet megadni a megjelenítésre vonatkozó információkat, amelyek a teljes HTML dokumentumra vonatkoznak. (A dokumentum szintű stíluslapot a szakirodalomban beágyazott stíluslapnak is szokták nevezni.)

4. Egy dokumentum belsejében akár egyetlen HTML elemhez is csatolhatsz stílusinformációkat a style attribútum értékeként. Ezt belső stíluslapnak hívjuk. (Szokták szövegközi vagy soron belüli stílusnak is nevezni.)

Kerülendő a dokumentum szintű és a belső stíluslapok használata, hiszen csak a külső stíluslap fájl alkalmazása biztosíthatja az összes fent felsorolt előnyt. A honlap gondos megtervezése esetén általában nincs szükség dokumentum szintű illetve belső stílusmegadásra. Természetesen előfordulhat, hogy egy oldalnak a többitől eltérő megjelenésűnek kell lennie, ilyenkor alkalmazható a dokumentum szintű stíluslap, illetve belső stíluslap használata is indokolt lehet, ha egy stílusdeklarációt egyetlen fájl egyetlen HTML elemére kell megadnunk. Ilyen esetekben nem lenne célszerű a külső stíluslap fájl áttekinthetőségét rontani azzal, hogy „egyszer használatos” stílus definíciókkal bővítjük annak tartalmát.

Rangsor a stíluslapok között

Ha egy HTML elem valamelyik tulajdonságára több stíluslap is beállít – egymástól különböző – értékeket, akkor az fog érvényesülni, amelyik a legközelebb van a formázott elemhez. Tehát a böngésző alapbeállítása csak akkor érvényesül, ha egy tulajdonság egyébként sehol sincs megadva. A külső stíluslapot felülírhatja a dokumentum szintű stíluslap, a belső stíluslap pedig bármilyen korábban megadott értéket módosíthat.

Stíluslapok alapvető szintaktikája »