Kiválasztók
Kiválasztók a CSS-ben

Először találkoztunk CSS-választók a CSS oktatóanyag kilencedik leckéjében. Ebben a cikkben részletesebben tanulmányozzuk a kiválasztókat, és megvizsgáljuk a CSS-szelektorok egyéb típusait is.

Választó(az angol szelektorból) - válogatás, mintavétel. A CSS-ben a szelektorok az elemek (címkék) kiválasztásának egyik módja az oldalon.

Amint azt a -ból tudjuk, a CSS kódséma így néz ki:

Kiválasztó (CSS tulajdonság: érték; CSS tulajdonság: érték; ... stb.)

A CSS-szelektorok típusai

A szelektoroknak három fő típusa van, és ezek különböző kapcsolatai. Ezen kívül létezik egy univerzális szelektor, attribútumválasztók, attribútum- és értékválasztók, valamint ezek reguláris kifejezésekkel történő kiválasztása.

Általában egy weboldal készítésekor csak az alapvető szelektorokat használjuk.

A CSS-választók fő típusai

1. Címkeválasztó— egy oldalelem kiválasztása a címke neve alapján Címkenév ( )
2. Választó osztály— oldalelem kiválasztása az osztály neve alapján.Osztálynév ( )
3. ID-választók— egy oldalelem kiválasztása az egyedi azonosítója neve alapján #UniqueIdentifier name ( )

A CSS-választók közötti kapcsolatok

A szelektorok közötti kapcsolat az, ha a CSS kódban valamilyen jel kerül közéjük: szóköz, vessző, szögletes zárójel stb. Így pontosabban kiválaszthatja az oldal bármely elemét.

1. Kontextusválasztók— leszármazott elemek kiválasztása szelektor választó ( ) (a kijelölők közé szóközt kell tenni).
2. Gyermekválasztók- választás gyermek elemek választó > választó ( ) (a választógombok közé nagyobb, mint jel kerül).
3. Szomszédos szelektorok— a szomszédos (testvér, testvér) elemek kiválasztása szelektor + választó ( ) (a kijelölők közé plusz jel kerül).

Ha valami nem világos, ne aggódj, minden szelektort és azok kapcsolatait külön-külön megvizsgáljuk, a csak nekik szánt cikkekben, ezeket a cikkeket csak kiegészítem :)

Attribútum- és értékválasztók

Attribútum- és értékválasztók- Jelölje ki az elemeket attribútumuk vagy attribútumuk és értékük alapján.

1. Attribútumválasztó— elem kiválasztása attribútumnév alapján [attribútum] ( )
2. Attribútum- és értékválasztó— egy elem kiválasztása az attribútum neve és értéke alapján [attribute = "value"] ( )

Univerzális választó

A CSS kódban univerzális választó csillagként írva * Egy univerzális választó szükséges ahhoz
hogy egyszerre állítsa be a CSS-tulajdonságokat az összes oldalelemhez. Általában az elemek kitöltésének visszaállítására szolgál, például:

* ( margó: 0; kitöltés: 0; )

Minden oldalelemnek 0 kitöltése van.

CSS (Cascading Style Sheets) egy stíluslapnyelv, amely lehetővé teszi stílus (például betűtípusok és színek) csatolását strukturált dokumentumokhoz (pl. HTML dokumentumokés XML alkalmazások). A CSS-stílusokat általában a weboldalak és a nyelven írt felhasználói felületek elemeinek stílusának létrehozására és módosítására használják. HTML nyelvekés XHTML, de alkalmazható bármilyen XML dokumentumra is, beleértve az XML-t, SVG-t és XUL-t. A dokumentum megjelenítési stílusának és a dokumentumtartalomnak a szétválasztásával a CSS megkönnyíti a weboldalak létrehozását és a webhelyek karbantartását.

A CSS támogatja a médiaspecifikus stíluslapokat, így a szerzők személyre szabhatják dokumentumaik megjelenítését vizuális böngészők, hallókészülékek, nyomtatók, Braille készülékek, kézi eszközök stb.

A lépcsőzetes stíluslapok az elemek formázására vonatkozó szabályokat írják le a tulajdonságok és a elfogadható értékeket ezeket a tulajdonságokat. Minden elemhez korlátozott számú tulajdonságot használhat, a többi tulajdonság nem befolyásolja őket.

A stílusdeklaráció két részből áll: választóÉs hirdetéseket. A HTML-ben az elemek nevei nem különböznek egymástól, így a "h1" ugyanúgy működik, mint a "H1". A nyilatkozat két részből áll: a tulajdonság nevéből (például szín) és a tulajdonság értékéből (szürke). A választó közli a böngészővel, hogy melyik elemet kell formázni, a deklarációs blokk (a kód kapcsos zárójelben) pedig felsorolja a formázási parancsokat - tulajdonságokat és azok értékeit.

Rizs. 1. Hirdetés szerkezete

Bár a bemutatott példa csak néhány olyan tulajdonságot próbál meg befolyásolni, amelyek egy HTML-dokumentum megjelenítéséhez szükségesek, önmagában stíluslapnak minősül. Más stíluslapokkal kombinálva (a CSS egyik alapvető jellemzője, hogy a stíluslapokat kombinálják), a szabály határozza meg a dokumentum végső megjelenítését.

A lépcsőzetes stíluslapok típusai és sajátosságaik

1. A stíluslapok típusai

1.1. Külső stíluslap

Külső stíluslap képviseli szöveges fájl a .css kiterjesztéssel, amely CSS-stílusokat tartalmaz elemekhez. A fájl kódszerkesztőben jön létre, akárcsak egy HTML-oldal. A fájl csak stílusokat tartalmazhat, HTML-jelölés nélkül. Egy külső stíluslap címkével kapcsolódik egy weboldalhoz , a szakaszon belül található . Ezek a stílusok a webhely összes oldalán működnek.

Minden weboldalhoz több stíluslapot is csatolhat, ha egymás után több címkét ad hozzá , jelezve ennek a stíluslapnak a célját a médiacímke attribútumban. rel="stylesheet" határozza meg a hivatkozás típusát (hivatkozás stíluslapra).

