A stílusok megadásánál meghatározhatjuk, hogy a HTML TAG-ek mely körére legyen érvényes a stílus. Ezt kijelölésnek hívjuk (SELECTOR). Az alábbi lehetőségek a leggyakrabban használhatók.
- Az összes megadott bizonyos típusú tag-re (TYPE SELECTOR): tag_neve
- Egy osztály névvel ellátott tag-re (CLASS SELECTOR): .osztalynev
- Több osztály legyen érvényes egy TAG-re
- Egy egyedi azonosítóval (ID SELECTOR) ellátott TAG-re: #azonosito
- Felsorolom azokat a selectorokat amelyekre szeretném (GROUP OF SELECTORS): kijelolo1, kijelolo2, ....
- Az egér a TAG felett vagy az A tag további lehetőségei: hover, link, ...
-
A fenti kijelöléseket pontosan úgy kell használni, ahogy leírtuk, mert a böngészők a hibás kijelöléseket egyszerűen csak átugorják, de hibaüzenet nem lesz.
-
Ha belezavarodunk a szintaktikába, akkor a böngészőkben lévő hibakereső programok jó szolgálatot tesznek.
-
Aszelektorok összes lehetőségét az alábbi oldalon találod meg: https://www.w3schools.com/cssref/trysel.asp
1. Összes megadott bizonyos típusú tag-re
Ha azt szeretnénk, hogy az összes <p> tagre érvényes legyen egy síluselem, akkor az alábbi kódot kell használnunk:
p {
color: #FFFF00;
font-size: 16px;
}
A fenti példában minden paragrafus (bekezdés) módosított színnel és 16 pixel méretű betűkkel lesz megjelenítve, Ezt a fajta jelölést akkor használjuk, hogyha egy általában használt típushoz akaruk rendeni jellemzőket. Ilyen például a H1...H6 tag-ek, a P tag és ehhez hasonló általánosan használt tag-ek.
Ilyen módon tudjuk egy weboldal betűméretét is állítani:
body {
font-size: 16px;
}
Ebben az esetben a teljes weboldal minden betűje 16px magas lesz.
Figyelem!
- A jelölő maga a TAG elnevezése!
2. Egy osztály névvel ellátott tag jelölése:
.elso_osztaly{
height: 22px;
width: 30px;
}
<p class="elso_osztaly">tartalom</p>
Minden TAG, amelynek a class parametere tartalmazza az "elso_osztaly" osztályt 22px magas lesz és a szlessége 30px,
3. Egy tag több osztály
A különböző osztályokhoz tartozó stílusdeklarációkat együttesen is lehet alkalmazni, hogyha a TAG class paraméterében felsoroljuk az osztályok neveit. Az alábbi stílusdeklarációban egyszer beállítottunk egy méretet, míg a másik deklarációban belső margót és lekerekített sarkú keretet állítottunk be.
.meret{
height: 22px;
width: 30px;
}
.keretek{
padding: 5px;
border: solid red 1px;
border-radius: 5px;
}
Az HTML kódban lévő DIV-ek közül csak a harmadik lesz mind a két osztály szerint formázva.
<div class="meret">Első keret</div>
<div class="keretek">Második keret</div>
<div class="meret keretek">Harmadik keret</div>
Tehát, hogyha a class parameter osztályneveit szóközzel elválasztva felsoroljuk, akkor a külön-külön megadott stíluselemek egyszerre lesznek érvényesek a tag-re.
Akkor célszerű ilyet használni, ha a weboldalon van két féle formázás, amit sok helyen akarunk használni és egy helyen mind a két módot használni akarjuk. Célszerű persze a stílusdeklarációkban egymástól különböző tulajdonságokat beállítani, mert ha vannak közös tulajdonságok, akkor a sorban az utolsó felülírja a korábbit.
4. Egyedi azonosítóval (ID SELECTOR) ellátott TAG-re
Ha a weboldalon csak egy-egy TAg-et akarunk más formátummal ellátni, akkor célszerű használni azt, hogy a TAG-nek egyedi azonosítót, ID-t adunk és a stílusdefinÍciónál arra hivatkozunk.
<div id="Elso" class="meret">Első keret</div>
<div id="masodik" class="keretek">Második keret</div>
<div id="harmadik" class="meret keretek">Harmadik keret</div>
Ebben a példában az első keretben a tartalom kék lesz, a második keretben zöld, míg a harmadikban sárga...
.meret{
height: 22px;
width: 30px;
}
.keretek{
padding: 5px;
border: solid red 1px;
border-radius: 5px;
}
#elso{
color: blue;
}
#masodik{
color: green;
}
#color{
color: yellow;
}
A fenti példában az első keretben a tartalom kék lesz, a második keretben zöld, míg a harmadikban sárga...
5. Felsorolom a selectorokat, amelyekre legyen érvényes a stílusdeklaráció
.meret{
height: 22px;
width: 30px;
}
.keretek{
padding: 5px;
border: solid red 1px;
border-radius: 5px;
}
#elso{
color: blue;
}
#masodik{
color: green;
}
#color{
color: yellow;
}
#elso, #masodik, .meret {
background-color: #556677;
}
Ebben a példában a korábbi dobozokból az elso és a masodik ID-jű doboz, továbbá a mérettel megjelölt osztály háttere lesz a megadott színű.
6. Az egér a TAG felett és az A tag lehetőségei
Egy oldalon való böngészés során gyakran érdekes lehet (főleg az A TAG esetén), hogy jelezzük az oldalon, hogy hol van az egér. Erre ad lehetőséget az eddigi jelölők kiegészítése a :hover kulcsszóval. Ez a lehetőség minden TAG-re csak a HTML5 és CSS3 óta van meg, korábban csak az A tag esetén lehetett használni.