Hogyan működik a CSS?

Hogyan működik a CSS?

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!

 

Rovatunk elsődleges célja, hogy közelebbről is bemutassa a legismertebb webtechnológiákat. Azok között az olvasók között, akik minden héten követik rovatunkat, azaz velünk tanulják a programozás alapjait és kitöltik a feladatsort, a sorozat végén egy laptopot sorsolunk ki.

 

A játék heti kérdése:

Melyik a legjobb módszer a CSS alkalmazására?

1. Inline stíluslapok
2. Külső stíluslapok
3. Belső stíluslapok 
 

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.

Szeretne értesülni, ha új cikk jelenik meg Számtek rovatunkban? Iratkozzon fel értesítőnkre!

E-mailben értesíteni fogjuk Önt az új cikkekről. Feliratkozáshoz kérjük adja meg a nevét és az e-mail címét.

Hozzászólások

Kapcsolódó cikkek

Hogyan működik a CSS?
Számtek
  • Erdsoft
  • 2019.10.17.
  • LXXIV. évfolyam 42. szám
Hogyan működik a CSS?
Számtek
  • Erdsoft
  • 2019.10.03.
  • LXXIV. évfolyam 39. szám
Facebook

Támogatóink