A type="text/css" attribútumot a HTML5 szabvány nem írja elő, ezért elhagyható. Ha az attribútum hiányzik, az alapértelmezett érték type="text/css" .

1.2. Belső stílusok

Belső stílusok szakaszba ágyazva HTML dokumentum és a címkén belül vannak meghatározva. A belső stílusok elsőbbséget élveznek a külsőkkel szemben, de alacsonyabbak a beépített stílusoknál (amelyeket a style attribútum határoz meg).

...

1.3. Beépített stílusok

Amikor írunk beépített stílusok, a CSS-kódot a HTML-fájlba írjuk, közvetlenül az elemcímkén belül a style attribútummal:

Ügyeljen erre a szövegre.

Az ilyen stílusok csak arra az elemre vannak hatással, amelyhez be vannak állítva.

1.4. @import szabály

@import szabály Lehetővé teszi külső stíluslapok betöltését. Ahhoz, hogy az @import direktíva működjön, meg kell jelennie a stíluslapon (külső vagy belső) minden más szabály előtt:

Az @import szabály a webes betűtípusok felvételére is használható:

@import URL(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cirill);

2. A szelektorok típusai

Kiválasztók egy weboldal szerkezetét képviselik. Segítenek szabályokat létrehozni a weboldal elemeinek formázására. A szelektorok lehetnek elemek, azok osztályai és azonosítói, valamint pszeudoosztályok és pszeudoelemek.

2.1. Univerzális választó

Bármely HTML elemhez illeszkedik. Például a * (margó: 0;) visszaállítja az összes webhelyelem margóját. A szelektor pszeudoosztállyal vagy pszeudoelemmel kombinálva is használható: *:after (CSS-stílusok) , *:checked (CSS-stílusok) .

2.2. Elemválasztó

Az elemválasztók lehetővé teszik egy adott típusú összes elem formázását a webhely összes oldalán. Például a h1 (font-family: Lobster, cursive;) beállítja az összes h1 címsor általános formázási stílusát.

2.3. Osztályválasztó

Az osztályválasztók lehetővé teszik, hogy stílust adjon meg egy vagy több elemhez azonos osztálynévvel, amelyeket az oldalon vagy különböző oldalak webhely. Ha például címet szeretne létrehozni a headline class attribútumával, hozzá kell adnia a class attribútumot a headline értékkel a nyitó címkéhez.

és állítsa be a stílust a megadott osztályhoz. Az osztály használatával létrehozott stílusok más elemekre is alkalmazhatók, nem feltétlenül az adott típusúra.

.headline ( szövegátalakítás: nagybetűs; szín: világoskék; )

Ha egy elemnek több osztályattribútuma van, akkor azok értékeit szóközökkel fűzzük össze.

Útmutató a személyi számítógép használatához

2.4. ID választó

Az azonosító választó lehetővé teszi a formázást egy konkrét elem. Az azonosító értékének egyedinek kell lennie, csak egyszer jelenhet meg egyetlen oldalon, és legalább egy karaktert kell tartalmaznia. Az érték nem tartalmazhat szóközt.

Nincs más korlátozás arra vonatkozóan, hogy az azonosító milyen formában jelenhet meg; különösen az azonosító lehet minden szám, kezdődhet számmal, kezdődhet aláhúzással, csak írásjelek lehetnek stb.

Egy elem egyedi azonosítója többféle célra használható, például a dokumentum meghatározott részeire való hivatkozásként töredékazonosítók használatával, egy elem célzásának módjaként szkripteléskor, valamint egy adott elem stílusának CSS-ből történő kialakításának módjaként. .

#oldalsáv (szélesség: 300 képpont; lebegés: balra; )

2.5. Leszármazott választó

A leszármazott választók stílusokat alkalmaznak a tárolóelemen belüli elemekre. Például az ul li (szövegtranszformáció: nagybetűs;) - kijelöli az összes li elemet, amely az összes ul elem gyermeke.

Ha utódokat kell formázni konkrét elem, ennek az elemnek stílusosztályt kell adni:

p.first a (szín: zöld;) - ez a stílus az első osztályú bekezdés leszármazottaira vonatkozik;

p .first a (szín: zöld;) - ha szóközt ad hozzá, a .first osztályú címkékben található hivatkozások, amelyek az elem gyermekei, stílust kapnak

Először a (szín: zöld;) - ez a stílus minden hivatkozásra vonatkozik, amely egy másik elemen belül található, és amelyet a class.first jelöl ki.

2.6. Gyermekválasztó

A gyermekelem a benne lévő elem közvetlen gyermeke. Egy elemnek több gyermekeleme lehet, de minden elemnek csak egy szülőeleme lehet. A gyermekválasztó csak akkor engedi meg a stílusok alkalmazását, ha a gyermekelem közvetlenül a szülőelem után érkezik, és nincs közöttük más elem, vagyis a gyermekelem nincs máson belül ágyazva.
Például a p > strong kijelöli az összes erős elemet, amely a p elem gyermeke.

2.7. Nővér választó

A testvéri kapcsolat olyan elemek között jön létre, amelyeknek közös szülője van. A testvérválasztók lehetővé teszik, hogy elemeket jelöljön ki egy azonos szintű elemcsoportból.

h1 + p – minden címke után közvetlenül kijelöli az összes első bekezdést

a többi bekezdés érintése nélkül;

h1 ~ p – kijelöli az összes olyan bekezdést, amely bármely h1 címsor testvére, és közvetlenül utána.

2.8. Attribútumválasztó

Az attribútumválasztók az attribútum neve vagy értéke alapján választanak ki elemeket:

[attribútum] - minden elem, amely tartalmazza a megadott attribútumot - minden olyan elem, amelyhez az alt attribútum megadva van;

selector[attribútum] - ilyen típusú elemek, amelyek a megadott attribútumot tartalmazzák, img - csak azok a képek, amelyekhez az alt attribútum meg van adva;

selector[attribútum="érték"] - ilyen típusú elemek, amelyek a megadott attribútumot tartalmazzák meghatározott értékkel, img - minden kép, amelynek címe a virág szót tartalmazza;

