HTML & CSS kezdőknek (26. rész): Így működik a hozzáférés a szelektorokkal (1)

Azok a szelektorok határozzák meg, hogy a CSS stílusok hogyan kerülnek hozzárendelésre az HTML elemekhez. Az illesztőkifejezés meghatározásakor először meg kell adni az elem nevét, amelyre a szelektor hivatkozni fog. Az aktuális deklaráció ezután kapcsos zárójelekben történik. Egy deklarációban egy vagy több tulajdonságot lehet megadni. Az általános szintaxis tehát a következőképpen néz ki:

Szelektor {
   Tulajdonság1: Érték;
   Tulajdonság2: Érték;
   Tulajdonság3: Érték;
}

Egy ilyen meghatározással már találkoztatok az előző tutorialban.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Feltétlenül ügyeljetek arra, hogy minden deklarációt pontosvesszővel zárjatok.

Pillantás a rendelkezésre álló szelektorokra

A CSS valóban számos szelektorral rendelkezik, amelyek közül az egyik legfontosabbakat fogom nektek bemutatni. Mert egyértelmű, hogy csak akkor lehet értelmes CSS tulajdonságokat meghatározni, ha az ember tudja kezelni a szelektorokkal való munkát.

A legkönnyebb módja annak, hogy stílusokat rendeljen egy HTML-dokumentumban az Elem-Szelektorral történik.

Az alábbi szintaxis segítségével az összes p elemnek fekete színt rendelünk.

p { 
   color: #009966; 
}

Ha több elemnek szeretnétek ugyanazt a stílust hozzárendelni, az is lehetséges.

Ebben az esetben egyszerűen felsoroljátok a megfelelő elemeket egymás után, vesszővel elválasztva őket.

p, h1,  li { 
   color: #000; 
}

Lehet elemeknek több stílust is hozzárendelni. A stílusokat pontosvesszővel elválasztva kell megadni.

p { 
   color: #000; 
   background-color: red;
}

A fent említett változatok kombinálása is lehetséges.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

A végeredmény így nézhet ki:

Több elemet tartalmazó területek

Gyakran szükség van arra, hogy formázd egy területet, amely több HTML-elemet tartalmaz. Ilyen esetekre az HTML-ben két speciális elem áll rendelkezésre, a span és a div. Ezek az elemek - amúgy ebben a sorozatban is - gyakran előfordulnak.

Egy példa:

<div class="artikel">
  <h1>Színrobbanás</h1>
  <p class="thema">Egy színrobbanás létrehozásának útmutatója <span class="autor">MarkusMelzer</span> által.</p>
</div>

A div és a span közötti különbség az, hogy a div elem kényszeríti az új sort a szövegáramlásban. A span viszont nem generál új sort. A bemutatott példában egy div-terület kerül definiálásra, amelyben egy cím és egy szövegbekezdés található. A szövegbekezdésen belül van egy span-terület.

ID- és osztály-szelektorok

Edig elem-szelektorokat használtunk. Egy ilyen szelektorral az összes h1 címet formázni lehet.

h1 { 
   color: #000; 
   background-color: red;
}

Ez azonban természetesen nem mindig kívánatos. Például mit csináljunk, ha csak egy vagy néhány, de nem az összes h1 címet szeretnénk bizonyos tulajdonságokkal felruházni? Ilyen esetekre a CSS két lehetőséget kínál, az osztály- és az ID-szelektorokat.

Osztállyal a HTML-elemeket osztályattribútumokkal lehet közvetlenül kiválasztani. Az érintett HTML-elemhez meg kell adni az class attribútumot. Az osztálydefiníciók egy ponttal kezdődnek.

Példa:

.piros { 
   color: red; 
}

Ebben a példában a piros osztályt meghatározták. A pirosra állított tulajdonságokat egy HTML-elemhez való hozzáadáshoz a class követi az osztálynév.

<p class="piros">PSD-Tutorials.de</p>

Az ID-szelektor hasonlóan egyszerűen használható. Az ID-szelektort egy dupla kereszttel lehet felismerni.

#topnavi { 
   color: blue; 
};

Ebben a példában a topnavi ID-t határozták meg. De figyelem: egy ID-t ténylegesen csak egyszer lehet hozzárendelni egy dokumentumban. Az egy definiált ID tulajdonság elérésének a következőképpen kell kinéznie:

<div id="topnavi">Itt található a navigáció</div>

Az id attribútumhoz az ID nevet rendeljük hozzá. Ügyeljetek rá, hogy itt a kettőskeresztet ne írjátok be.





A bemutatott adatok egyébként is kombinálhatók egymással. Így például egy HTML elemhez több osztályt is hozzárendelhetünk.

<p class="rot gross">PSD-Tutorials.de</p>

Ebben a példában a szövegbekezdéshez a két osztály, a rot és a gross kerül hozzárendelésre. Ha egy osztályt és egy ID-t szeretnétek megadni, akkor az így néz ki:

<p class="rot" id="navi">PSD-Tutorials.de</p>

Hasonlóképpen lehet elemeket és ID-ket kombinálni. Erről is egy példa:

div.navi { 
   color: blue; 
}

Ez a szintaxis csak a div elemekre alkalmazható navi osztályúak számára. Az ugyanazon navi osztályú p elemek érintetlenek maradnak.

A CSS még egy további módja van a szelektorok kombinálásának. Tekintsük meg a következő szintaxist:

h1 { 
   color: red;
}
em { 
   color: blue; 
}

Ebben a szintaxisban minden 1. szintű címsor piros színűvé válik. Az em elemek pedig kék színt kapnak.

Az előbbi utasítások kombinációjával csak az em elemek lesznek kék színűek, amelyek a h1 elemekben találhatók.

h1 em { 
   color: blue; 
};

Az elemneveket itt vesszők nélkül választjuk el egymástól.

Ez egyébként egy gyakori hibaforrás, amit különösen a CSS kezdők tapasztalnak meg. Ugyanez a szintaxis, amelyben azonban vessző van beállítva:

h1, em { 
   color: blue; 
}

Mit jelent ez a szintaxis? Az összes h1 és em elem érintett lesz. Tehát ez teljesen mást jelent, mint a vessző nélküli szintaxis!

Egy másik fontos szelektor a Univerzális szelektor. Ez lehetővé teszi egy tetszőleges elem kiválasztását. Ennek a szelektornak az XML-ben történő beállítása egy csillag segítségével történik.

* { 
   color: red; 
}

Ezzel a szintaxissal az összes elem piros színűvé válna. Ebben a szelektor esetében ismét figyelembe kell venni néhány szintaxis-különlegességet.

#mainnavi * { 
   color: red; 
}

Ebben a példában a #mainnavi azonosítójú elem összes belső elemének előtér-színe pirosra van állítva. Ez azonban nem vonatkozik magára az elemre.

Ha a Univerzális szelektor az egy deklaráció elején állna, akkor nem lenne szükséges beírni. Így ez felesleges lenne:

* p { 
   color: red; 
}

Ez a szintaxis ugyanazt jelenti, mint a következő:

p { 
   color: red; 
}

A következő tutorialban további szelektorokat fogtok megismerni.