Jó estét, kedves kollégák, ma még két további tanulmányt folytatunk veletek választóamelyeket úgy hívnak gyermek és testvér css szelektorok... Nagyobb mértékben nélkülözheti őket, azonban fejlődéséhez meg kell tanulnia őket, és néha alkalmaznia kell őket, hogy megmaradjanak az emlékezetében. Ezért megbeszéljük, hogy melyik válogatók szomszédosak, és amelyek gyermekek, és egy példával elemezzük.
Gyermek css szelektorok - a szülő elemen belül elhelyezkedő elemek. Erre példa lehet a következő. Van egy blokk, amely tartalmaz egy bekezdést, egy másik blokkot és képet. Ez a három elem gyermek. Ha a gyermekblokk más elemeket is tartalmaz, akkor ők már nem az első blokk gyermekei, hanem annak a blokknak a gyermekei, amelyben közvetlenül találhatók. Remélem, megértette a lényeget.
Szomszédos CSS-választók - a dokumentumkódban egymás után elhelyezkedő elemek. Erre példa. Van egy bekezdésünk, amelyet egy címke követ span... Minden elég világos, de mindezt csak valódi példákkal kell megoldanunk.
Szöveg egy bekezdésben
Span szöveg
Már nem gyermek szöveg egy bekezdésben
Stílusok felhasználásával ugyanazt az eredményt adja hozzá a címkéhez span
Div \u003e span (
betűméret: 200%;
}
o + span (
piros szín;
}
A kód végrehajtásának eredménye mindkét esetben a címkére lesz alkalmazva spanmivel a címke gyermeke div és a címke után következő o... Ezért a betűtípus kétszer akkora és piros színű lett. Most már teljesen foglalkoztunk gyermek és testvér kiválasztók a CSS-ben, és csak meg kell erősítenie tudását a gyakorlatban, hamarosan találkozunk!
A CSS szintaxisa egyszerű, és a megértéséhez nem kell doktori fokozattal rendelkeznie az informatikában. Ez azonban azon kevés népszerű nyelv egyike, amely nem logikus a szó legvalószínűbb értelmében. Más webprogramozási nyelvektől, például a JavaScript-től és a PHP-től eltérően a CSS nem oldja meg a rendszeres logika problémáit. Az olyan algoritmusok, mint „ha X akkor Y-t csinál, különben Z-t csinálnak”, vagy „válasszuk ki az összes Y-t, akkor tegyük meg velük az X-t”, nem valósíthatók meg olyan nyelven, mint a CSS. Leegyszerűsítve: ez egy dizájnra épített nyelv, a dizájnereké, nem pedig a fejlesztőké. Néhány tapasztalt programozó, akikkel dolgoztam együtt, rengeteg erőfeszítést fordított a CSS elsajátítására éppen ezért.
A CSS elsajátítása az osztályokkal és az azonosítókkal, valamint a felhasználással kezdődik. és # az elemek közvetlen jelölésére. Ez elegendő egy teljesen működőképes weboldal felépítéséhez, de teljes átalakítás esetén nem elég rugalmas. Vizsgáljuk meg az ilyen nehezen elérhető elemek kezelésének alternatív megközelítését.
Szomszédos testvér kombinátor
Kezdjük egy olyan választóval, amely trükkös helyzetekben jól jön - a szomszédos testvérkombinátorral. A szomszédos testvér kombinátort két elem összekapcsolásával jelöljük a + jel használatával:H1 + o
Ez kiválasztja a következő p-elemet közvetlenül a h1-elem után a DOM-ban. A tipográfiai elmélet azt sugallja, hogy behúzást kell használnunk a szöveg paragrafusaiban, de csak akkor, ha egy másik bekezdést követnek. A gyakorlatban ez felhasználható az összes bekezdés behúzására az első kivételével:
p + p (szöveg-behúzás: 1em;)
Ez sokkal kényelmesebb, mint az első bekezdés kiemelése a class \u003d "first" paranccsal. Három sor, osztályok nélkül, és teljes böngésző támogatás. Ha a webhely tartalmához kapcsolódó img címkéket helyez el a p címkékben (ahogy kell), akkor egyszerűen bal oldali margóit tolhatja negatív -1em értékkel:
p + p img (bal margó: -1em;)
Nagyon egyszerű, igaz? De mi van akkor, ha ki akarjuk választani az összes bekezdés első sorát, amely közvetlenül a címsorok után jelenik meg, az összes többi bekezdés megváltoztatása nélkül? Ismét használhatjuk a nézet osztályt. A szomszédos összetett kombinátorból és egy pszeudo-elemből készített egyszerű választó elvégzi a munkát:
h1 + p :: első sor (font-variáns: kis sapkák;)
Megjegyzés: Az első soros ál-elemet a CSS 2.1-ben alkalmazzák, a CSS 3 a :: jelölést használja az ál-osztályok és az ál-elemek megkülönböztetésére.
Örökletes kombinátor
A szokásos jelölési protokoll az, hogy szakaszokat helyez el a #page vagy #wrap bármely megnevezett elemében:Az elmúlt fejezetekben megvizsgáltuk a HTML-dokumentumok címkéi közötti kapcsolatokat, beleértve a gyermekválasztókat is. Itt az ideje, hogy megismerkedjünk a testvérválasztókkal és a testvérválasztókkal.
Szomszédos választók
A szomszédos szelektorok (más néven szomszédosak) olyan elemeket választanak ki a weboldalon, amelyek közös szülővel rendelkeznek, és szomszédosak egymással. A stílust a választóban megadott utolsó elemre alkalmazzák.
Példa: tegyük fel, hogy minden bekezdésre szüksége van
Ami a cím után az első
dőlt betűtípussal rendelkezik. Ez egy ilyen CSS-kóddal érhető el:
H1 + p (betűtípus: dőlt;)
Ennek a szabálynak a megírásakor először is meg kell adnia az első szomszéd nevét, majd hozzá kell adnia a + szimbólumot és a második szomszéd nevét (arra, amelyikre a stílust szeretnénk alkalmazni). Hosszabb kombinációk is létrehozhatók. A választó megírásának sémája a következő: selector1 + selector2 +… + selectorN () (a stílust az N választóra alkalmazzák).
Példák az írásra:
/ * Behúzás bekezdéstől a képig 30px * / p + img (padding-top: 30px;) / * Zöld a h3-at követő bekezdéshez h2 * / h2 + h3 + p (szín: zöld;)
Kapcsolódó választók
A testvérválasztók (más nevek: testvér, testvér) lehetővé teszik egy HTML oldal elemeinek kiválasztását, amelyek kapcsolatban állnak egymással (vagyis közös szülővel rendelkeznek és ugyanazon a szinten vannak). A nővérválasztók hasonlóak a szomszédos választókhoz, de abban különböznek, hogy a stílust a kiválasztott típusú összes elemre alkalmazzák, nem csak az elsőre. A ~ jel helyett a ~ tilde szimbólumot használjuk.
Példa: módosítsuk kicsit az előző feladatot, és képzeljük el, hogy az összes bekezdéshez dőlt betűt kell készíteni
Ez a cím után következik
... A CSS-kód így fog kinézni:
H1 ~ p (betűtípus: dőlt;)
... és néhány HTML egy példához:
1. címsor
2. címsor
Vessen egy pillantást a HTML-re: a stílus minden címkére vonatkozni fog
Amelyek következnek után címke
és vannak előtt a szülő zárócímkéje ... A mi változatunkban 3 elem van Amire a stílust alkalmazzák. Ne feledje, hogy a címke
semmilyen módon nem avatkozik be. Vegye figyelembe azt is, hogy ebben az esetben a stílus nem fog arra a címkére
Ami található felett
és a címkéhez is
Van egy másik szülő
.
megállapítások
A szomszédos (szomszédos) szelektorok használatával stílusozhat egy elemet, amikor az azonnal követ egy másik elemet (vagy elemcsoportot). Ez olyan elemekkel működik, amelyek azonos szinten vannak és közös szülővel rendelkeznek.
A kapcsolódó szelektorokkal minden kiválasztott típusú elemet stilizálhat, amikor azok azonnal követnek egy másik elemet (vagy elemcsoportot). Ez olyan elemekkel működik, amelyek azonos szinten vannak és közös szülővel rendelkeznek.
Leírás
A weboldal elemeit szomszédoknak nevezzük, amikor azonnal követik egymást a dokumentumkódban.
Szintaxis
E + F (stílusszabályok leírása)
A pluszjel (+) a szomszédos elemek stílusának szabályozására szolgál, amelyet a két E és F választó közé helyezünk. A plusz körüli szóközök választhatóak. Ez a stílus az F elemre vonatkozik, de csak akkor, ha szomszédos az E elemmel és közvetlenül utána. Nézzünk meg néhány példát.
Lorem ipsum dolor sit amet.
Címke a címke gyermeke
Mert ebben a tartályban van. Illetőleg
Szülőként jár el
.
Lorem ipsum dolor ül amet.
Címkék: és semmilyen módon ne fedje egymást és képviselje a szomszédos elemeket. Az a tény, hogy a tartály belsejében helyezkednek el Nem befolyásolja a hozzáállásukat.
Lorem ipsum dolor sit amet, consectetuer adipiszkáló elit.
Itt szomszédosak a címkék és , és és ... Hová és a szomszédos elemek nem tartoznak abból a tényből, hogy közöttük van egy konténer
.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Szomszédos választók
Lorem ipsum dolor sit amet, consectetuer adipiszkáló elit.
Lorem ipsum dolor sit amet, consectetuer adipiszkáló elit.
Ennek a példának az eredményét az 1. ábra mutatja. egy.
Ábra. 1. Piros szövegszín a szomszédos választókhoz
Böngészők
Az Internet Explorer 7 nem stílusos, ha a kiválasztók között van egy megjegyzés (B + / * plus * / I).
Helló kedves olvasók! Folytatjuk a CSS szelektorok témáját, és ma megpróbálom hozzáférhető módon elmagyarázni, hogy mi van szomszédos CSS szelektorokés azt is, hogy milyen szerepet tölt be univerzális választó... Az összes típusú CSS eszköz használatának mechanizmusának ismerete lehetővé teszi a dokumentum optimális és kompakt tartalmának elérését, amely leírja az elemek stílusát, amely az erőforrás sikeres promóciójának egyik összetevője, tehát semmiképpen sem ha elhanyagolja a lehetőséget, hogy hasznos információkat szerezzen a választó fogalmáról és annak különféle típusairól.
Ha emlékszik és szorosan követi a publikációkat, akkor a szelektorok sok típusát már figyelembe vették ;; ; ... Ezúton is arra kérem, ne hagyja figyelmen kívül a CSS alapjainak elsajátítását, mivel ez a jövőben nagyon sok preferenciát fog megadni.
Univerzális választó
Most térjünk közvetlenül a mai kiadvány lényegére. Ami az univerzális választót illeti, ez meglehetősen egyszerű, ezért sokáig nem fogok rajta maradni. Az univerzális választót használó CSS-szabály megírásának szintaxisa a következő:
Itt a "*" operátor azt jelenti, hogy univerzális választónk van. Akkor használják, amikor egységes stílust kell létrehozni a weboldal minden eleméhez. Néha nem kell megadni egyetemes választót. Például a. * Osztály és .class pontosan megegyezik ezekben az esetekben. Most egy példa kötelező. Általában a legelterjedtebb az egységes betűtípus, méret és szín, valamint a rendes szöveg helyének meghatározása egy blogon vagy egy weboldalon.
* (betűtípus-család: Tahoma, Arial, Helvetica, sans-serif; / * Szöveg betűtípus * / color: # 646464; / * Szöveg színe * / font-size: 75%; / * Szöveg mérete * / text-align: balra; / * Szövegelrendezés * /)
Így meghatározhatja a szöveg megjelenését az oldalon található összes elem számára. Vegye figyelembe, hogy ebben az esetben az eredmény ugyanaz lesz, ha az univerzális választó helyett a törzscímke nevét használja, amely tartalmazza az összes elem címkéit.
Szomszédos CSS-választók
Nos, most fordítsunk még egy kicsit több időt a szomszédos kiválasztókra. A weboldalelemek szomszédosak, ha közvetlenül szomszédosak egymással a dokumentumkódban. Ebben az esetben a CSS stílusok szintaxisa a következőképpen néz ki:
Vegyünk egy bekezdést a p tag által definiált szövegből, amely b, i és nagy címkéket tartalmaz gyermekként, amelyek meghatározzák a szöveg formázását, félkövér, dőlt és kiemeli a betűtípus növelésével:
Ez a bekezdés használja címke b, címke i, nagy cédula.
És az összes népszerű böngésző legújabb verziójába beépített CSS és HTML szerkesztő eszközzel (,), amely analóg a híres Firefox pluginnel (), ezt a bekezdést bárhová beillesztjük minden weblapra (jól csináltam az előző cikk oldalán az első bekezdéssel). Ezt az eszközt például a Chrome-ban az F12 billentyű egyszerű megnyomásával hívják meg. Használható a HTML alapjai és a CSS bemutató oktatóanyagának gyakorlására. Tehát beillesztek egy szöveget az első bekezdésként:
Ez a bekezdés kísérleti jellegű lesz, és a példája alapján megvizsgáljuk az alkalmazást szomszédos választók... Mint mondtam, a b, i és a nagy címkék a p bekezdés tag tagjai, mivel mind közvetlenül a p tartályban vannak. Itt a szomszédos címkék b és i, valamint i és nagyok. Most alkalmazzuk a CSS-szabályt a szomszédos választókra:
B + i (szín: piros;) i + nagy (szín: zöld;)
Ezeknek a stílusoknak az alkalmazása után a bekezdés így fog kinézni:
Ez igaz egy weboldal minden címkéjére, amely tartalmazza a b, i és nagy elemeket. Sőt, b-nek, i-nek és i-nek mellettük kell lenniük, más kombinációknál ez a CSS-szabály nem fog működni. Azt hiszem, most már világos számodra, hogyan alkalmazzák a szomszédos szelektorokat egy CSS-dokumentum írásakor vagy szerkesztésekor. Egy másik nagyon fontos megjegyzés: ha már észrevette, a szomszédos elemek esetében a megadott stílus csak a második elemre vonatkozik.
A példa egy bekezdéssel, amelyet nagyon leírónak tekintettek, és lehetővé teszi a szomszédos szelektorok lényegének gyors megértését a CSS-ben. A gyakorlatban azonban általában a szomszédos szelektorok más alkalmazási területeit használják. Például nagyon gyakran szükség van egy szövegdarab beillesztésére a cikk törzsébe, különösen egy olyan szövegdarabra, mint lábjegyzetek, jegyzetek stb.
Ezekre a célokra gyakran külön osztályt hozunk létre, és alkalmazzuk a kívánt bekezdésre. De sokkal optimálisabb módszer a szomszédos szelektorok használata. Például a blogomon vannak olyan stílusok, amelyek egy szokásos h3 fejléc stílusához vannak létrehozva.
H3 (betűméret: 1,7em; / * Betűméret * / text-align: center; / * Szövegelhelyezés * / font-weight: normal; / * Normál szövegstílus * / font-family: Tahoma, Arial, Helvetica, sans-serif; / * Betűtípus * / color: # 646464; / * Szöveg színe * /)
Egy jegyzet vagy lábjegyzet fejlécének kiemeléséhez adjunk meg egy speciális osztályt, mondjuk tedd:
H3.put (szín: piros; / * Szöveg színe * / margó-bal: 5px; / * Bal margó * / margin-top: 0,5em; / * Felső margó * / kitöltés: 10px; / * Szöveg margó * / szöveg igazítás: bal; / * Szöveg pozíció * /)
Most a szomszédos választókkal hozzunk létre egy egyedi lábjegyzet-stílusot, ez a bekezdés közvetlenül a „h3.put” stílusú címsor alá kerül:
H3.put + p (háttér: # ffefd5; / * Háttér színe * / margó-bal: 15 képpont; / * Bal oldali kitöltés * / margó-jobb: 120 képpont; / * Jobb oldali kitöltés * / margó-felső: 0,5em; / * Felső párnázás * / kitöltés: 5 képpont; / * Szélek a szöveg körül * /)
Ismét a Google Chrome szerkesztőeszköz segítségével, amelyet minden füledig zümmögtem (de megéri), \u200b\u200bírd be a lábjegyzet címét, ne felejtsd el hozzá tenni a put osztályt:
Figyelem!
Ezután megírjuk a lábjegyzet szövegét:
A kiadványban bemutatott anyag nagyon fontos a CSS (Cascading Style Sheets) alapjainak elsajátítása szempontjából.
.
Mindezen gesztusok után kapunk egy ilyen bekezdést a weboldal lábjegyzetéből (emlékeztetlek benneteket, hogy ezt a bekezdést a gyermek- és kontextusválasztókról szóló előző cikkem végére illesztettem be):
Most, egy blogon vagy webhelyen, amikor a "put" osztály bármilyen h3 taghez van kötve, egy ilyen lábjegyzet jelenik meg a weboldalon. Sőt, csak a "class \u003d" put "" h3 címke utáni első bekezdés lesz különleges módon díszítve. De pontosan ezt akartuk, igaz?
Ezzel fejezzem be a mai kézikönyvet, amelyben egy algoritmust adtak meg a szomszédos, valamint az univerzális szelektorok használatára. Remélem, hogy ez a cikk arra ösztönzi Önt, kedves olvasók, hogy iratkozzon fel
Amire a stílust alkalmazzák. Ne feledje, hogy a címke
semmilyen módon nem avatkozik be. Vegye figyelembe azt is, hogy ebben az esetben a stílus nem fog arra a címkére
Ami található felett
és a címkéhez is
Van egy másik szülő
megállapítások
A szomszédos (szomszédos) szelektorok használatával stílusozhat egy elemet, amikor az azonnal követ egy másik elemet (vagy elemcsoportot). Ez olyan elemekkel működik, amelyek azonos szinten vannak és közös szülővel rendelkeznek.
A kapcsolódó szelektorokkal minden kiválasztott típusú elemet stilizálhat, amikor azok azonnal követnek egy másik elemet (vagy elemcsoportot). Ez olyan elemekkel működik, amelyek azonos szinten vannak és közös szülővel rendelkeznek.
Leírás
A weboldal elemeit szomszédoknak nevezzük, amikor azonnal követik egymást a dokumentumkódban.
Szintaxis
E + F (stílusszabályok leírása)
A pluszjel (+) a szomszédos elemek stílusának szabályozására szolgál, amelyet a két E és F választó közé helyezünk. A plusz körüli szóközök választhatóak. Ez a stílus az F elemre vonatkozik, de csak akkor, ha szomszédos az E elemmel és közvetlenül utána. Nézzünk meg néhány példát.
Lorem ipsum dolor sit amet.
Címke a címke gyermeke
Mert ebben a tartályban van. Illetőleg
Szülőként jár el .
Lorem ipsum dolor ül amet.
Címkék: és semmilyen módon ne fedje egymást és képviselje a szomszédos elemeket. Az a tény, hogy a tartály belsejében helyezkednek el Nem befolyásolja a hozzáállásukat. Lorem ipsum dolor sit amet, consectetuer adipiszkáló elit.
Itt szomszédosak a címkék és , és és ... Hová és a szomszédos elemek nem tartoznak abból a tényből, hogy közöttük van egy konténer .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiszkáló elit.
Lorem ipsum dolor sit amet, consectetuer adipiszkáló elit.
Ennek a példának az eredményét az 1. ábra mutatja. egy.
Ábra. 1. Piros szövegszín a szomszédos választókhoz
Böngészők
Az Internet Explorer 7 nem stílusos, ha a kiválasztók között van egy megjegyzés (B + / * plus * / I).
Helló kedves olvasók! Folytatjuk a CSS szelektorok témáját, és ma megpróbálom hozzáférhető módon elmagyarázni, hogy mi van szomszédos CSS szelektorokés azt is, hogy milyen szerepet tölt be univerzális választó... Az összes típusú CSS eszköz használatának mechanizmusának ismerete lehetővé teszi a dokumentum optimális és kompakt tartalmának elérését, amely leírja az elemek stílusát, amely az erőforrás sikeres promóciójának egyik összetevője, tehát semmiképpen sem ha elhanyagolja a lehetőséget, hogy hasznos információkat szerezzen a választó fogalmáról és annak különféle típusairól.
Ha emlékszik és szorosan követi a publikációkat, akkor a szelektorok sok típusát már figyelembe vették ;; ; ... Ezúton is arra kérem, ne hagyja figyelmen kívül a CSS alapjainak elsajátítását, mivel ez a jövőben nagyon sok preferenciát fog megadni.
Univerzális választó
Most térjünk közvetlenül a mai kiadvány lényegére. Ami az univerzális választót illeti, ez meglehetősen egyszerű, ezért sokáig nem fogok rajta maradni. Az univerzális választót használó CSS-szabály megírásának szintaxisa a következő:
Itt a "*" operátor azt jelenti, hogy univerzális választónk van. Akkor használják, amikor egységes stílust kell létrehozni a weboldal minden eleméhez. Néha nem kell megadni egyetemes választót. Például a. * Osztály és .class pontosan megegyezik ezekben az esetekben. Most egy példa kötelező. Általában a legelterjedtebb az egységes betűtípus, méret és szín, valamint a rendes szöveg helyének meghatározása egy blogon vagy egy weboldalon.
* (betűtípus-család: Tahoma, Arial, Helvetica, sans-serif; / * Szöveg betűtípus * / color: # 646464; / * Szöveg színe * / font-size: 75%; / * Szöveg mérete * / text-align: balra; / * Szövegelrendezés * /)
Így meghatározhatja a szöveg megjelenését az oldalon található összes elem számára. Vegye figyelembe, hogy ebben az esetben az eredmény ugyanaz lesz, ha az univerzális választó helyett a törzscímke nevét használja, amely tartalmazza az összes elem címkéit.
Szomszédos CSS-választók
Nos, most fordítsunk még egy kicsit több időt a szomszédos kiválasztókra. A weboldalelemek szomszédosak, ha közvetlenül szomszédosak egymással a dokumentumkódban. Ebben az esetben a CSS stílusok szintaxisa a következőképpen néz ki:
Vegyünk egy bekezdést a p tag által definiált szövegből, amely b, i és nagy címkéket tartalmaz gyermekként, amelyek meghatározzák a szöveg formázását, félkövér, dőlt és kiemeli a betűtípus növelésével:
Ez a bekezdés használja címke b, címke i, nagy cédula.
És az összes népszerű böngésző legújabb verziójába beépített CSS és HTML szerkesztő eszközzel (,), amely analóg a híres Firefox pluginnel (), ezt a bekezdést bárhová beillesztjük minden weblapra (jól csináltam az előző cikk oldalán az első bekezdéssel). Ezt az eszközt például a Chrome-ban az F12 billentyű egyszerű megnyomásával hívják meg. Használható a HTML alapjai és a CSS bemutató oktatóanyagának gyakorlására. Tehát beillesztek egy szöveget az első bekezdésként:
Ez a bekezdés kísérleti jellegű lesz, és a példája alapján megvizsgáljuk az alkalmazást szomszédos választók... Mint mondtam, a b, i és a nagy címkék a p bekezdés tag tagjai, mivel mind közvetlenül a p tartályban vannak. Itt a szomszédos címkék b és i, valamint i és nagyok. Most alkalmazzuk a CSS-szabályt a szomszédos választókra:
B + i (szín: piros;) i + nagy (szín: zöld;)
Ezeknek a stílusoknak az alkalmazása után a bekezdés így fog kinézni:
Ez igaz egy weboldal minden címkéjére, amely tartalmazza a b, i és nagy elemeket. Sőt, b-nek, i-nek és i-nek mellettük kell lenniük, más kombinációknál ez a CSS-szabály nem fog működni. Azt hiszem, most már világos számodra, hogyan alkalmazzák a szomszédos szelektorokat egy CSS-dokumentum írásakor vagy szerkesztésekor. Egy másik nagyon fontos megjegyzés: ha már észrevette, a szomszédos elemek esetében a megadott stílus csak a második elemre vonatkozik.
A példa egy bekezdéssel, amelyet nagyon leírónak tekintettek, és lehetővé teszi a szomszédos szelektorok lényegének gyors megértését a CSS-ben. A gyakorlatban azonban általában a szomszédos szelektorok más alkalmazási területeit használják. Például nagyon gyakran szükség van egy szövegdarab beillesztésére a cikk törzsébe, különösen egy olyan szövegdarabra, mint lábjegyzetek, jegyzetek stb.
Ezekre a célokra gyakran külön osztályt hozunk létre, és alkalmazzuk a kívánt bekezdésre. De sokkal optimálisabb módszer a szomszédos szelektorok használata. Például a blogomon vannak olyan stílusok, amelyek egy szokásos h3 fejléc stílusához vannak létrehozva.
H3 (betűméret: 1,7em; / * Betűméret * / text-align: center; / * Szövegelhelyezés * / font-weight: normal; / * Normál szövegstílus * / font-family: Tahoma, Arial, Helvetica, sans-serif; / * Betűtípus * / color: # 646464; / * Szöveg színe * /)
Egy jegyzet vagy lábjegyzet fejlécének kiemeléséhez adjunk meg egy speciális osztályt, mondjuk tedd:
H3.put (szín: piros; / * Szöveg színe * / margó-bal: 5px; / * Bal margó * / margin-top: 0,5em; / * Felső margó * / kitöltés: 10px; / * Szöveg margó * / szöveg igazítás: bal; / * Szöveg pozíció * /)
Most a szomszédos választókkal hozzunk létre egy egyedi lábjegyzet-stílusot, ez a bekezdés közvetlenül a „h3.put” stílusú címsor alá kerül:
H3.put + p (háttér: # ffefd5; / * Háttér színe * / margó-bal: 15 képpont; / * Bal oldali kitöltés * / margó-jobb: 120 képpont; / * Jobb oldali kitöltés * / margó-felső: 0,5em; / * Felső párnázás * / kitöltés: 5 képpont; / * Szélek a szöveg körül * /)
Ismét a Google Chrome szerkesztőeszköz segítségével, amelyet minden füledig zümmögtem (de megéri), \u200b\u200bírd be a lábjegyzet címét, ne felejtsd el hozzá tenni a put osztályt:
Figyelem!
Ezután megírjuk a lábjegyzet szövegét:
A kiadványban bemutatott anyag nagyon fontos a CSS (Cascading Style Sheets) alapjainak elsajátítása szempontjából.
.Mindezen gesztusok után kapunk egy ilyen bekezdést a weboldal lábjegyzetéből (emlékeztetlek benneteket, hogy ezt a bekezdést a gyermek- és kontextusválasztókról szóló előző cikkem végére illesztettem be):
Most, egy blogon vagy webhelyen, amikor a "put" osztály bármilyen h3 taghez van kötve, egy ilyen lábjegyzet jelenik meg a weboldalon. Sőt, csak a "class \u003d" put "" h3 címke utáni első bekezdés lesz különleges módon díszítve. De pontosan ezt akartuk, igaz?
Ezzel fejezzem be a mai kézikönyvet, amelyben egy algoritmust adtak meg a szomszédos, valamint az univerzális szelektorok használatára. Remélem, hogy ez a cikk arra ösztönzi Önt, kedves olvasók, hogy iratkozzon fel