selector[attribútum~="érték"] - részben tartalmazó elemek adott értéket, például ha egy szóközzel elválasztott elemhez több osztály van megadva, akkor p - bekezdések, amelyeknek az osztály neve tartalmaz jellemzőt ;

selector[attribútum|="érték"] - olyan elemek, amelyek attribútumértékeinek listája a megadott szóval kezdődik, p - bekezdések, amelyek osztályneve jellemző, vagy jellemzővel kezdődik;

selector[attribútum^="érték"] - olyan elemek, amelyek attribútumértéke a megadott értékkel kezdődik, a - minden http://-vel kezdődő hivatkozás;

selector[attribute$="value"] - olyan elemek, amelyek attribútumértéke a megadott értékre végződik, img - minden kép png formátumban;

selector[attribútum*="érték"] - olyan elemek, amelyek attribútumértéke bárhol tartalmazza a megadott szót, a - minden hivatkozás, amelynek neve tartalmazza a könyvet.

2.9. Pszeudoosztály választó

A pszeudoosztályok olyan osztályok, amelyek valójában nincsenek HTML-címkékhez csatolva. Lehetővé teszik CSS-szabályok alkalmazását az elemekre, amikor egy esemény bekövetkezik, vagy megfelel egy adott szabálynak. A pszeudoosztályok a következő tulajdonságokkal rendelkező elemeket jellemzik:

:hover - minden olyan elem, amely felett az egérkurzort mozgatjuk;

:focus - egy interaktív elem, amelyhez a billentyűzet segítségével navigált vagy az egérrel aktivált;

:active - a felhasználó által aktivált elem;

:valid - űrlapmezők, amelyek tartalmát a böngészőben ellenőriztük, hogy megfelel-e a megadott adattípusnak;

:invalid — olyan űrlapmezők, amelyek tartalma nem egyezik a megadott adattípussal;

:enabled - minden aktív űrlapmező;

:disabled — blokkolt űrlapmezők, azaz inaktív állapotban;

:in-range - űrlapmezők, amelyek értékei a megadott tartományban vannak;

:out-of-range - olyan mezők, amelyek értékei nem a megadott tartományon belül vannak;

:lang() - elemek a megadott nyelvű szöveggel;

:not(selector) - a megadott szelektort nem tartalmazó elemek - osztály, azonosító, név vagy űrlapmező típusa - :not() ;

A :target egy # szimbólumú elem, amelyre hivatkozik a dokumentum;

:checked — kiválasztott (felhasználó által kiválasztott) űrlapelemek.

2.10. Strukturális pszeudoosztály-szelektor

A strukturális pszeudoosztályok a gyermekelemeket a zárójelben megadott paraméter szerint választják ki:

:nth-child(páratlan) - páratlan gyermekelemek;

:nth-child(páros) - páros gyermekelemek;

:nth-child(3n) - minden harmadik elem a gyerekek között;

:nth-child(3n+2) - minden harmadik elemet kiválaszt, a második gyermektől kezdve (+2) ;

:nth-child(n+2) - minden elemet kiválaszt a másodiktól kezdve;

:nth-child(3) - kiválasztja a harmadik gyermek elemet;

:nth-last-child() - a gyermekelemek listájában kiválasztja a megadott helyű elemet, hasonlóan az :nth-child() -hez, de az utolsótól kezdve, ellenkező irányban;

:first-child - csak a címke legelső gyermek elemének stílusát teszi lehetővé;

:last-child - lehetővé teszi a címke utolsó gyermek elemének formázását;

:only-child - kiválaszt egy elemet, amely az egyetlen gyermek elem;

:empty - olyan elemeket jelöl ki, amelyeknek nincs gyermeke;

:root - kiválasztja azt az elemet, amely a dokumentum gyökere - a html elemet.

2.11. Strukturális típusú pszeudoosztály választó

Az alárendelt címke meghatározott típusát jelzi:

:nth-of-type() - az :nth-child() -hez hasonló elemeket választ ki, de csak az elem típusát veszi figyelembe;

:first-of-type - kiválasztja az adott típus első gyermekét;

:last-of-type - kiválasztja a típus utolsó elemét;

:nth-last-of-type() - a végétől kezdve kiválaszt egy adott típusú elemet egy elemlistában a megadott hely szerint;

:only-of-type - a szülőelem gyermekelemei közül kiválasztja a megadott típusú egyetlen elemet.

2.12. Pszeudoelem választó

A pszeudoelemek a tartalom hozzáadására szolgálnak, amelyet a tartalom tulajdonság segítségével állítanak elő:

:first-letter - minden bekezdés első betűjét választja ki, csak blokkelemekre vonatkozik;

:first-line - kijelöli az elemszöveg első sorát, csak a blokkelemekre vonatkozik;

:befor - beszúrja a generált tartalmat az elem elé;

:after - generált tartalmat ad hozzá az elem után.

3. Kiválasztó kombináció

A formázandó elemek pontosabb kiválasztásához használhatja a kiválasztók kombinációit:

img:nth-of-type(páros) – kijelöli az összes páros számú képet, amelynek alternatív szövege tartalmazza a css szót.

4. Csoportosítási szelektorok

Ugyanaz a stílus egyszerre több elemre is alkalmazható. Ehhez a deklaráció bal oldalán, vesszővel elválasztva fel kell sorolni a szükséges választókat:

H1, h2, p, span ( szín: paradicsom; háttér: fehér; )

5. Öröklődés és kaszkád

Az öröklődés és a kaszkád a CSS két alapvető fogalma, amelyek szorosan összefüggenek. Az öröklődés az, amikor az elemek a szülőjüktől (az őket tartalmazó elemtől) öröklik a tulajdonságokat. A kaszkád abban nyilvánul meg, hogyan különböző típusok stíluslapokat alkalmaznak egy dokumentumra, és hogyan írják felül egymást az ütköző szabályok.

5.1. Öröklés

Öröklés az a mechanizmus, amellyel bizonyos tulajdonságokat átadnak egy őstől a leszármazottaihoz. A CSS-specifikáció lehetővé teszi az oldal szöveges tartalmához kapcsolódó tulajdonságok öröklését, például szín, betűtípus, betűköz, sormagasság, listastílus, szövegigazítás, szöveg behúzás, szövegátalakítás, láthatóság, fehér -szóköz és szóköz. Ez sok esetben kényelmes, mert nem kell a weboldal minden eleméhez beállítani a betűméretet és a betűcsaládot.

