Logó{CSS3 Tutoriál}

A CSS szabályok szintaxisa

A szabályok:

A CSS szabályok azok az utasítások, amelyek segítségével beállíthatjuk a weblapok HTML elemeinek vizuális megjelenését. Ebben a fejezetben megismerkedhetünk a CSS szabályok szintaxisával.

Egy egyszerû CSS szabály kinézete:

szelektor {tulajdonság: érték;}


A CSS szabályok szintaxisa a következõ:

  • A szabály egy HTML szelektorral vagy egy szelektor-lánccal kezdõdik, ami egy egyszerû szelektor esetén az a HTML tag, amelynek stílusát szeretnénk beállítani. Ha egy szelektor-lánc áll a szabály elején, akkor a helyzet nem ilyen egyszerû. Ezek az esetek lentebb bõvebben kifejtésre kerülnek.
  • A szelektort egy kapcsos zárójelpár által határolt deklarációs blokk követ, amelyben tetszõleges számú CSS deklaráció szerepel.
  • Egy CSS deklaráció két részbõl áll:
    • Egy tulajdonságból, aminek értéket szeretnénk beállítani.
    • Egy értékbõl, amit a tulajdonságnak adunk értékül.
    • Egy tulajdonság-érték párost kettõspont választja el.
    • Minden CSS deklarációt egy pontosvesszõ zár le. Ez a pontosvesszõ a szabályhoz tartozó utolsó deklaráció végérõl elhagyható. Ez azonban nem ajánlott, mert késõbb hibákhoz vezethet.

Szelektor-csoportok:

Ha több szelektorra is szeretnénk ugyanazt a CSS szabályt alkalmazni, akkor szelektor-csoportot kell létrehoznunk. Azaz a deklarációs blokk elõtt vesszõvel elválasztva felsoroljuk a kívánt szelektorokat, így az összes szelektorra vonatkozik majd a stílusdeklaráció.

Osztályok:

HTML elemeinket a class attribútummal kiegészítve és annak értéket adva csoportokba rendezhetjük, pontosabban osztályba sorolhatjuk.

Az így definiált csoportokra 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. 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 lesznek érvényesek.

Egyedi azonosítók, ID-k.

HTML elemeinket azok id attribútumának történõ értékadással egyedileg azonosíthatóvá tehetjük, mivel egy HTML fájlon belül minden id attribútum értéknek különbözõnek kell lennie.

Az így definiált id-kre hivatkozhatunk szelektorokkal, amelyek szintaxisa a következõ:

  • elem#id
  • Mivel minden id egyedi, ezért a szelektor a következõ módon rövidíthetõ: #id

Univerzális szelektor:

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.

Például a *{margin:0;padding:0} deklaráció azt jelenti, hogy minden elem margója és belsõ kitöltése a 0 értéket veszi fel.

Kommentek CSS-ben:

A CSS-ben is lehetõség van kommentek hozzáadására, amikkel a késõbbi szerkesztés megkönnyítésére megjegyzéseket, vagy magyarázatokat helyezhetünk el a stíluslapunkban. Minden kommentnek minõsül, ami a /* és */ jelek között blokkba kerül.

Például:
/*Bekezdések formázása*/
p.fontos {color:red}

Támogatottság:

A CSS3-as szabvány lehetõségeit a böngészõk eltérõ mértékben támogatják, így fel kell készülnünk, hogy néhány speciálisabb megoldást még nem, vagy csak néhány böngészõprogramban tudjuk használni.

Példa:



Dokumentumfa (DOM)

A HTML fájljainkat felépítõ tageket fa struktúrába rendezhetjük úgy, ahogy elhelyezkednek egymásban. Ekkor a fa gyökere a html tag, a levelei pedig inline, vagy olyan blokk elemek, amelyek nem tartalmaznak további tageket.

Ezt a fát dokumentumfának nevezzük. A fa csomópontjaiban elhelyezkedõ tageket az egymáshoz képesti hierarchikus viszonyuk szerint névvel is nevezhetjük.

Szülõnek nevezzük azokat az elemeket, amelyek tartalmaznak más tageket, amik a szülõ elem gyermekei.

Azokat a gyermekeket, amelyek közös szülõvel rendelkeznek, testvéreknek nevezzük.

Azok a testvérek, amelyek közvetlenül egymás után helyezkednek el a dokumentumban, közvetlen testvéreknek nevezzük.

Egy elem gyermekeinek a gyermekeit, annak unokáinak nevezzük. Fordítva pedig egy elem szülõjének a szülõje, az elem nagyszülõje.

A fában egy elem alatti részfa elemeit az elem leszármazottainak, a fa az elem felett elhelyezkedõ elemeit, pedig annak õseinek nevezzük.


Speciális szelektorok egymásba ágyazott HTML elemek kiválasztására:

Lehetõségünk van olyan összetett szelektorok megírására, amelyek biztosítják, hogy bizonyos kontextusban egymásba ágyazott HTML elemeket tudjunk kiválasztani.

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.

Példa:


Szelektor gyermek eleme:

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.

Példa:


Szelektor közvetlen testvérre:

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.

Példa:


Szelektor általános (azaz tetszõleges) testvérre:

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.

Példa:


Támogatottság:

A szelektorokat leszármazottra, gyermekre, közvetlen testvérre és általános testvérre minden jelentõs böngészõ támogatja.


Látszólagos osztályok:

A HTML elemek egy része szelektálható állapotokkal rendelkezik. Ezen állapotokra illeszkedõ szelektorokat a látszólagos osztályok segítségével írhatunk.

