Főoldal > CSS Alapok > Szintaxis és Beillesztés

CSS Szintaxis és Beillesztés

A CSS kód szintaxisa: szelektor, tulajdonság és érték magyarázata

Mielőtt elkezdenénk színezni és tologatni az elemeket a képernyőn, meg kell értenünk, hogyan épül fel egy CSS szabály, és hogyan tudjuk ezt a szabályt összekötni a HTML dokumentumunkkal.

A CSS Szabály Anatómiája

Egy CSS kódblokk (szabály) mindig két fő részből áll: egy Szelektorból (Selector) és egy Deklarációs blokkból (Declaration block).

h1 {
    color: blue;
    font-size: 24px;
}
  • Szelektor (h1): Ez mondja meg a böngészőnek, hogy a HTML dokumentumban melyik elemet (vagy elemeket) akarjuk formázni. Jelen esetben az összes <h1> címsort.
  • Deklarációs blokk ({ ... }): A kapcsos zárójelek között adjuk meg a formázási utasításokat. Egy blokkon belül korlátlan számú utasítás lehet.
  • Tulajdonság (color): Mit akarunk megváltoztatni? (pl. szín, méret, margó).
  • Érték (blue): Milyenre akarjuk megváltoztatni? A tulajdonságot és az értéket mindig kettőspont (:) választja el, a sort pedig pontosvesszővel (;) kötelező lezárni.

Hogyan kössük össze a CSS-t a HTML-lel?

Három különböző módszer létezik a CSS kód beillesztésére. Fejlesztőként pontosan tudnod kell, mikor melyiket szabad használni, mert a rossz választás tönkreteheti a weboldalad betöltési sebességét.

1. Inline CSS (Soron belüli) - KERÜLENDŐ!

Az inline CSS-t közvetlenül a HTML tag style attribútumába írjuk. Nincs szelektor, mert a szabály csak arra az egyetlen elemre vonatkozik.

<h1 style="color: blue; text-align: center;">Ez egy kék címsor</h1>

Miért rossz? Összekeveri a tartalmat a dizájnnal. Ha van 50 darab címsorod, és meg akarod változtatni a színüket pirosra, mind az 50 helyen át kell írnod a kódot. Karbantarthatatlan, és növeli a HTML fájl méretét.

2. Internal CSS (Belső stíluslap)

A belső stíluslapot a HTML dokumentum <head> szekciójába írjuk, egy <style> tag közé. Ez a módszer már használ szelektorokat, de a szabályok csak arra az egyetlen HTML fájlra érvényesek, amibe beleírtuk őket.

<head>
    <style>
        body { background-color: linen; }
        h1 { color: maroon; }
    </style>
</head>

Mikor használjuk? Csak akkor, ha egy egyoldalas (Single Page) weboldalt építesz, vagy ha úgynevezett "Critical CSS"-t (a hajtás feletti tartalom azonnali betöltéséhez szükséges kódokat) akarsz beágyazni a maximális PageSpeed pontszám eléréséhez.

3. External CSS (Külső stíluslap) - A PROFI MEGOLDÁS

A modern webfejlesztés standardja. Létrehozunk egy teljesen különálló fájlt .css kiterjesztéssel (pl. style.css), és ebbe írjuk az összes formázási szabályt. Ezt a fájlt a HTML <head> szekciójában egy <link> taggel hívjuk be.

<head>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

Miért ez a legjobb megoldás?

  • Karbantarthatóság: Egyetlen CSS fájlból vezérelheted egy 10.000 oldalas weboldal teljes dizájnját. Ha átírod a főszínt a CSS-ben, az egész weboldalon azonnal megváltozik.
  • Gyorsítótárazás (Caching): Amikor a látogató megnyitja a főoldaladat, a böngészője letölti a style.css fájlt, és elmenti a memóriájába. Amikor átkattint a kapcsolat oldalra, a böngésző már nem tölti le újra a CSS-t, hanem a memóriából húzza be. Ezzel drasztikusan csökken a szerverterhelés és a betöltési idő.
← Előző lecke Következő lecke: Szelektorok →