A blokkformázással kapcsolatos tulajdonságok nem öröklődnek. Ezek a háttér , szegély , kijelző , lebegés és átlátszó , magasság és szélesség , margó , minimum magasság és szélesség , körvonal , túlcsordulás , padding , pozíció , szövegdekoráció , függőleges igazítás és z-index .

Kényszer öröklés

Használva kulcsszó Az inherit arra kényszerítheti az elemet, hogy örökölje a szülőelem bármely tulajdonságértékét. Ez még olyan tulajdonságoknál is működik, amelyek alapértelmezés szerint nem öröklődnek.

A CSS-stílusok beállítása és működése

1) A stílusok örökölhetők a szülőelemtől (örökölt tulajdonságok vagy az inherit value használatával);

2) Az alábbi stíluslapon található stílusok felülbírálják a fenti táblázatban található stílusokat;

3) Különböző forrásokból származó stílusok alkalmazhatók egy elemre. A böngésző fejlesztői módjában ellenőrizheti, hogy mely stílusok kerülnek alkalmazásra. Ehhez kattintson a jobb gombbal az elemre, és válassza a „Kód megtekintése” (vagy valami hasonló) lehetőséget. A jobb oldali oszlop felsorolja az ezen az elemen beállított vagy egy szülőelemtől örökölt összes tulajdonságot, a stílusfájlokkal együtt, amelyekben ezeket megadták, és a kódsor sorszámát.

Rizs. 2. Fejlesztői mód be Google böngésző Króm

4) A stílus definiálásakor a szelektorok tetszőleges kombinációját használhatja - elemválasztót, elem pszeudoosztályt, osztályt vagy elemazonosítót.