A szintaxisuk két részbõl áll, egy szelektorból és annak egy látszólagos osztályából, ami egy kettõs ponttal kezdõdik.

Dinamikus látszólagos osztályok:

A dinamikus látszólagos osztályok a következõek:

  • A :link annak a linknek a megjelenítéséért felel, ami még nem volt kiválasztva.
  • A :visited annak a linknek a megjelenítéséért felel, ami már ki volt kiválasztva, vagyis rákattintottunk.
  • A :hover annak az elemnek a megjelenítéséért felel, amelyre az egérkurzor mutat.
  • Az :active annak az elemnek a megjelenítéséért felel, ami éppen aktív. Például egy betöltõdött link vagy egy benyomott gomb.
  • A :focus annak az elemnek a stílusáért felel, amelyiken a fókusz van.
  • A :target az anchor (könyvjelzõ) linkek célpontjainak stílusaiért felel.
  • Az :enabled annak az elemnek(többnyire formnak) a stílusaiért felel, amelyik engedélyezve van.
  • A :disabled annak az elemnek a stílusaiért felel, amelyik le van tiltva.
  • A :checked annak az checkbox-nak a stílusaiért felel, amely ki van jelölve.
  • A :target az anchor elemek a stílusaiért felel.

Strukturális látszólagos osztályok:

A HTML elemek egymáshoz viszonyított struktúrája alapján bizonyos kitüntetett viszonyokhoz is rendelhetünk stílust látszólagos osztályok használatával:

  • A :root az az elem, amely a nem rendelkezik szülõvel. Jelen esetben ez maga a html elem.
  • Az :empty az az elem, ami nem rendelkezik egyetlen gyermekkel sem.
  • Az :only-child az az elem, amely nem rendelkezik testvérrel.
  • Az :only-of-type az az elem, amelybõl nincs hasonló típusú a testvérei között.
  • A :first-child az az elem, amely az összes testvére közül az elsõ.
  • A :first-of-type az ez elem, amely a szelektor típusából a testvérei között az elsõ.
  • Az :nth-child(n) a testvérei között az n. elem.
  • Az :nth-of-type(n) a testvérei között az n. az adott szelektorra illeszkedõ elemek közül.
  • Az :nth-last-of-type(n) a testvérei között hátulról az n. az adott szelektorra illeszkedõ elemek közül.
  • A :last-child a testvérei közül az utolsó elem.
  • A :last-of-type az az elem, amely a szelektor típusából a testvérei között az utolsó.

Nyelvfüggõ stílus:

A :lang látszólagos osztály segítségével nyelvfüggõvé tehetjük stílusszabályainkat. A nyelvet a lang HTML attribútum segítségével állíthatjuk be.

Negációs látszólagos osztály

A :not() látszólagos osztállyal tagadást fogalmazhatunk meg. Erre az összes olyan szelektor illeszkedik, amelyekre nem igaz a paraméterként adott tulajdonság.

Például: a p:not(.osztály) szektor az összes olyan bekezdésre illeszkedik, amely nem tartozik az adott osztályba.

Támogatottság:

A :focus, :enabled, :disabled, :checked, :root, :empty, :only-child, :only-of-type, :first-of-type, :nth-child(n), :nth-of-type(n), :nth-last-of-type(n), :last-child, :last-of-type, :not(), :target látszólagos osztályokat egyelõre az Internet Explorer nem támogatja.

A :nth-child(n), :nth-of-type(n), :target látszólagos elemeket az Opera böngészõ egyelõre nem helyesen használja.

Példa:



Látszólagos elemek:

A látszólagos elemek a HTML elemek tartalmának kitüntetett részei, például egy bekezdés elsõ sora, vagy az elsõ betûje.
Ilyen elemek a következõk:

  • A :first-letter egy szöveg elsõ betûje.
  • A :first-line egy szöveg elsõ sora.
  • Az :after generált tartalom közvetlenül az elem után.
  • A :before generált tartalom közvetlenül az elem elõtt.
  • A ::selection segítségével a kijelölés stílusát határozhatjuk meg.

A látszólagos elemeket kezdhetjük szimpla vagy dupla kettõsponttal is, jelentésük változatlan marad. Kivéve a ::selection-t ami csak dupla kettõsponttal mûködik.

Támogatottság:

A :before, :after, ::selection látszólagos osztályokat az Internet Explorer egyelõre nem támogatja.

A ::selection látszólagos osztályt a Firefox egyelõre nem támogatja.

Példa:



Attribútum szelektorok:

A szelektoraink attribútummal is rendelkezhetnek, amelyek segítségével feltételeket fogalmazhatunk meg az általunk szelektált elemek attribútumaira. Ezek a szelektor-attribútumok rendszerint szögletes zárójelek között helyezkednek el.

  • A szelektor[attribútum] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal.
  • A szelektor[attribútum="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, ami rendelkezik a megadott értékkel.
  • A szelektor[attribútum~="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értékének a megadott érték egy szóközök által határolt részsorozata.
  • A szelektor[attribútum|="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értékének a megadott érték egy kötõjelek által határolt részsorozata.
  • A szelektor[attribútum^="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értéke a megadott értékkel kezdõdik.
  • A szelektor[attribútum$="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értéke a megadott értékkel végzõdik.
  • A szelektor[attribútum*="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értéke a megadott értéket tartalmazza.

Támogatottság:

Az attribútum szelektorokat minden jelentõs böngészõ támogatja.

Példa:



Feladat:

Egészítsd ki a példakódot stílus szabályokkal úgy, hogy a képpel megegyezõ végeredményt kapj!

Szintaxis feladat.


Tárnok Tamás Attila - CSS3 Tutoriál - 2010