Hogyan működik a CSS?

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

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

Az oldal sütiket használ, hogy személyre szabjuk a tartalmakat és reklámokat, hogy működjenek a közösségi média funkciók, valamint hogy elemezzük a weboldal forgalmát. Bővebben a "Részletek mutatása" gombra olvashat.
Az oldal sütiket használ, hogy személyre szabja az oldalon megjelenő tartalmat és reklámokat.