div (szegély: 1px tömör #eee;) #wrap (width: 500px;).box (lebegés: balra;).clear (clear: mindkettő;)

5.2. Vízesés

Lépcsőzetes egy olyan mechanizmus, amely szabályozza a végeredményt olyan helyzetben, amikor különböző CSS-szabályokat alkalmaznak ugyanarra az elemre. Három feltétel határozza meg a tulajdonságok alkalmazásának sorrendjét – a!fontos szabály, a konkrétság és a stíluslapok felvételének sorrendje.

Szabály!fontos

A szabály súlya a!important kulcsszóval adható meg, amely közvetlenül a tulajdonság értéke mögé kerül, például span (font-weight: bold!important;) . A szabályt a deklaráció végén, a záró zárójel előtt, szóköz nélkül kell elhelyezni. Az ilyen bejelentések elsőbbséget élveznek minden más szabállyal szemben. Ez a szabály lehetővé teszi egy tulajdonság érték törlését és új érték beállítását egy elemcsoport eleméhez abban az esetben, ha nincs közvetlen hozzáférés a stílusfájlhoz.

Specifikusság

A böngésző minden szabályra kiszámítja szelektor specifikusság, és ha egy elemnek egymásnak ellentmondó tulajdonságnyilatkozatai vannak, akkor a legspecifikusabb szabályt veszi figyelembe a rendszer. A specificitás értékének négy része van: 0, 0, 0, 0. A szelektor specifitását a következőképpen határozzuk meg:

id esetén 0, 1, 0, 0 hozzáadódik;
a 0. osztályhoz hozzáadódik a 0, 1, 0;
minden elemhez és pszeudoelemhez 0, 0, 0, 1 kerül hozzáadásra;
közvetlenül egy elemhez hozzáadott soron belüli stílus esetén - 1, 0, 0, 0 ;
Az univerzális szelektornak nincs specifikussága.

H1 (szín: világoskék;) /*specifitás 0, 0, 0, 1*/ em (szín: ezüst;) /*specifitás 0, 0, 0, 1*/ h1 em (szín: arany;) /*specifitás: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (szín: kék;) /*specifitás: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .oldalsáv (szín: szürke;) /*specifitás 0, 0, 1, 0 */ #sidebar (szín: narancssárga;) /*specificitás 0, 1, 0, 0*/ li#sidebar (szín: aqua;) /*specifitás: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Ennek eredményeként a konkrétabb szabályok érvényesülnek az elemre. Például, ha egy elemnek két sajátossága van 0, 0, 0, 2 és 0, 1, 0, 1 értékekkel, akkor a második szabály nyer.

Összekapcsolt táblák sorrendje

Létrehozhat több külső stíluslapot, és összekapcsolhatja őket egy weboldallal. Ha egy elemhez különböző tulajdonságértékek találhatók a különböző táblázatokban, akkor ennek eredményeként az alább felsorolt ​​stíluslapon található szabály érvényesül az elemre.

Ez az anyag az internetes források szelektorok segítségével történő stílusának alapjaival foglalkozik.

A CSS szelektorai egy adott definiálására szolgálnak
elemet a html oldalon, amelyre jelentkezni kell
vagy módosítsa a CSS stílust.

A szelektorok típusai a CSS-ben

Elemválasztó

A szükséges CSS-stílus megadásához ebben az esetben a nevet szelektorként írjuk be html elem. Például elég megadni a kívánt stílust a H1 címsorhoz, ami után ezek a címsorok az általunk igényelt formát öltik. Így fog kinézni a kód:

H1 (
betűméret: 11 pont;
}

Gyakran előfordul, hogy különböző stílusú címsorokat kell készítenie. Itt egy osztályválasztó segít megoldani ezt a problémát.

Választó osztályonként

Az osztályválasztó univerzális a CSS-ben. A következőképpen írhatod: az osztály neve elé írunk egy pontot, és csak ezután jelöljük zárójelben a kívánt stílust:

.red (
font-family: tahoma, sans-serif;
piros szín;
betűméret: 11 pont;
}

Példa az osztályválasztó használatára. Alkalmazza ezt a stílust a H1 címsorra html oldal:

Lap cím

A fenti példából láthatja, hogy a "class" attribútum a megadott CSS-stílusnévvel van alkalmazva " piros".
Egy másik példa. A html részben ezt írjuk:

Ez a fejléc kék, mert a megfelelő osztály van rá alkalmazva

id".

A html dokumentumban így fog kinézni:

Állítsuk be ennek a bekezdésnek a stílusát

A CSS dokumentumban:

p#newstyle (szín: kék; betűméret: 12px;)

Ennek eredményeként 12 képpont méretű kék ​​betűtípust használunk ehhez a bekezdéshez.

Kontextus választó

Ugyanilyen szükséges összetevő az kontextus választó.
Például egy webhelyen szükség volt a „H1” címsorra, a címkével együtt bátor pirossal kiemelve:

H1 félkövér (szín:piros; )

Amint látja, először a H1 címsor kerül beírásra, szóköz kerül hozzáadásra, a címke bátor majd zárójelben az általunk megadott stílust. Ez a következő szavakkal fejezhető ki: "Ha a H1 fejlécben félkövér címke található, a szövegnek pirosnak kell lennie."

Ily módon stílusokat is beállíthat a felsorolásjeles listákban, táblázatokban, sőt celláikban lévő elemekhez is, különböző beágyazási szintekkel.

Következő oldal -

Ma megvizsgáljuk a CSS-szelektorok koncepcióját, és azt, hogyan használhatjuk őket HTML-jelölésünk lerövidítésére, tisztábbá téve azt.

A CSS-választó az az elem, amelyre a CSS-tulajdonságokat alkalmazni fogjuk. A „választó” szó magától értetődő; választást jelent.

P (szín: piros) div span (háttér: zöld) ul li (lista-stílus: nincs)

Osztály és azonosító választó

A fenti példában 3 választó van: p, div span, ul li. Vagyis a teljes stílusfájlunk szelektorokból és tulajdonságaikból áll. A legkényelmesebb és intuitívabb, különösen a kezdők számára, ha a címke osztálynevét vagy a címke egyedi azonosítóját használja választóként. Ahhoz, hogy osztályt vagy azonosítót rendeljünk bármely címkéhez, meg kell adnunk azt a címke attribútumai között. Egy adott címkének legfeljebb 1 azonosítója és végtelen számú osztálya lehet. Példa:

szöveg az első div

szöveg a második div

szöveg a harmadik div

Amire érdemes odafigyelni:

• Osztályok és azonosítók bármely (minden) címkéhez hozzárendelhetők.
• Minden azonosító egyedi, és nem ismételhető meg ugyanazon az oldalon, ellentétben az osztályokkal!
• Ugyanaz az osztály bármely címkéhez hozzárendelhető, és tetszőleges számú alkalommal megismételhető egy oldalon.
• Ha egy adott címkéhez több osztályt akarunk hozzárendelni, egyszerűen adjuk meg őket szóközzel elválasztva.
• Az osztályok és az azonosítók neve megegyezhet, de a néven kívül semmi közös nem lesz közöttük.

Hogyan hivatkozhatunk osztályra vagy azonosítóra egy stíluslap (CSS) fájlban?

Nézzünk egy példát:

#first (szín: piros;) /* az elsőként megnevezett azonosító elérése */.second (szín: kék;) /* eléri a második nevű osztályt */#first .second (szín: narancssárga;) /* CSAK akkor érheti el a második nevű osztályt, ha az első azonosítójú címkén belül van */.first .third (szín: szürke;) /* CSAK akkor hivatkozzon a harmadik nevű osztályra, ha egy olyan címkén BELÜL, ahol az osztály az első */

Esetünkben az utolsó két utasítás nem fog működni, mivel nincsenek osztályok, amelyek adott attribútumú címkékbe vannak ágyazva. Amint azt már észrevetted, annak jelzésére, hogy kifejezetten az id-re utalunk, a neve elé egy hash jelet (#) kell tennünk szóközök nélkül; ha osztályra utalunk, akkor egy pontot (. ) az osztály neve előtt.

Az osztályok és azonosítók használata nagyon kényelmes, de növeli a HTML jelölésünket, ideális esetben (ami soha nem létezik) egyáltalán ne használjuk őket, helyette a szelektorok kombinációit, csoportosításait használjuk, a cikk többi része róluk fog szólni, de ! De ez egyáltalán nem jelenti azt, hogy teljesen fel kell hagynia az osztályok és azonosítók használatával, csak azt kell szem előtt tartania, hogy nagyon gyakran ahelyett, hogy új osztályt vagy azonosítót hozna létre, meg lehet boldogulni az alábbiakban leírt technikákkal, és is elég kényelmes.

Mi a különbség az osztály és az azonosító között?

A fenti különbségeken túl azt is érdemes megjegyezni, hogy az id által meghatározott tulajdonságok magasabb prioritásúak, mint az osztályhoz rendelt tulajdonságok. Vagyis ha azt írjuk:

szöveg díva nyelven

Ekkor a szöveg színe piros lesz, annak ellenére, hogy az osztály lejjebb van a kódban, és ha egyenlő prioritást kapnának, a szöveg kékre váltana.

Szintaxis szerint: osztályos esetekben kiválaszthatjuk, hogy melyik tag legyen ez az osztály, ehhez a címkenév után szóköz NÉLKÜL az osztályra kell hivatkozni. Példa:

Saját osztály (tulajdonságok) A /* minden olyan címkére vonatkozik, amely a myclass osztályt tartalmazza */ div.myclass (tulajdonságok) A /* csak azokra a div címkékre vonatkozik, amelyek a myclass osztályt tartalmazzák */

Ez az id esetén is működik, de egy ilyen bejegyzés értelmetlen, mivel az id nem ismételhető meg az oldalon, ami azt jelenti, hogy elég egyszerűen deklarálni az id-t a címke nélkül, amelyre hivatkozik:

szöveg

Úgy tűnik, csak egy meg nem határozott különbség maradt, és ez egy olyan témát érint, amelyet a közeljövőben ezen a blogon nem kívántam érinteni - a Javascriptet. De még mindig el kell mondanom: ha Javascript segítségével szeretne hozzáférni egy elemhez, akkor ehhez az elemhez nagyon kényelmes lesz egy azonosító. Ahhoz, hogy egy elemre az osztálya szerint hivatkozzon a Javascriptben, nincs ilyen beépített funkció, segédfunkciókat kell használnia + ez nem mindig keresztböngésző.

A lényeg: használjuk az id-t és a class-t, de mértékkel, mindig feltesszük magunknak a kérdést, hogy lehet-e nélkülük, és mennyire célszerű.

Kapcsolódó választó

Div p (szín: zöld;) /* Kiválasztó gyermek szerint */ p (szín: piros;) /* választó címkével */

De ahogy az előző cikkben már írtam, az első esetben a CSS-tulajdonságok minden p címkére vonatkoznak, amelyek a div címke BÁRMELY mélységében vannak beágyazva. De mi van akkor, ha a tulajdonságokat csak a közvetlen leszármazottakra akarjuk alkalmazni, vagyis a beágyazás első szintjére:

Harmadik szint

Közvetlen örökös (első szint)

Második szint

Közvetlen örökös (első szint)

Ebben az esetben az ún. kapcsolódó választót kell használnunk, szögletes zárójellel jelöljük, szóközt is használhatunk, vagy ki is hagyhatjuk, én nem ajánlom:

Div>p (szín: kék;) /* csak az első beágyazási szint */ div p (szín: kék;) /* abszolút minden bekezdés a divben */

Univerzális választó

Ezt rendeztük, már 3 féle szelektor van a tarsolyunkban, most egy nagyon szokatlan szelektorról szeretnék mesélni, ami kiemelkedik a többi közül - ez az univerzális szelektor, amit a egy csillag (*):

* (margó: 0; kitöltés: 0;)

Én így kezdek minden új projektet, és ezt tanácsolom neked is. Az univerzális választó minden oldalelemre (címkére) vonatkozik, de nulla prioritása (csak alatta nincs prioritás). Általában a böngészők által egyes címkékhez alapértelmezés szerint beállított CSS-tulajdonságok felülbírálására használják. Képzeld, ez tényleg megtörténik! A böngészők alapértelmezés szerint számos címkéhez állítják be saját tulajdonságaikat, például a hiperhivatkozási címkéhez kék szöveg színe és aláhúzása, beállítják a body tag-hez kitöltést stb. Semmi szükségünk arra, hogy ezt emlékezzünk, ismerjük és használjuk, ezért egy univerzális választó segítségével azonnal eltávolítjuk a legbanálisabb tulajdonságokat, azonban nem javaslom, hogy mást adjunk hozzá (vagy adjunk hozzá, de óvatosan), a legkisebb ellenére sem. (null ) az univerzális választó prioritása, bizonyos esetekben még mindig felülírhat más tulajdonságokat, ezért tartsa szem előtt.

Mellesleg, a választókkal végzett munka során, mint minden, az elrendezés elrendezésével kapcsolatos munka során, nagyon kényelmes az oldalelemek megtekintése. Ha még nem vagy tisztában olyan dolgokkal, mint az Opera Dragonfly, Firebug és általában a webellenőrök, akkor túlzás nélkül sürgősen el kell olvasnod a fenti linken található cikket! Aki pedig használt már hasonlót, kérem kövessen.

Álosztályok

Az osztályokkal ellentétben a pszeudoosztályokat nem kell megadni a HTML jelölésben, ezeket a böngésző maga számítja ki. 4 statikus pszeudoosztályunk és 3 dinamikus pszeudoosztályunk van, a CSS 3 kivételével, erről a vége felé bővebben. A statikusak a következők: (:first-child, :link, :visited, :lang()):

Közvetlen örökös (első szint)

Harmadik szint

Közvetlen örökös (első szint)

Második szint

Közvetlen örökös (első szint)

Eredmény:

Természetesen a kiválasztókat tetszés szerint kombinálhatja, például:

Div>span p:first-child (szín: zöld;) /* fog működni, ha p a szülőjének első gyermeke, és egy span címkén belül van, amely a div címke közvetlen gyermeke */

A fent bemutatott pszeudoosztály neve magáért beszél: első gyermek - az első gyermek.

A következő két statikus pszeudoosztály csak a hiperhivatkozás címkéjére vonatkozik (:link, :visited), CSS-tulajdonságokat alkalmaznak attól függően, hogy a hivatkozást egy adott felhasználó meglátogatta-e vagy sem:

A:link (szín: kék;) /* beállítja a kék színt a nem látogatott hivatkozásokhoz, és alapértelmezés szerint aláhúzva vannak */ a:látogatott (szín: zöld; szövegdekoráció: nincs;) /* a meglátogatott linkeken piros szöveg lesz, távolítsa el az aláhúzást */

A pszeudo-class:lang() a nyelvtől függően eltérő stílust biztosít. A nyelv, amelyre a tervezést alkalmazni kell, zárójelben van feltüntetve. Ez felhasználható például különböző idézetstílusok megadására az idézőjelekben:

Q:lang(de) (idézőjel: "\201E" "\201C";) /* idézetek németül */ q:lang(en) (idézőjel: "\201C" "\201D";) /* idézetek angolul */ q:lang(ru) (idézőjel: "\00AB" "\00BB";) /* idézetek orosz nyelvre */

Talán ez az egyetlen lehetséges típusú választó, amelyet soha nem használtam.

Dinamikus pszeudoosztályok

A dinamikus pszeudoosztályok a következők: :active, :hover, :focus. A dinamikus pszeudoosztályokat egy adott művelet váltja ki az oldalon, minden címkére működnek, és nem csak linkekre, ahogy azt sokan gondolják, sőt állítják a blogjukon! Tekintsük az alkalmazásukat:

P:aktív (háttér: piros;) /* stílus, amely akkor kerül alkalmazásra a címkére, amikor rákattint (egérkattintás) */ bemenet:fókusz (szélesség: 400 képpont;) /* stílus, amely az aktuálisan fókuszált elemre lesz alkalmazva (működik például a szövegbeviteli mezőknél: textarea, input). Ebben az esetben a fókuszáláskor a bemenet szélessége 400 pixel lesz, ami kényelmesen használható a mező meghosszabbításának gyönyörű hatásához kattintással. */ div:hover (háttér: zöld;) /* Akkor aktiválódik, amikor a kurzor egy elem fölé viszi, főként arra szolgál, hogy gyönyörű hatást keltsen a hivatkozások felett. */

Alkalmazza ezeket a stílusokat a fenti példánkra, és meglátja.

Szomszédos szelektorok

A szomszédos kiválasztók a kód alatti legközelebbi szomszédok, nem a gyerek! Nagyon kényelmes választó:

szöveg az első div

szöveg a bekezdésben KÍVÜL div

szöveg a második rész bekezdésében

szöveg terjedelemben

a bekezdés ismét a diven kívül van

Eredmény:

Általánosított szomszédos szelektorok

Az általánosított szomszédos szelektorok pontosan úgy működnek, mint a szokásos szomszédos szelektorok, azzal a különbséggel, hogy a tulajdonságok nem csak az alábbi első szomszédra vonatkoznak, hanem az összes alábbi szomszédra:

szöveg díva nyelven

bekezdés

bekezdés

bekezdés

szöveg terjedelemben

bekezdés

bekezdés

bekezdés díva nyelven

bekezdés díva nyelven

szöveg terjedelemben

bekezdés

Eredmény:

Attribútumválasztók

Az attribútumválasztók lehetővé teszik olyan címkék elérését, amelyek rendelkeznek a szükséges attribútummal, vagy akár egy adott értékkel:

P (tulajdonságok) /* minden p címkére vonatkozik, amely align attribútummal rendelkezik */ p (tulajdonságok) /* ahol az align attribútum értéke középen van */ p (tulajdonságok) /* ahol az align attribútum értéke középen kezdődik */ p (tulajdonságok) /* ahol az align attribútum értéke középpontot tartalmaz */ p (tulajdonságok) /* ahol a webhely szóközzel elválasztható () */ p (tulajdonságok) /* ahol az osztály attribútum értéke csak a site szóból áll, vagy azzal kezdődik, amelyet egy kötőjel és az érték többi része ( vagy ) követ */ p (tulajdonságok) /* ahol az align attribútum értéke középre végződik */

CSS 3 pszeudoosztályok

Már megismerte az összes fő választót, és ez elég lesz számodra az első pár napban. A CSS 3-ban azonban sok új álosztály jelent meg, most már nem csak az első gyereket vehetjük fel, hanem bármelyik másik gyereket is, mehetünk az ellenkezőjéről is, nem az első, hanem az utolsó gyereket vehetjük, stb. és így tovább. Mindez nagyon kényelmes és praktikus, kivéve, hogy problémái lehetnek az IE régebbi verzióival. Gyűjtsük össze minden erőnket, és menjünk végig az összes megmaradt szelektoron, hogy később ezeket szem előtt tarthassuk saját elrendezésünk elkészítésekor.

:last-child – analóg:first-child, de nem az első, hanem az utolsó gyereket veszi.

:only-child – akkor működik, ha az elem (tag) az egyetlen gyermek.

:only-of-type - akkor működik, ha az elem (tag) a típusának egyetlen gyermeke.

:nth-child() – a gyerekekre utal sorszámuk alapján, minden páros vagy páratlan számhoz hozzáférhet. Például:

bekezdés

bekezdés

bekezdés

szöveg terjedelemben

bekezdés

bekezdés

bekezdés

bekezdés

bekezdés

bekezdés

Eredmény:

:nth-last-child – ugyanúgy működik, mint az előző, de a jelentés a végéről kezdődik.

:first-of-type – típusának első gyermeke a közvetlen szülőn belül.

:last-of-type – típusának utolsó gyermeke a közvetlen szülőn belül.

:empty – azoknál a címkéknél fog működni, amelyek egyetlen karaktert sem tartalmaznak (nincs szöveg).

:not() – kivételt dob ​​az adott elemekre. Példa:

bekezdés osztálynévvel

bekezdés

bekezdés

bekezdés osztálynévvel

Eredmény:

Mezők, űrlapok, rádiógombok és jelölőnégyzetek kezelése CSS-ben

:enabled - az elérhető felületelemekre vonatkozik, mint például űrlapok, gombok, kapcsolók stb. Alapértelmezés szerint az összes felületelem elérhető.

:disabled – a letiltott felületelemekre vonatkozik, mint például a gombokra, űrlapokra stb. Az interfészelemek le vannak tiltva, ha hozzáadja hozzájuk a disabled attribútumot HTML-ben vagy a disabled="disabled" attribútumot XHTML-ben.

:checked – olyan interfészelemekre vonatkozik, mint a rádiók és a jelölőnégyzetek, amikor azok bekapcsolt helyzetben vannak.

Pszeudo-elemek

A pszeudoelemeket a pszeudoosztályokhoz hasonlóan a böngésző automatikusan kiszámolja, emiatt nem kell aggódnunk. Annak érdekében, hogy a CSS 3 specifikációban ne keverjék össze a pszeudoelemeket a pszeudoosztályokkal, úgy döntöttek, hogy az egyetlen kettőspont helyett kettős kettőspontot használnak, mint a CSS 2 esetében. Ezért az interneten találhat pszeudo-t. -elemek egy kettősponttal és kettős kettősponttal - mindkettő helyes. Az IE-vel való jobb kompatibilitás érdekében azonban ajánlatos egyetlen kettőspontot használni.

:first-line – az első sor egy blokkon vagy táblázatelemen belül.

:first-letter – a blokk elemen belüli első betű.

A lényeg: most már ismeri és ki tudja használni a lépcsőzetes stíluslapok teljes erejét, de ez nem jelenti azt, hogy azonnal sietnie kell a weboldal elrendezésének elkészítéséhez annyi szelektor, pszeudoosztály és pszeudoelem felhasználásával, amennyit ma megtanult. Felsoroltam az összes lehetséges eszközt, és csak a legszükségesebbet válassza ki magának.

A HTML CSS-sel történő optimalizálásának előnyei

A fentiek egyik lényege, hogy el kell távolodni a HTML-ben a class és id attribútumok mindenütt használatától, így mindent a hatalmas stíluslapokra bízva.

A külső stílusfájlok, akárcsak a külső Javascript fájlok, tökéletesen gyorsítótárazottak, ami azt jelenti, hogy amikor a webhely bármely oldalát először látogatja meg, a felhasználó böngészője megjegyzi ezeket a fájlokat, és többé nem tölti le őket, ellentétben magával a webhely oldalával, azaz HTML-jelölése, képek és szövegek, amelyeket a böngésző újra és újra letölt. Ugyanez vonatkozik a keresőmotorokra is, egyáltalán nem törődnek a külső fájljaival, de a HTML-jelölések mennyiségével és tartalmával igen. A keresőmotoroknak az oldal teljes szerkezetét fel kell térképezniük, és az Ön érdeke, hogy ebben segítse őket, hogy erőfeszítéseiket a tartalomra összpontosítsák, és ne egy csomó osztályból és azonosítóból álló nehézkes jelölőfalra, vagy rosszabb - Javascript eseménykezelők és CSS-stílusok közvetlenül a címkeattribútumokban (és ez még mindig megtörténik).

Lehet vitatkozni velem, azt mondják, rákényszeríthetjük a kliens böngészőt, hogy töltsön le minden csatlakoztatott fájlt, képet a helyi környezetébe, gyorsítótárazzon a teljes oldalt, és így tovább, és így tovább. Ilyen háttér előtt egy ilyen apróság teljesen elveszett, de így vagy úgy, ha a HTML jelölést a lehető legnagyobb mértékben csökkenti, akkor csak nyer, anélkül, hogy bármit is elveszítene, kivéve egy lehetséges szokást.

Összefoglalva: a HTML optimalizálásának és csökkentésének köszönhetően nagyon csekély nyereségünk van az oldal betöltési sebességében és a SEO-ban (keresőoptimalizálás), valamint a tisztább kódban.

Nos, kezdésként elmondom, hogy a szelektor arra szolgál, hogy egyedileg azonosítsa azt az elemet a html dokumentumban, amelyre egy adott CSS-stílust alkalmazni szeretnénk.

Elemválasztó

Eddig a pontig ezzel a választóval dolgoztunk. Kiválasztóként annak a html elemnek a nevét használtuk, amelyre ezt a stílust alkalmazni akartuk. Azok. Miután írtunk egy osztályt például a (P) bekezdéshez, az oldalon lévő összes bekezdés megkapta ennek az osztálynak a stílusát.

P{
betűméret: 12 képpont
}

Most képzeljen el egy olyan helyzetet, amikor az első bekezdést az egyik stílusban kell elkészítenie, a másodikat egy másikban, a harmadikat egy harmadikban stb. Itt a segítségünkre lesz osztályonkénti választó.

Választó osztályonként

Nézzük meg, hogyan lehet általános osztályt létrehozni a CSS-ben. És ezt nagyon egyszerű megtenni: először pontot teszünk, majd azonnal, szóköz nélkül, zárójelbe írjuk az osztály nevét, majd a stílust. Nos például:

.zöld {
font-család: arial, verdana, sans-serif;
betűméret: 12 képpont; szín: zöld;
}

Hogyan kell alkalmazni ezt a stílust?

Tegyük fel, hogy ezt a stílust a dokumentum egy adott bekezdésére szeretnénk alkalmazni. Így fog kinézni html-ben:

class="zöld" > ... bekezdés szövege...

Mint látható, az attribútum használatban van osztály a stílusnév jelentésével. Ez egyértelmű? Íme egy másik példa az Ön számára:

Ez egy normál bekezdés, elemválasztót használ

Osztály ="zöld "> Ez a bekezdés zöld, mert egy osztályt alkalmaztak rá

Class="nagy_piros" > És ez a bekezdés nagyobb betűtípussal és pirossal van

Ez a bekezdés ismét normális, elemválasztó osztály szerint

p {
font-family:arial,verdana,sans-serif;
betűméret: 18 képpont;
}
.zöld(szín: zöld;)
.nagy piros{
betűméret: 28 képpont;
piros szín;
}

Először minden bekezdéshez megadjuk az alapstílust (elemenkénti kijelölő), majd ha valamelyik bekezdésben változtatni akarunk valamit, készítsünk hozzá egy speciális stílust (osztály szerinti választó), és ehhez a bekezdéshez rendeljük. Amikor létrehozzuk ezt a nagyon speciális osztályt, csak azokat a tulajdonságokat kell ide írnunk, amelyeket hozzá szeretnénk adni vagy módosítani szeretnénk az elem alapstílusához képest.

A fenti példából származó osztályok nem csak egy bekezdésre vonatkoztathatók, hanem például címsorokra, vagy például egy táblázatcellára, vagy az egész táblázatra is, egyszóval mindenhol alkalmazhatók, ahol valamire hatással vannak (ebben az esetben mindenhol, ahol van szín és szöveg opció).

Beállíthatja, hogy az osztály csak egy adott elemre (például egy bekezdésre) vonatkozzon, ha megadja az elem nevét a pont előtt:

P.green(szín: zöld;)

Most a zöld osztály nem fog másra hatni, mint a P elemre.

Top

Kiválasztó azonosító alapján

Ez a választó akkor használható, ha egyetlen elemet kell kiválasztania, amely egyedi és különbözik a dokumentum összes többi elemétől. Például egy bizonyos módon jelöljük ki az oldal első címsorát:

html rész:

<Н1 id="első fejléc" > Az oldal első címe

css - rész:

H1#elsőfejléc { piros szín; betűsúly: félkövér; szöveg igazítása: középre }

Mint látható, a html részben a class attribútum helyett az id attribútum, a css-ben pedig pont helyett a # jel.

Ugyanezt elvileg osztályválasztóval is meg lehet csinálni, attól függően, hogy tetszik :)

Top

Kontextus választó

Ez egy nagyon hasznos dolog. Tegyük fel, hogy van egy oldalunk táblázatokkal és szöveges bekezdésekkel, és mind a táblázatban, mind a bekezdésekben félkövér (erős) betűk találhatók. Így hirtelen szükségünk volt arra, hogy a bekezdésben a félkövérrel kiemelt szavakat zöldre váltsuk. Szóval itt van.