
A CSS (Cascading Style Sheets) lehetővé teszi, hogy gyönyörű weboldalakat hozzunk létre. Mai cikkünk röviden elmagyarázza, mi a CSS, hogyan alakítja a böngésző a HTML-t DOM (Document Object Model) formába, hogyan alkalmazható a CSS a DOM bizonyos részein, és melyik kódot kell használni, hogy a CSS valóban meg is tudjon jelenni a weboldalon.
Mi a CSS?
Ha figyelmesen kíséred cikksorozatunkat, azt már tudhatod, hogy a CSS egy olyan nyelv, amelynek segítségével meghatározzuk, milyen formában jelenjen meg a dokumentum a felhasználók előtt.
A dokumentum leggyakrabban egy szöveges fájl, mely egy jelölőnyelv segítségével lett felépítve. A leggyakrabban alkalmazott jelölőnyelv a HTML, de olyanokkal is találkozhatunk, mint az SVG vagy az XML.
A dokumentum megjelenítése azt jelenti, hogy a dokumentum hasznos formában van bemutatva a felhasználóknak. A böngészők (például a Firefox, a Chrome vagy az Internet Explorer) úgy lettek megtervezve, hogy a dokumentumokat vizuálisan mutassák be, például egy képernyő, projektor vagy nyomtató segítségével.
Hogyan hat a CSS a HTML-re?
A böngészők CSS-szabályokat alkalmaznak a dokumentumon, melyek segítségével hatnak a dokumentum megjelenítésére. A CSS-szabály a következőkből áll:
Tulajdonságokból, melyeknek értékeik vannak. Ezek segítségével határozzuk meg, hogyan jelenjen meg a HTML-tartalom, például: Azt akarom, hogy az elem a szülő elem szélességének 50%-át tegye ki, a háttere pedig legyen piros.
Szelektorból, mely kiválasztja azt az elemet (vagy elemeket), amelyre szeretnénk alkalmazni a tulajdonságértékeket. Például: A CSS-szabályt a HTML-dokumentum minden paragrafusán alkalmazni akarom.
A stíluslapok által meghatározott CSS-szabályoktól függ, hogyan fog megjelenni a weboldal.
Hogyan működik a CSS?
Ahhoz, hogy a böngészőben megjelenjen a dokumentum, a böngészőnek kombinálnia kell a dokumentum tartalmát a stílusinformációkkal. Egy böngésző két fázisban dolgozza fel a dokumentumot:
A böngésző a HTML-t és a CSS-t DOM formába alakítja. A DOM képviseli a dokumentumot a számítógép memóriájában, és kombinálja a dokumentum tartalmát a stílussal.
A böngésző megjeleníti a DOM tartalmát.
Néhány szó a DOM-ról
A DOM-nak fastruktúrája van. A jelölőnyelv minden eleme, attribútuma és szövege egy DOM-csomót alkot a fastruktúrában. Egy csomót a más DOM-csomókkal való kapcsolata határozza meg. Bizonyos elemek között szülő-gyerek viszony áll fent, némely csomóknak pedig testvéreik is lehetnek. A DOM szerkezetének megértése segít a tervezésben, a debuggolásban és a CSS karbantartásában, mert a DOM az, ahol a CSS és a dokumentum tartalma találkozik.
Hogyan alkalmazható a CSS a HTML-en?
A CSS-t három módon tudjuk alkalmazni a HTML-dokumentumon. Bizonyos módszerek hasznosabbak, mint a többiek, most mindet bemutatjuk röviden.
Külső stíluslapok
A külső stíluslapokról már korábban is volt szó, csak nem ezen a néven említettük őket. A külső stíluslap esetében a CSS egy külön fájlban van megírva, melynek .css a kiterjesztése. Erre a fájlra hivatkozunk a HTML-dokumentum <link> eleme segítségével. Ez talán a legjobb módszer, hiszen elég egyetlen stíluslapot alkalmazni több dokumentum stilizálására, és ha modifikációkra van szükség, elég őket egy helyen elvégezni.
Belső stíluslapok
A belső stíluslapok esetében nincs szükség külső CSS-fájlra – a CSS-t a HTML head <style> elemébe helyezzük. Ez a módszer bizonyos körülmények között különösen hasznos (például amikor olyan CMS-rendszerben dolgozunk, ahol nem tudjuk közvetlenül a CSS-fájlt modifikálni), viszont összességében nem annyira hatékony, mint a külső stíluslapok — a weboldalon a CSS-t minden lapon meg kellene ismételni, és ha változtatásokra van szükség, azokat több helyen is el kellene végezni.
Inline stíluslapok
Az inline stíluslapok olyan CSS-deklarációk, amelyek csak egy elemre vonatkoznak. Ezeket a style attribútum tartalmazza. Ennek a módszernek a használata egyáltalán nem tanácsos, kivéve, ha nincs más választásunk. Az inline stíluslapokat nehéz karbantartani (egy információt akár a dokumentumon belül is többször kell megváltoztatni, ha módosításra van szükség), összekeverik a CSS-információkat a HTML strukturális információkkal, így a CSS nehezen olvasható és értelmezhető. Azzal, hogy a kód speciális részeit szétválasztjuk, jelentősen megkönnyítjük mindenkinek a feladatát, aki a kóddal dolgozik.
Az inline stíluslapok alkalmazása csak olyan esetben lehet hasznos, ha szigorú környezetben dolgozunk, vagy dinamikus tartalmat szeretnénk bemutatni (például egy adminisztrációs felület által feltöltött háttérkép megjelenítése).
Összegzés
A HTML részletes megismerése után megkezdtük utunkat a CSS világába. Mostanra már tisztában vagy a CSS fogalmával, működésének alapjaival, és azt is megtanultad, hogyan kezelik a böngészők a stíluslapokat, illetve hogyan lehet őket összekötni a HTML-dokumentumokkal. A következő cikkünkben folytatjuk a CSS tanulmányozását, és egy kicsit részletesebben is megismerkedünk a CSS-szintaxissal.
Nyereményjáték!
A játék heti kérdése:
Melyik a legjobb módszer a CSS alkalmazására?
A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
Néhány szó rólunk:
Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.