Ahhoz, hogy a HTML-oldalunkon a különböző elemeket elérhessük különböző szelektorokat használhatunk. A következőkben ezeket mutatjuk be, különböző példákon keresztül.
Univerzális szelektor segítségével olyan CSS-szabályok írhatók, amelyek minden egyes HTML-elemre vonatkoznak. Így könnyedén adhatunk globális stílusjegyeket a formázandó weblaphoz. Az univerzális szelektort egy * (csillag) testesíti meg.
* {
margin:0; /* margó lenullázása */
padding:0; /* kitöltés lenullázása */
}
p {margin:10px}
A típus szelektorral egy adott elemtípust határozhatunk meg. Például megcímezhetjük az összes bekezdést, címsort, listaelemet stb.
h1 {color:blue}
Szelektor leszármazott elemre
Ha egy HTML-elem leszármazottaihoz szeretnénk stílust hozzárendelni, akkor egy speciális szelektorlistát kell alkalmazni, amelyben a szelektorokat szóközök választják el. Ha a listában egy szelektor megelőz egy másikat, akkor az előbb szereplő szelektor a később szereplő szelektor ősét jelenti. Fontos, hogy a szelektorlistában egymást követő szelektorok nem feltétlenül egymás közvetlen gyermekei illetve szülei. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
Minta
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Listák egymásba ágyazása, CSS megadással</title>
<meta charset="utf-8">
<style type="text/css">
li {
color:green;
}
ul li li {
color:blue;
font-style:italic;
}
</style>
</head>
<body>
<p>A legnépesebb országok listája:</p>
<ul>
<li>Kína <ul>
<li>A világ népességének 19,15 %-a</li>
</ul>
<li>India <ul>
<li>A világ népességének 17,2 %-a</li>
</ul>
<li>Amerikai Egyesült Államok <ul>
<li>A világ népességének 4,47 %-a</li>
</ul>
</ul>
</body>
</html>
Ha azt szeretnénk kifejezni, hogy az egyik szelektor a másik gyermeke, akkor a szelektorlistában a szelektorokat > jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Gyermek példa</title>
<style type="text/css">
body > p {background: yellow;}
</style>
</head>
<body>
<p>Ez a bekezdés gyermeke a body tagnek, ezért a háttere sárga színű.</p>
<div>
<p>Ez a bekezdés nem gyermeke a body tagnek.</p>
</div>
</body>
</html>
Szelektorlistával lehetőségünk van közvetlen testvérségi viszony kifejezésére is. Ekkor a listában levő szelektorokat + jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Közvetlen testvér példa</title>
<style type="text/css">
/*Azoknak a bekezdéseknek, amelyeket megelőz egy közvetlen bekezdés testvérük, zöld lesz a hátterük.*/
p + p {background: lightgreen;}
</style>
</head>
<body>
<p>Első bekezdés.</p>
<p>Második bekezdés.</p>
<p>Harmadik bekezdés.</p>
<div>
<p>Negyedik bekezdés.</p>
</div>
<p>Ötödik bekezdés.</p>
<p>Hatodik bekezdés.</p>
<p>Hetedik bekezdés.</p>
</body>
</html>
Az általános testvérségi viszony kifejezésére is van lehetőség szelektorlistával. Ekkor a szelektorokat ~ jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Általános testvér példa</title>
<style type="text/css">
/*Azoknak a bekezdéseknek, amelyeket megelőz egy közvetlen bekezdés testvérük, zöld lesz a hátterük.*/
p ~ p {background: lightgreen;}
</style>
</head>
<body>
<p>Első bekezdés.</p>
<p>Második bekezdés.</p>
<p>Harmadik bekezdés.</p>
<div>
<p>Negyedik bekezdés.</p>
</div>
<p>Ötödik bekezdés.</p>
<p>Hatodik bekezdés.</p>
<p>Hetedik bekezdés.</p>
</body>
</html>
Osztályokra példa
z előző példákban láttuk, hogy az elemeket a HTML-oldalban betöltött struktúra alapján megcímezhetjük, de mi a helyzet akkor, ha nem a struktúra, hanem más szempont szerint szeretnénk az elemeket elérni? Mondjuk az általunk fontosnak tartott elemeket ki szeretnénk emelni? Erre lesz jó az osztályok használata.
A HTML-elemeinket a class attribútummal kiegészítve és annak értéket adva osztályba sorolhatjuk.
Forráskód
1
<p class="fontos">Bekezdés szövege</p>
Az így definiált osztályokra hivatkozhatunk szelektorral, ezáltal minden osztályhoz egységes stílus rendelhető.
Az osztályszelektor többféle módon megadható, a szintaxis a következő:
A szelektort az elem.osztály alakban, azaz az elemet annak osztályától egy ponttal elválasztva adhatjuk meg. Ekkor a szelektor az összes adott osztályba tartozó elemre illeszkedni fog.
A szelektorból elhagyható az elem neve. Ekkor a szelektor alakja: .osztály, és az összes adott osztályba tartozó elemre illeszkedik, az elemtípustól függetlenül. Vagyis ha készítünk egy általános (.fontos) osztályt, amelyben beállítjuk, hogy a szöveg pirossal jelenjen meg, akkor az osztályt egyaránt használhatjuk a p, span, h1, stb. tageknél, míg a p.fontos szelektorban megadott szabályok, csak az adott osztályba sorolt bekezdésekre (p elemekre) lesznek érvényesek.
Fontos tudnunk azt is, hogy az elemeket egyszerre több osztályba is besorolhatjuk!
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Osztály példa</title>
<style type="text/css">
p {padding:5px;margin:10px;}
.fontos {color:red;}
p.szegely {border:1px solid black;}
h1.szegely {border:2px dotted blue;}
</style>
</head>
<body>
<h1>Címsor</h1>
<p class="fontos">Piros színű bekezdés, mert a fontos osztályba tartozik.</p>
<p class="szegely">Fekete szegély van a bekezdésen, mert a szegely osztályba van sorolva.</p>
<p class="szegely fontos">A bekezdés piros színű és fekete szegéllyel ellátott mert a szegely és fontos osztályba is be van sorolva.</p>
<h1 class="szegely fontos">Címsor</h1>
<p>A fenti címsor piros, mert be van sorolva a fontos osztályba. Szegélye is van, mert be van sorolva a szegely osztályba. Azonban más a szegélye, mint a bekezdésnek, mert a <h1> elemre más tulajdonságokkal hoztuk létre a szegely nevű osztályt.</p>
</body>
</html>
Több osztálybasorolás
A fentiekben láttuk, hogy ha több osztályba is besoroljuk az elemet, akkor az osztályokban megadott tulajdonságok egyben vonatkoznak az adott elemre. Ez azonban nem mindig optimális, lehet, hogy finomítani szeretnénk a stíluson, ha egyszerre két osztályba is be van sorolva az adott elem. Ekkor használhatjuk a következő szelektort:
Forráskód
1
szelektor.osztály1.osztály2 {definíció}
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Osztály példa</title>
<style type="text/css">
h1.szegely {border:2px dotted blue;}
.fontos {color:red;}
h1.szegely.fontos {border:1px solid red; color:black;}
</style>
</head>
<body>
<h1 class="szegely">Címsor 1 (szegely osztály)</h1>
<h1 class="fontos">Címsor 1 (fontos osztály)</h1>
<h1 class="szegely fontos">Címsor 1 (szegely és fontos osztály)</h1>
</body>
</html>
http://tamop412.elte.hu/tananyagok/weblapkeszites/lecke11_lap5.html
Univerzális szelektor segítségével olyan CSS-szabályok írhatók, amelyek minden egyes HTML-elemre vonatkoznak. Így könnyedén adhatunk globális stílusjegyeket a formázandó weblaphoz. Az univerzális szelektort egy * (csillag) testesíti meg.
* {
margin:0; /* margó lenullázása */
padding:0; /* kitöltés lenullázása */
}
p {margin:10px}
A típus szelektorral egy adott elemtípust határozhatunk meg. Például megcímezhetjük az összes bekezdést, címsort, listaelemet stb.
h1 {color:blue}
Szelektor leszármazott elemre
Ha egy HTML-elem leszármazottaihoz szeretnénk stílust hozzárendelni, akkor egy speciális szelektorlistát kell alkalmazni, amelyben a szelektorokat szóközök választják el. Ha a listában egy szelektor megelőz egy másikat, akkor az előbb szereplő szelektor a később szereplő szelektor ősét jelenti. Fontos, hogy a szelektorlistában egymást követő szelektorok nem feltétlenül egymás közvetlen gyermekei illetve szülei. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
Minta
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Listák egymásba ágyazása, CSS megadással</title>
<meta charset="utf-8">
<style type="text/css">
li {
color:green;
}
ul li li {
color:blue;
font-style:italic;
}
</style>
</head>
<body>
<p>A legnépesebb országok listája:</p>
<ul>
<li>Kína <ul>
<li>A világ népességének 19,15 %-a</li>
</ul>
<li>India <ul>
<li>A világ népességének 17,2 %-a</li>
</ul>
<li>Amerikai Egyesült Államok <ul>
<li>A világ népességének 4,47 %-a</li>
</ul>
</ul>
</body>
</html>
Ha azt szeretnénk kifejezni, hogy az egyik szelektor a másik gyermeke, akkor a szelektorlistában a szelektorokat > jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Gyermek példa</title>
<style type="text/css">
body > p {background: yellow;}
</style>
</head>
<body>
<p>Ez a bekezdés gyermeke a body tagnek, ezért a háttere sárga színű.</p>
<div>
<p>Ez a bekezdés nem gyermeke a body tagnek.</p>
</div>
</body>
</html>
Szelektorlistával lehetőségünk van közvetlen testvérségi viszony kifejezésére is. Ekkor a listában levő szelektorokat + jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Közvetlen testvér példa</title>
<style type="text/css">
/*Azoknak a bekezdéseknek, amelyeket megelőz egy közvetlen bekezdés testvérük, zöld lesz a hátterük.*/
p + p {background: lightgreen;}
</style>
</head>
<body>
<p>Első bekezdés.</p>
<p>Második bekezdés.</p>
<p>Harmadik bekezdés.</p>
<div>
<p>Negyedik bekezdés.</p>
</div>
<p>Ötödik bekezdés.</p>
<p>Hatodik bekezdés.</p>
<p>Hetedik bekezdés.</p>
</body>
</html>
Az általános testvérségi viszony kifejezésére is van lehetőség szelektorlistával. Ekkor a szelektorokat ~ jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Általános testvér példa</title>
<style type="text/css">
/*Azoknak a bekezdéseknek, amelyeket megelőz egy közvetlen bekezdés testvérük, zöld lesz a hátterük.*/
p ~ p {background: lightgreen;}
</style>
</head>
<body>
<p>Első bekezdés.</p>
<p>Második bekezdés.</p>
<p>Harmadik bekezdés.</p>
<div>
<p>Negyedik bekezdés.</p>
</div>
<p>Ötödik bekezdés.</p>
<p>Hatodik bekezdés.</p>
<p>Hetedik bekezdés.</p>
</body>
</html>
Osztályokra példa
z előző példákban láttuk, hogy az elemeket a HTML-oldalban betöltött struktúra alapján megcímezhetjük, de mi a helyzet akkor, ha nem a struktúra, hanem más szempont szerint szeretnénk az elemeket elérni? Mondjuk az általunk fontosnak tartott elemeket ki szeretnénk emelni? Erre lesz jó az osztályok használata.
A HTML-elemeinket a class attribútummal kiegészítve és annak értéket adva osztályba sorolhatjuk.
Forráskód
1
<p class="fontos">Bekezdés szövege</p>
Az így definiált osztályokra hivatkozhatunk szelektorral, ezáltal minden osztályhoz egységes stílus rendelhető.
Az osztályszelektor többféle módon megadható, a szintaxis a következő:
A szelektort az elem.osztály alakban, azaz az elemet annak osztályától egy ponttal elválasztva adhatjuk meg. Ekkor a szelektor az összes adott osztályba tartozó elemre illeszkedni fog.
A szelektorból elhagyható az elem neve. Ekkor a szelektor alakja: .osztály, és az összes adott osztályba tartozó elemre illeszkedik, az elemtípustól függetlenül. Vagyis ha készítünk egy általános (.fontos) osztályt, amelyben beállítjuk, hogy a szöveg pirossal jelenjen meg, akkor az osztályt egyaránt használhatjuk a p, span, h1, stb. tageknél, míg a p.fontos szelektorban megadott szabályok, csak az adott osztályba sorolt bekezdésekre (p elemekre) lesznek érvényesek.
Fontos tudnunk azt is, hogy az elemeket egyszerre több osztályba is besorolhatjuk!
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Osztály példa</title>
<style type="text/css">
p {padding:5px;margin:10px;}
.fontos {color:red;}
p.szegely {border:1px solid black;}
h1.szegely {border:2px dotted blue;}
</style>
</head>
<body>
<h1>Címsor</h1>
<p class="fontos">Piros színű bekezdés, mert a fontos osztályba tartozik.</p>
<p class="szegely">Fekete szegély van a bekezdésen, mert a szegely osztályba van sorolva.</p>
<p class="szegely fontos">A bekezdés piros színű és fekete szegéllyel ellátott mert a szegely és fontos osztályba is be van sorolva.</p>
<h1 class="szegely fontos">Címsor</h1>
<p>A fenti címsor piros, mert be van sorolva a fontos osztályba. Szegélye is van, mert be van sorolva a szegely osztályba. Azonban más a szegélye, mint a bekezdésnek, mert a <h1> elemre más tulajdonságokkal hoztuk létre a szegely nevű osztályt.</p>
</body>
</html>
Több osztálybasorolás
A fentiekben láttuk, hogy ha több osztályba is besoroljuk az elemet, akkor az osztályokban megadott tulajdonságok egyben vonatkoznak az adott elemre. Ez azonban nem mindig optimális, lehet, hogy finomítani szeretnénk a stíluson, ha egyszerre két osztályba is be van sorolva az adott elem. Ekkor használhatjuk a következő szelektort:
Forráskód
1
szelektor.osztály1.osztály2 {definíció}
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Osztály példa</title>
<style type="text/css">
h1.szegely {border:2px dotted blue;}
.fontos {color:red;}
h1.szegely.fontos {border:1px solid red; color:black;}
</style>
</head>
<body>
<h1 class="szegely">Címsor 1 (szegely osztály)</h1>
<h1 class="fontos">Címsor 1 (fontos osztály)</h1>
<h1 class="szegely fontos">Címsor 1 (szegely és fontos osztály)</h1>
</body>
</html>
http://tamop412.elte.hu/tananyagok/weblapkeszites/lecke11_lap5.html
Nincsenek megjegyzések:
Megjegyzés küldése