Megfigyeljük, hogyan alkotnak a tulajdonságok és az értékek deklarációkat, hogyan lesz több deklarációból deklarációs blokk, illetve hogyan alkotnak a deklarációs blokkok és szelektorok teljes CSS-szabályokat. A cikket olyan elemekkel zárjuk, mint amilyenek a megjegyzések és a whitespace.

A CSS építőelemei
 

A CSS két alap-építőelemből áll:

Tulajdonságok: Emberek által olvasható azonosítók, melyek arra a stíluselemre utalnak, amelyet meg szeretnénk változtatni (például a betűtípus, a szélesség vagy a háttérszín).

Értékek: Minden tulajdonságnak értéke van, mely meghatározza, hogyan szeretnénk megváltoztatni az elemet (milyenre szeretnénk cserélni a betűtípust, a szélességet vagy a háttérszínt).

A tulajdonság és az érték kombinációja a CSS-deklaráció. A CSS-deklarációkat CSS deklarációs blokkokba helyezzük. A CSS deklarációs blokkokat szelektorokkal kombinálva kapjuk meg a CSS-szabályokat.

CSS-deklarációk
 

A CSS-tulajdonságok értékeinek pontos beállítása a CSS-nyelv alapfunkciója. A CSS-motor kiszámolja, hogy egy-egy deklarációt az oldal melyik elemére kell alkalmazni annak érdekében, hogy a weboldal megfelelően legyen stilizálva. Fontos megjegyezni, hogy a CSS-ben a tulajdonságok és az értékek esetében is figyelni kell a kis- és nagybetűk alkalmazására. A tulajdonság és az érték kettősponttal (:) van elválasztva.

A következő példa egy CSS-deklarációt mutat be:

background-color: red

A “background-color” (háttérszín) a tulajdonság, a kettőspont választja el a két entitást, a “red” (piros) pedig az érték.

A CSS több mint 300 különféle tulajdonságot ölel fel, a különböző értékek száma pedig végtelen. Nem kombinálható minden tulajdonság minden értékkel — minden tulajdonságnak megvannak a specifikus értékei.

CSS deklarációs blokkok
 

A deklarációkat blokkokba csoportosítjuk, a deklarációcsoportokat pedig kapcsos zárójelek ({}) közé helyezzük.

Minden deklarációt a blokkon belül pontosvesszővel (;) kell elválasztani, máskülönben a kód nem fog működni (legalábbis nem helyesen). A blokk utolsó deklarációja után nem szükséges kettőspontot tenni, viszont ajánlott, mert így biztosan nem feledkezünk meg róla, ha esetleg később bővítenénk a blokkot.

Így fest egy CSS deklarációs blokk:

{

     background-color: red;

     background-style: none

}

A “background-color” és a “background-style” a deklarációk, a “red” és a “none” pedig az értékek. A két deklarációt pontosvessző választja el.

CSS-szelektorok és -szabályok

Még mindig hiányzik egy fontos részlet: hogyan tudjuk meghatározni, hogy a deklarációs blokkok melyik elemre érvényesek? Ehhez az szükséges, hogy minden blokk elé helyezzünk egy szelektort, mely az oldal egy meghatározott elemére utal. A szelektor és a deklarációs blokk alkotja a CSS-szabályt.

Mutatunk erre is egy példát:

div p, #id:first-line {

                  background-color: red;

                  background-style: none

       }

A deklarációs blokk már ismerős, az előtte elhelyezkedő elem pedig a szelektorok egy csoportja. Ne aggódj, a szelektorokról még lesz szó, és ahogy egyre tapasztaltabb leszel, egyre világosabb lesz a szerepük.

CSS-statements
 

A CSS-szabályok a stíluslap fő építőelemei — ez a leggyakoribb típus a CSS-ben. Időnként azonban másféle blokkokkal is találkozhatunk. A CSS-szabályok csak egy típusát alkotják a CSS-statementeknek (CSS-állításoknak). További típusok az at-szabályok és a beágyazott állítások. Ezekről jövőbeli cikkeinkben több szó is esik majd.

A CSS olvashatósága

Amint azt megfigyelhetted, a CSS-szintaxist nem túl nehéz megírni: szabályokat hozunk létre, és ha nem jól írjuk meg őket, egyszerűen csak ignorálva lesznek. Arra azonban érdemes odafigyelni, hogy néhány jó gyakorlatot követve olvashatóvá és könnyen karbantarthatóvá tegyük a CSS-kódunkat.

White space
 

A white space, vagyis az üres hely valódi szóközöket, táblázatok és sorok közötti üres helyeket jelöl. Az üres helyek teszik lehetővé, hogy a stíluslap könnyen olvasható legyen.

Ahogy a HTML esetében, a böngészők a CSS-nél sem veszik figyelembe az üres helyeket — ezek csak arra valóak, hogy áttekinthetőbb legyen a dokumentum.

Az üres helyekre akkor kell figyelni, ha a tulajdonságok és az értékek körül helyezkednek el. A margin: 0 auto például helyes, a margin: 0auto (szóköz nélkül) viszont nem egy érvényes deklaráció.

Megjegyzések

Ahogy a HTML esetében is, a CSS-kódolás során is arra biztatunk, hogy írj megjegyzéseket, melyek segítenek megérteni a kód működését, ha esetleg hónapokkal később visszatérnél rá, vagy ha valaki más fog dolgozni a kódoddal. A megjegyzések akkor is hasznosak, ha tesztelés céljából szeretnéd ideiglenesen „kikapcsolni” a kód egy részét. Ez főleg akkor jó, ha szeretnéd kiszűrni a hibákat.

Összegzés: Cikkünk végére érve tisztáztuk a CSS-szintaxis alapjait, melyek feltétlenül szükségesek a stíluslap működéséhez. Olyan elemeket is bemutattunk, amelyek olvashatóbbá teszik a dokumentumot. Következő cikkünkben folytatjuk az ismerkedést a CSS-szel.

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:

Mi a CSS-deklaráció?

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.