főoldal css szintek-es-rangsoruk

< WebKészítés /> interaktív webszerkesztő tananyagok

Kinézet és tartalom

Korábban említettem, hogy az XHTML igyekszik teljesen szétválasztani a kinézetet a tartalomtól. Miért is olyan fontos ez? Gondoljunk bele! Ha egy címsor színe mondjuk kék és ezt az egész honlapon (pl. 15 oldal) pirosra váltanánk, kénytelenek lennénk egyesével, a HTML kódban 15-ször ezt eljátszani. Itt az első előny: a stíluslapok nem a divatról szólnak! (Női olvasóimtól rögtön elnézést is kérek!) A viccet félretéve: egy külső stílussal az összes oldalra érvényes formázást hajthatunk végre. A későbbi változtatásokat pedig elég ebben az egy fájlban elvégezni. A második előny pedig ennek fordítottja: egy oldalra akár több stílust is alkalmazhatunk. (Lásd: skin cserélés)

Szintek és rangsoruk

A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt (lépcsőzetes) stíluslapok. Mi a CSS 2.1-et fogjuk használni, ez a 2-höz képest néhány hibajavítást tartalmaz. (A CSS 3 jelenleg fejlesztés alatt áll, de rá is kitérünk később.) Szóval, miért is rangsoroltak? Tegyük fel, hogy egyszerre több stíluslapot is "ráhúzunk" oldalunkra. Ellentmondás esetén melyik fog érvényesülni? A legprimitívebb, mégis általános szabály, hogy mindig az, amelyik legközelebb áll a formázandó elemhez! A dokumentum tetejétől lefele haladva mindig az utoljára betöltött stílus fogja felülírni ütközések esetén a korábbiakat. Jöjjön a profi megfogalmazás. Három szintet különböztetünk meg a CSS-ben: külső, dokumentum szintű és belső. A külső stíluslapok különálló fájlok, melyek több HTML-re is érvényesek. Behívásuk a <link rel="stylesheet" type="text/css" href="URL" /> sorral történik a <head> </head> részben. A dokumentumszintűek egy-egy HTML-ben vannak rögzítve még mindíg a fejlécben, így csak ezen egy oldalra érvényesek. Őket a <style type="text/css"> ... </style> közt kell elhelyeznünk. A belső stíluslapok már csak egyetlen Tag-ra vonatkoznak. Behívni őket a style="" attribútummal lehet. Mi történik, ha egyiket sem használjuk? A böngészőnek is van saját stíluslapja, amit néhány böngésző esetén a felhasználó akár saját stíluslappal is kiegészíthet. Ekkor ezek lesznek mérvadók. Hogy összegezzünk, újra elindulok a leggyengébbtől a legerősebbig: böngésző alapértelmezés < felhasználói < külső stíluslap < dokumentum szintű < belső (szövegközi).

Szintaktika

A külső stíluslapokat egy szöveges fájlban kell megírni hasonlóan a HTML-hez, amit ".css" kiterjesztéssel kell elmenteni. A stíluslap fájlok legelső sorába szokás a karakterkódolásra vonatkozó információt írni. Itt is az UTF-8 kódolást ajánlom, mint a HTML esetében. Ez a következőképpen néz ki: @charset "utf-8"; (Ezt dokumentumszinten ne tegyük ki!) Ezután az egész stíluslap nem más, mint kijelölők (selector) és hozzájuk tartozó meghatározásblokkok (declaration) sora. A meghatározásblokkot kapcsos zárójelek { } határolják. Ennek tartalma két fő részből áll: tulajdonságból (property) és értékből (value). A tulajdonságok után kettőspontot kell tennünk (:), az értékek után pedig pontosvesszőt (;). Lássunk is egy mintát:

@charset "utf-8";

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

Láthatjuk, hogy a szintaktika eléggé eltér a HTML-étől. Ezért szokás elővigyázatosságból a dokumentum szintűeket egy HTML megjegyzés segítségével elrejteni a régebbi, CSS-t nem támogató böngészők elől így: <style><!-- ... --></style>. A CSS megjegyzések ebből adódóan nem az előző, hanem a C nyelvekből ismert /* és */ közé tesszük, mi vonatkozhat akár több sorra is. XHTML-ben pedig gondolnunk kell a szigorú XML szintaktikára. Ez esetben úgynevezett karakteres adatoknak (Character DATA) álcázzuk a nem XML szabványú részeket. Viszont arra is gondolnunk kell, hogy a stíluslap se értse félre a CDATA meghatározást, így CSS kommentbe kell tennünk ezt a részt így: <style>/* <![CDATA[ */  ...  /* ]]> */</style>. Fontos, hogy e két óvintézkedést csak dokumentumszintű stíluslapokba tegyük! A CSS attól függően lehet kis/nagybetű érzékeny, hogy milyen nyelvhez kapcsolódik. (XHTML esetén csak kisbetűket használjunk!)

KódTesztelő a gyakorláshoz

Majd' elfelejtettem! A belső stíluslapok pedig kis módosítással, de ugyanígy néznek ki. A különbséget az adja, hogy itt kijelölőkkel nem kell törődnünk, hiszen csak egy címkére alkalmazzuk. Lássunk róla is mintát: style="tulajdonság1:érték1; tulajdonság2:érték2; ...". Egy utolsó csavarként pedig rombadöntöm a szintekről tanultakat. Ha bármely érték után szóközzel, de még a ; előtt megadjuk az !important szót, az adott érték lesz érvényben függetlenül a szintjétől. Több !important szabály esetén pedig újra a szintek fognak dönteni.

Ugrás az oldal tetejére!

Ugrás a következő oldalra!

0 hozzászólás