033.2 Lecke 1
Tanúsítvány: |
Web Development Essentials |
---|---|
Verzió: |
1.0 |
Témakör: |
033 CSS - A tartalom formázása |
Fejezet: |
033.2 CSS szelektorok és a formázás alkalmazása |
Lecke: |
1/1 |
Bevezetés
Amikor CSS-szabályt írunk, meg kell mondanunk a böngészőnek, hogy a szabály mely elemekre vonatkozik. Ezt egy szelektor megadásával tesszük: ez egy olyan minta, ami egy elemre vagy elemcsoportra illeszkedik. Szelektorok sokféle formában léteznek, amelyek alapulhatnak az elem nevén, attribútumain, a dokumentum szerkezetében való relatív elhelyezésén vagy ezen jellemzők kombinációján.
Oldalszintű formázás
A CSS használatának egyik előnye, hogy nem kell egyedi szabályokat írni az azonos stílusú elemekre. A csillaggal a weblap összes elemére alkalmazhatjuk a szabályt, ahogy az alábbi példában látható:
* {
color: purple;
font-size: large;
}
A szelektor nem az egyetlen módszer arra, hogy egy stílusszabályt az oldal összes elemére alkalmazzunk. Az olyan szelektorokat, amelyek egy elemet egyszerűen a tag neve alapján találnak meg, típusszelektornak nevezzük, így bármely HTML-tag neve, például
body
, p
, table
, em
stb. lehet szelektor. A CSS-ben a szülő stílust a gyerekelemek öröklik. Így a gyakorlatban a szelektor használata ugyanolyan hatású, mintha a
body
elemre alkalmaznánk egy szabályt:
body {
color: purple;
font-size: large;
}
A CSS kaszkádoló funkciója lehetővé teszi továbbá az elemek örökölt tulajdonságainak finomhangolását. Írhatunk egy általános CSS-szabályt, amely az oldal összes elemére vonatkozik, majd írhatunk szabályokat az egyes elemekre vagy elemcsoportokra.
Ha ugyanaz az elem két vagy több egymásnak ellentmondó szabálynak felel meg, a böngésző a legspecifikusabb szelektorhoz tartozó szabályt alkalmazza. Vegyük példaként a következő CSS szabályokat:
body {
color: purple;
font-size: large;
}
li {
font-size: small;
}
A böngésző a color: purple
és a font-size: large
stílusokat alkalmazza a body
elemen belüli összes elemre. Ha azonban vannak li
elemek az oldalon, a böngésző a font-size: large
stílust a font-size: small
stílusra cseréli, mivel a li
szelektor erősebb kapcsolatban áll a li
elemmel, mint a body
szelektor.
A CSS nem korlátozza az egyenértékű szelektorok számát ugyanabban a stíluslapban, így két vagy több szabály is használhatja ugyanazt a szelektort:
li {
font-size: small;
}
li {
font-size: x-small;
}
Ebben az esetben mindkét szabály egyformán jellemző a li
elemre. A böngésző nem alkalmazhat egymásnak ellentmondó szabályokat, ezért azt a szabályt választja, amelyik később következik a CSS-fájlban. A félreértések elkerülése érdekében az az ajánlás, hogy az azonos szelektort használó tulajdonságokat csoportosítsuk.
A szabályok sorrendje a stíluslapban befolyásolja a dokumentumban való alkalmazásukat, de ezt a viselkedés felülírhatjuk az important
(fontos) szabály használatával. Ha valamilyen oknál fogva meg akarjuk tartani a két különálló li
szabályt, de a második helyett az első szabály alkalmazását akarjuk kikényszeríteni, jelöljük az szabályt "fontosnak":
li {
font-size: small !important;
}
li {
font-size: x-small;
}
A !important
-tal jelölt szabályokat óvatosan kell használni, mert megszakítják a természetes stíluslap kaszkádolást, és megnehezítik a CSS-fájlon belüli problémák megtalálását és javítását.
Korlátozó szelektorok
Láttuk, hogy bizonyos öröklött tulajdonságokat megváltoztathatunk bizonyos tagekre illeszkedő szelektorok használatával. Általában azonban különböző formázásokat kell használnunk az azonos típusú elemekhez.
A HTML-címkék attribútumai beépíthetők a szelektorokba, hogy korlátozzák az általuk hivatkozott elemek halmazát. Tegyük fel, hogy a HTML-oldal, amelyen dolgozunk, kétféle rendezetlen listát (<ul>
) tartalmaz: az egyiket az oldal tetején használjuk a weboldal szakaszainak menüjeként, a másikat pedig a szövegtörzsben található hagyományos listákhoz:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS alapok</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="/">Főoldal</a></li>
<li><a href="/articles">Cikkek</a></li>
<li><a href="/about">Rólunk</a></li>
</ul>
<div id="content">
<p>A Naprendszer négy kőzetbolygóji a következők:</p>
<ul>
<li>Merkúr</li>
<li>Vénusz</li>
<li>Föld</li>
<li>Mars</li>
</ul>
<p>A leginkább gázból álló külső óriásbolygók:</p>
<ul>
<li>Jupiter</li>
<li>Szaturnusz</li>
<li>Uránusz</li>
<li>Neptun</li>
</ul>
</div><!-- #content -->
<div id="footer">
<ul>
<li><a href="/">Főoldal</a></li>
<li><a href="/articles">Cikkek</a></li>
<li><a href="/about">Rólunk</a></li>
</ul>
</div><!-- #footer -->
</body>
</html>
Alapértelmezés szerint minden listaelem bal oldalán egy fekete kör található. A köröket a felső menü listájából el szeretnénk távolítani, míg a többi listában azt szeretnénk, hogy a körök megmaradjanak. Ha egyszerűen a li
szelektort használjuk, akkor a szövegtörzsön belüli listából is eltávolítjuk a köröket. Szükségünk lesz egy olyan módra, amellyel megmondhatjuk a böngészőnek, hogy csak az egyik lista listaelemeit módosítsa, a másikét ne.
Többféleképpen írhatunk az oldal bizonyos elemeire illeszkedő szelektorokat. Mint korábban említettük, először azt fogjuk megnézni, hogyan használhatjuk ehhez az elemek attribútumait. Ebben a példában konkrétan az id
attribútumot használhatjuk arra, hogy csak a felső listát módosítsuk.
Az id
attribútum egy egyedi azonosítót rendel a megfelelő elemhez, amit aztán a CSS-szabály szelektor részeként használhatunk. A CSS-szabály megírása előtt szerkesszük meg a minta HTML-fájlját, és adjuk hozzá az id="topmenu"
-t a felső menü ul
eleméhez:
<ul id="topmenu">
<li>Főoldal</li>
<li>Cikkek</li>
<li>Rólunk</li>
</ul>
A HTML-dokumentum head
részében már van egy link
elem, ami a style.css
fájlra mutat, így hozzáadhatjuk a következő CSS-szabályokat:
ul#topmenu {
list-style-type: none
}
A kettőskereszt karaktert egy szelektorban, egy elem után használjuk egy ID jelölésére (szóközök használata nélkül). A kettőskereszt karaktertől balra levő tag neve opcionális, mivel nem lesz más elem ugyanezzel az ID-val. Emiatt a szelektor lehet csak #topmenu
is.
Annak ellenére, hogy a list-style-type
tulajdonság nem közvetlen tulajdonsága az ul
elemnek, a szülő elem CSS tulajdonságai öröklődnek a gyerekeikre, így az ul
elemhez rendelt stílus öröklődk a gyerek li
elemekre.
Nem minden elemnek van olyan azonosítója (ID), amellyel kiválasztható. Valójában csak néhány kulcsfontosságú elrendezési elemnek kell ID-val rendelkeznie. Vegyük például a mintakódban használt bolygólistákat. Bár lehetséges egyedi azonosítókat rendelni minden egyes ilyen ismétlődő elemhez, ez a módszer nem praktikus hosszabb, sok tartalommal rendelkező oldalak esetében. Inkább a szülő div
elem azonosítóját használhatjuk szelektorként a belső elemek tulajdonságainak megváltoztatásához.
A div
elem azonban nem kapcsolódik közvetlenül a HTML listákhoz, így a list-style-type
tulajdonság hozzáadása nem lesz hatással a gyermekeire. Így ahhoz, hogy a div
tartalomban lévő listák fekete körét üreges körré változtassuk, egy descendant (leszármazott) szelektort kell használnunk:
#topmenu {
list-style-type: none
}
#content ul {
list-style-type: circle
}
A #content ul
szelektort leszármazott szelektornak nevezzük, mert csak azokra az ul
elemekre illeszkedik, amelyek annak az elemnek a gyermekei, amelynek az azonosítója a content
. Annyi leszármazási szintet használhatunk, amennyit csak szükséges. Például a #content ul li
csak azokra a li
elemekre illeszkedik, amelyek azon ul
elemek leszármazottai, amelyek a content
ID-val rendelkező elemek leszármazottai. Ebben a példában azonban a hosszabb szelektornak ugyanaz a hatása, mint a #content ul
használatának, mivel az li
elemek öröklik a szülő ul
elemre beállított CSS-tulajdonságokat. A leszármazó szelektorok nélkülözhetetlen technikát jelentenek, amikor az oldal elrendezése egyre összetettebbé válik.
Tegyük fel, hogy most meg akarjuk változtatni a topmenu
listában és a footer div listában lévő listaelemek font-style
tulajdonságát, hogy ferdék legyenek. Nem írhatunk egyszerűen egy CSS-szabályt az ul
szelektor használatával, mert az a content div-ben lévő listaelemeket is megváltoztatná. Eddig a CSS-tulajdonságokat egy-egy szelektor segítségével változtattuk meg, és ez a módszer erre a feladatra is használható:
#topmenu {
font-style: oblique
}
#footer ul {
font-style: oblique
}
A különálló szelektorok használata azonban nem az egyetlen módja ennek. A CSS lehetővé teszi, hogy egy vagy több stíluson osztozó szelektorokat csoportosítsunk egy vesszővel elválasztott szelektorlista segítségével:
#topmenu, #footer ul {
font-style: oblique
}
A szelektorok csoportosítása kiküszöböli a duplikátumokírásával járó többletmunkát. Ráadásul előfordulhat, hogy a jövőben újra meg akarjuk majd változtatni a tulajdonságot, és nem biztos, hogy emlékezni fogunk az összes különböző helyre, ahol szerepel.
Osztályok
Ha nem akarunk túl sokat foglalkozni az elemhierarchiával, hozzáadhatunk egy class
-t (osztályt) a testreszabni kívánt elemekhez. Az osztályok hasonlóak az ID-khoz, de ahelyett, hogy csak egyetlen elemet azonosítanának az oldalon, azonos tulajdonságokkal rendelkező elemek csoportját is azonosíthatják.
Vegyük például a HTML mintaoldalt, amelyen dolgozunk. Nem valószínű, hogy a valós oldalakon ilyen egyszerű struktúrákat találnánk, ezért praktikusabb lenne, ha egy elemet csak osztályok, vagy az osztályok és a leszármazás kombinációja alapján választanánk ki. Ahhoz, hogy a font-style: oblique
tulajdonságot osztályok használatával alkalmazzuk a menülistákra, először is hozzá kell adnunk a class
tulajdonságot a HTML-fájl elemeihez. Ezt először a felső menüben fogjuk megtenni:
<ul id="topmenu" class="menu">
<li><a href="/">Főoldal</a></li>
<li><a href="/articles">Cikkek</a></li>
<li><a href="/about">Rólunk</a></li>
</ul>
Majd a lábléc menüjében:
<div id="footer">
<ul class="menu">
<li><a href="/">Főoldal</a></li>
<li><a href="/articles">Cikkek</a></li>
<li><a href="/about">Rólunk</a></li>
</ul>
</div><!-- #footer -->
Ezzel a #topmenu, #footer ul
szelektorcsoportot az osztályalapú .menu
szelektorral helyettesíthetjük:
.menu {
font-style: oblique
}
Az ID-alapú szelektorokhoz hasonlóan az osztályalapú szelektoroknál is opcionális a tag nevének hozzáadása a pont bal oldalán. Az azonosítókkal ellentétben azonban ugyanaz az osztály több elemben is használható, és még csak nem is kell, hogy azonos típusúak legyenek. Ezért, ha a menu
osztály különböző elemtípusok között van megosztva, az ul.menu
szelektor használata csak azokra az ul
elemekre illeszkedik, amelyek rendelkeznek a menu
osztállyal. Ehelyett a .menu
szelektor használata a menu
osztállyal rendelkező bármely elemre illeszkedik, függetlenül annak típusától.
Továbbá az elemek egynél több osztályhoz is társíthatók. Megkülönböztethetnénk a felső és az alsó menüt úgy, hogy mindegyikhez hozzáadunk egy-egy extra osztályt:
<ul id="topmenu" class="menu top">
A lábléc menüjében pedig:
<ul class="menu footer">
Ha a class
attribútumban egynél több osztály van, akkor azokat szóközzel kell elválasztani. Most a menu
osztály elemei között megosztott CSS-szabályokkal a felső menüt és a lábléc menüjét is a megfelelő osztályok segítségével tudjuk megcímezni:
.menu {
font-style: oblique
}
.menu.top {
font-size: large
}
.menu.footer {
font-size: small
}
Figyeljünk oda arra, hogy a .menu.top
írása eltér a .menu .top
írásától (szóköz van a szavak között). Az első szelektor olyan elemekre illeszkedik, amelyeknek mind`menu`, mind top
osztálya van, míg a második olyan elemekre illeszkedik, amelyeknek a top
osztálya és egy menu
osztályú szülő eleme van.
Speciális szelektorok
A CSS-szelektorok az elemek dinaimkus állapotainak is megfelelhetnek. Ezek a szelektorok különösen hasznosak az interaktív elemek, például a linkek esetében. Előfordulhat, hogy akkor akarjuk megváltoztatni egy link megjelenését, amikor áthalad felettük az egérmutató, hogy ezzel keltsük fel a látogatók érdeklődését.
Visszatérve a mintaoldalunkhoz, eltávolíthatjuk az aláhúzásokat a felső menüben lévő linkekről, és csak akkor jelenítjük meg azt, ha az egérmutató a megfelelő link fölé mozog. Ehhez először írunk egy szabályt, amely eltávolítja az aláhúzást a felső menüben lévő linkekről:
.menu.top a {
text-decoration: none
}
Ezután a :hover
pszeudo-osztályt használjuk ugyanezeken az elemeken, hogy létrehozzunk egy olyan CSS szabályt, amely csak akkor érvényesül, ha az egérmutató a megfelelő elem fölé kerül:
.menu.top a:hover {
text-decoration: underline
}
A :hover
pszeudo-osztály szelektorra vonatkozik a hagyományos CSS-szabályok összes CSS-tulajdonsága. Más pszeudo-osztályok még például a :visited
, amely a már meglátogatott linkekre, valamint a :focus
, amely a fókuszt kapott űrlapelemekre vonatkozik.
Gyakorló feladatok
-
Tegyük fel, hogy egy HTML-oldalhoz tartozik egy stíluslap, amely a következő két szabályt tartalmazza:
p { color: green; } p { color: red; }
Milyen színt alkalmaz a böngésző az
p
elemekben lévő szövegre? -
Mi a különbség a
div#main
és a#main
ID-szelektor használata között? -
Melyik szelektor felel meg a
#main
azonosítójúdiv
elemen belül használt összesp
elemnek? -
Mi a különbség a
p.highlight
és a.highlight
osztályszelektor használata között?
Gondolkodtató feladatok
-
Írjunk egy egyszerű CSS-szabályt, ami megváltoztatja a
font-style
tulajdonságotoblique
-ra. A szabálynak csak azokra aza
elemekre kell illeszkednie, amelyek a<div id="sidebar"></div>
vagy<ul class="links"></ul>
elemeken belül vannak! -
Tegyük fel, hogy azoknak az elemeknek a stílusát szeretnénk megváltoztatni, amelyeknek a
class
attribútumaarticle reference
, pl.<p class="article reference">
. Úgy tűnik azonban, hogy a.article .reference
szelektor nem változtatja meg a megjelenésüket. Miért nem illeszkedik a szelektor az elemekre a várt módon? -
Írjunk egy CSS szabályt, amely az oldal összes meglátogatott linkjének
color
tulajdonságátred
-re változtatja!
Összefoglalás
Ez a lecke a CSS-szelektorok használatával foglalkozik, valamint azzal, hogy a böngésző hogyan dönti el, milyen formázásokat alkalmazzon az egyes elemek esetén. A HTML-jelöléstől elkülönülve a CSS számos szelektort biztosít az oldal egyes elemeivel vagy elemcsoportjaival való megfeleltetésre. Ez a lecke a következő fogalmakat és eljárásokat veszi át:
-
Oldalszintű formázás és stílusöröklés.
-
Elemek stílusa típus szerint.
-
Az elem azonosítójának és osztályának használata szelektorként.
-
Összetett szelektorok.
-
Pszeudo-osztályok használata az elemek dinamikus formázásához.
Válaszok a gyakorló feladatokra
-
Tegyük fel, hogy egy HTML-oldalhoz tartozik egy stíluslap, amely a következő két szabályt tartalmazza:
p { color: green; } p { color: red; }
Milyen színt alkalmaz a böngésző az
p
elemekben lévő szövegre?A válasz:
red
. Ha két vagy több egyenértékű szelektor egymásnak ellentmondó tulajdonságokkal rendelkezik, a böngésző a legutolsót fogja választani. -
Mi a különbség a
div#main
és a#main
ID-szelektor használata között?A
div#main
szelektor amain
azonosítóval rendelkeződiv
elemre illik, míg a#main
szelektor amain
azonosítóval rendelkező elemre illik, függetlenül annak típusától. -
Melyik szelektor felel meg a
#main
azonosítójúdiv
elemen belül használt összesp
elemnek?A
#main p
vagydiv#main p
szelektor. -
Mi a különbség a
p.highlight
és a.highlight
osztályszelektor használata között?A
p.highlight
szelektor csak ap
típusú,highlight
osztályú elemekre illeszkedik, míg a.highlight
szelektor mindenhighlight
osztályú elemre illeszkedik, függetlenül azok típusától.
Válaszok a gondolkodtató feladatokra
-
Írjunk egy egyszerű CSS-szabályt, ami megváltoztatja a
font-style
tulajdonságotoblique
-ra. A szabálynak csak azokra aza
elemekre kell illeszkednie, amelyek a<div id="sidebar"></div>
vagy<ul class="links"></ul>
elemeken belül vannak!#sidebar a, ul.links a { font-style: oblique }
-
Tegyük fel, hogy azoknak az elemeknek a stílusát szeretnénk megváltoztatni, amelyeknek a
class
attribútumaarticle reference
, pl.<p class="article reference">
. Úgy tűnik azonban, hogy a.article .reference
szelektor nem változtatja meg a megjelenésüket. Miért nem illeszkedik a szelektor az elemekre a várt módon?Az
.article .reference
szelektor areference
osztályú elemekre illeszkedik, amelyek azarticle
osztályú elemek leszármazottai. Azarticle
és areference
osztályú elemekre való illesztéshez a szelektornak azarticle.reference
(szóköz nélkül) kell lennie. -
Írjunk egy CSS szabályt, amely az oldal összes meglátogatott linkjének
color
tulajdonságátred
-re változtatja!a:visited { color: red; }