az internet ablakok Android

CSS szomszédos elemek. Speciális választók a CSS-ben

Vlad merzehevich

A weboldal elemeinek szomszédja, amikor egymás után követik egymást a dokumentumkódban. Tekintsünk több példát az elemek kapcsolatára.

Lorem ipsum dolor Sit Amet.

Ebben a példában a címkével kapcsolatos leányvállalat

Mivel ebben a tartályban van. Illetőleg

Szülőként működik .

Lorem ipsum dolor ÜL Amet.

Itt címkék és Ne fedje át és szomszédos elemeket. Mit találnak a tartály belsejében

Nem befolyásolja a hozzáállásukat.

Lorem. ipsum. Dolor Sit Amet, személykísérlet. Adipisting. elit..

A szomszédok itt vannak címkék és , továbbá és . Azzal, hogy és A szomszédos elemek nem tartoznak annak a ténynek, hogy van egy konténer közöttük .

A szomszédos elemek stílusának szabályozásához egy plusz szimbólumot (+) használunk, amely két választó között van felszerelve. Az általános szintaxis a következő.

1 + választó 2 (a stílusszabályok leírása)

Az előnyök körüli terek nem szükségesek, az ilyen bejegyzéssel rendelkező stílust a 2 választóhöz kell alkalmazni, de csak akkor, ha a választó mellett van, és azonnal kell lennie.

A 11.1. Példában a köztük lévő címkék kölcsönhatásának szerkezete látható.

11.1. Példa. A szomszédos választók használata

HTML5 CSS 2.1 IE CR OP SA FX

Szomszédos választók

Lorem. ipsum. Dolor Sit Amet, személykísérlet. Adipisting Elit.

Lorem ipsum dolor sit amet, személykísérlet. Adipisting Elit.



A példa eredményét az 1. ábrán mutatjuk be. 11.1.

Ábra. 11.1. Szöveg kiválasztása a szomszédos választók segítségével

Ebben a példában a tartály tartalmának szöveges színváltozása következik be. Ha a tartály után közvetlenül a tartály után található . Az első bekezdésben ezt a helyzetet végrehajtják, így a böngészőben a "Consectetuer" szó piros színnel jelenik meg. A második bekezdésben, bár van egy címke De a szomszédban nincs címke Nem, így a tartály stílusa nem alkalmazható.

A gyakorlati példát elemezzük. Gyakran szükség van a cikk szövegére, hogy különböző lábjegyzeteket és jegyzeteket tartalmazzon. Általában erre a célra egy új stílusosztály jön létre, és azt a bekezdéshez használja, oly módon, hogy könnyen megváltoztathatja a szöveg típusát. De megyünk más módon, és kihasználjuk a szomszédos választékokat. A megjegyzések kiemeléséhez hozzon létre egy új osztályt, hívja meg a SIC-t, és alkalmazza a címkére

. Az első bekezdés az ilyen fejléc után a háttér és a francia bekezdés színe (11.2. Példa). A fennmaradó bekezdések nézete változatlan marad.

11.2. A bekezdés stílusának megváltoztatása

HTML5 CSS 2.1 IE CR OP SA FX

A bekezdés stílusának megváltoztatása

Oroszlán-halászati \u200b\u200bmódszerek a sivatagban

A következetes integritás módszere

Hagyja, hogy az oroszlán legyen az l x w x h mérete, ahol L az oroszlán hossza az orr csúcsától a farok tassel, W az oroszlán szélessége, és H magassága. Ezután a sivatag számos elemi téglalapra oszlik, amelyek mérete egybeesik az oroszlán szélességével és hosszával. Figyelembe véve, hogy az oroszlán nem lehet szigorúan egy adott területen, de kettő közül kettőn egy olyan cellát kell halászni, hogy megnövekedett terület, nevezetesen 2L x 2W. Ennek köszönhetően elkerüljük a hibákat, amikor az oroszlán csak fele fogott a ketrecben, vagy rosszabb, csak a farok.

Fontos jegyzet

A számítások egyszerűsítése érdekében a farok mérési hibaként eldobható, és nem veszi figyelembe.



A példa eredményét az 1. ábrán mutatjuk be. 11.2.

Ábra. 11.2. A szomszédos választók használatának köszönhetően a bekezdés típusának módosítása

Ebben a példában a szöveg formázása bekezdésekkel (címke)

) De a rekord H2..Sic + P csak a címke első bekezdésére állítja be a stílust

amely hozzáadta a SIC nevű osztályt.

A szomszédos választók kényelmesek azoknak a címkéknek, amelyekhez a francia bekezdések automatikusan hozzáadódnak a kidobási érték beállításához. Például, ha egy sorban vannak címkék

és

, A köztük lévő távolság könnyen beállítható a szomszédos választók segítségével. Hasonlóképpen, az eset is az elkövetkező címkék

és

Valamint más hasonló esetekben. A 11.3. Példában így megváltoztatja a megadott címkék közötti fázisok nagyságát.

11.3. Példa. A címsorok és a szöveg között vannak

HTML5 CSS 2.1 IE CR OP SA FX

Szomszédos választók

1. cím.

2. cím.

Bekezdés!



Mivel a szomszédos választók használatakor a stílus csak a második elemre vonatkozik, a fázisok mérete csökken a negatív érték bevonása miatt a margó-top ingatlanon. Ebben az esetben a szöveg felmászik, közelebb az előző elemhez.

Ellenőrzési kérdések

1. Milyen címkék ebben a kódban szomszédos?

Kénsav formula:H. 2ÍGY. 4

  1. ÉS

  2. és
  3. és
  4. és
  5. és

2. Van egy következő HTML kód.:

Nagy teorem fermat


X. n. + Y. n.
\u003d Z. n.


ahol n egy egész szám\u003e 2

Melyik szöveget jelöli piros a SUP + SUP stílus (szín: piros,)?

  1. Második "n"
  2. A második és a harmadik "n".

Helló, kedves olvasók! Folytassa a CSS-választékokat, és ma megpróbálom megmagyarázni, mi az szomszédos CSS-választók, valamint milyen szerepet játszik univerzális választó. A CSS-alapok felhasználásának mechanizmusának ismerete a dokumentum optimális és kompakt tartalmát fogja elérni, amely leírja az elemek stílusait, amely az erőforrás sikeres előmozdításának egyik összetevője, hogy semmilyen esetenként semmilyen esetenként sem elhanyagolható annak lehetősége, hogy hasznos információkat kapjunk a választó fogalmáról és mindenfajta fajról.

Ha emlékszel és gondosan követte a kiadványokat, sokféle választékot már figyelembe vettek; ; . Még egyszer arra késztettem, hogy ne hagyja figyelmen kívül a CSS alapjainak tanulmányozását, mivel a jövőben sok preferenciát ad neked.

Univerzális választó

Most menjen közvetlenül a mai közzététel lényegéhez. Ami az egyetemes választót illeti, meglehetősen egyszerű, ezért sokáig nem fogok abbahagyni. A CSS-szabályok írásának szintaxisa, amely az Univerzális választót használja, a következők:


Itt van az operátor "*", és azt jelenti, hogy van egy univerzális választó. Használható, ha az összes elemet az összes elemre kell beállítani a weboldalon. Néha az univerzális választó nem feltétlenül határozza meg. Például rögzítés. * I. osztályú.Class ezeken az esetekben teljesen azonos. Most szükségszerűen példa. Jellemzően a leggyakoribb a betű, méret és szín meghatározása, valamint a szokásos szöveg helye a blogoldalon vagy a webhelyen.

* (Font-Family: Tahoma, Arial, Helvetica, Sans-Serif; / * betűtípus a szöveghez * / Szín: # 646464; / * Szöveg szín * / betűméret: 75%; / * Szövegméret * / Text-Align : balra; / * szöveghely * /)

Így meghatározhatja a szöveg megtervezését az oldalon található összes elemhez. Megjegyzem, hogy egy adott esetben az eredmény hasonló lesz, ha univerzális választó helyett használja a testcímke nevét, amely magában foglalja az összes elem címkéit.

Szomszédos CSS-választók

Nos, most egy kicsit több idő fizet a szomszédos választókért. A weboldal elemeinek szomszédja, ha közvetlenül a dokumentumkódban vannak. Ugyanakkor a CSS Styles szintaxisának van ilyen jellege:

Most a P-címke által meghatározott szöveges bekezdés, amelyben a B, I és a Big Címkék gyermekelemekként szerepelnek, amelyek meghatározzák a szöveges formázás, a merész, dőlt betű és elszigeteltség felszabadítását a betűtípus növelésével:

Ez a bekezdés használ tAG B., i. címke., nagy címke.

És a CSS és HTML szerkesztési eszköz használatával, amely az összes népszerű böngésző (,) legújabb verzióiba ágyazódik, és amely a Firefox () böngésző () híres pluginjának analógja, illessze be ezt a bekezdést bármely helyre bármely helyen Bármely weboldal (az első bekezdésben az előző cikk oldalon). Ez azt jelenti, hogy például egyszerűen megnyomja az F12 billentyűt. Használható, hogy gyakorlatilag rögzítse a "HTML" és a "CSS tankönyv" anyagi fejléceket. Tehát egy szöveget beillesztek az első bekezdés formájában:


Ez a bekezdés kísérleti lesz, és megvizsgálja példáját. szomszédos választók. Mint már azt mondtam, a B, I és Big címkék leányvállalatok a P. bekezdés címkéjéhez, mivel mind közvetlenül a p konténerben vannak. Itt a szomszédok a B és I címkék, valamint az i és a nagyok. Most alkalmazza a CSS-szabályt a szomszédos választókra:

B + I (szín: piros,) i + nagy (szín: zöld;)

Miután ezeket a stílusokat alkalmazzák, a bekezdés így fog kinézni:


Ez igaz minden weboldal címkéhez, amely tartalmazza a B, I és Big elemeket. Ráadásul B és I, I, I, I és BIG KÖZÖTT, Más kombinációk esetében ez a CSS nem fog működni. Azt hiszem, most világos, hogy a szomszédos választók hogyan érvényesek a CSS-dokumentum írásakor vagy szerkesztésekor. Egy másik nagyon fontos megjegyzés: Ha van ideje észrevenni, akkor a szomszédos elemek esetében a megadott stílus csak a második elemre vonatkozik.

Példa egy bekezdéssel, amelyet nagyon vizuálisnak tartottak, és lehetővé teszi, hogy gyorsan megértse a szomszédos választók lényegét a CSS-ben. A gyakorlatban azonban a választók alkalmazási területeit gyakran használják. Mondja, nagyon gyakran a cikk testében, szükség van néhány szövegrész, különösen díszített, mint például: lábjegyzetek, jegyzetek stb.

E célból külön osztály általában létrehozza és alkalmazza a szükséges bekezdésre. De sokkal több optimális módon a szomszédos választók használata. Például a blogomon vannak stílusok, amelyeket egy hagyományos H3 fejléc regisztrálására hoztak létre.

H3 (betűméret: 1.7em; / * betűméret * / szöveg-igazítás: Központ; / * Szöveg elhelyezése * / betűsúly: normál; / * Normál szövegtervezés * / Font-Face: Tahoma, Arial, Helvetica, Sans-serif; / * betűtípus * / szín: # 646464; / * szöveg szín * /)

A címjegyzetek vagy lábjegyzetek kijelöléséhez állítsa be a különleges osztályt, mondjuk, tedd:

H3.put (szín: piros; / * szöveges szín * / margó-balra: 5px; / * visszavonul a bal oldalon * / margó-tetején: 0,5em; / * a fentiekből * / * / * mezők körül: 10px; / * mezők körül Szöveg * / Text-Align: balra; / * A szöveg helye * /)

Most a szomszédos választékokat használják, hogy létrehozzunk egy mondat bekezdés különleges stílust, ezt a bekezdés közvetlenül a cím alá kerül a "H3.Put" stílusban:

H3.put + p (háttér: # ffefd5; / * háttérszín * / margó-balra: 15px; / * visszavonul a bal oldalon * / margó jobbra: 120px; / * Retreat a jobb oldalon * / margin-top: 0.5 em; / * fentről * / Padding: 5px; / * mezők a szöveg körül * /)

Ismét, a Google Chrome szerkesztő eszközzel, az összes füled (de érdemes), írja be a fejlécet a lábjegyzetekhez, ne felejtse el, hogy a Tedd osztályba hozza őt:

Figyelem!

Ezután írja be a lábjegyzet szövegét:

A jelen kiadványban bemutatott anyagok nagyon fontosak a CSS alapjainak tanulmányozása szempontjából (Cascading Style Tables)

.

Mindezen televíziók után a weboldalon lévő lábjegyzetek ilyen bekezdését kapjuk (emlékeztetem Önt arra, hogy ez a bekezdés a leányvállalataim és a kontextusválasztókról szóló cikkem végén helyeztem el):


Most egy blogon vagy webhelyen, amikor egy "tűzés" -et kötődnek a H3-hoz, egy ilyen lábjegyzetet fognak felszámolni a weboldalon. Sőt, különleges módon díszítették, csak az első bekezdés a H3 címke után "osztály \u003d" tedd "". De ez pontosan az, amit elértünk, igaz?

Ehhez hadd fejezzem be a mai kézikönyvet, amely egy algoritmust tartalmazott a szomszédos, valamint az univerzális választók használatához. Remélem, hogy ez a cikk elhalványul, kedves olvasók feliratkoznak

2015. június 1.

A szomszédostól eltérően kevésbé használják. A fő különbség az, hogy követniük kell a másikat. Annak érdekében, hogy könnyebbé tegye ezt a témát, azt javaslom, hogy szétszerelje ezt a struktúrát:

<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...

Ahogy valószínűleg kitaláltad az előző leckétől, a 2., 3., 4., 5., 6. címkék a kontextuális választók tag1. A szomszédos választók viszont: tAG2 és TAG3, TAG4 és TAG5, De ugyanakkor tAG2. és tAG4. nem szomszédosak. A Stílus tulajdonságait a következő utolsó elemre kell alkalmazni. Csak a kiválasztási választást kell követnie. Az írás általános szintaxisa:

Választó1 + választó2 + ... + szelektorn (ingatlan1: érték, ingatlan2: érték; ... tulajdonság: érték)

Tekintsük meg magával ezt a példát:

Szomszédos választók

Cím

Címke p. egy szomszédos választó tagged h1.

Ez a szövegnek zöldnek kell lennie


A szomszédos elemválasztó kiválasztja a dokumentumkódban található elemet közvetlenül egy meghatározott elem után. Vegyünk egy darab HTML kódot.

Bekezdés és benne zsíros Element és itt hajlamos elem.

Három címke van:

, és . Címkék és A konténerben beágyazott

Ők leányvállalata. De egymáshoz viszonyítva szomszédos.

A szomszédos választó szintaxisa: az előző elem kiválasztója, a "+" jel és a kiválasztott elem kiválasztója. Dolgozzunk egy közeli választóval:

Szomszédos választó a CSS-ben.

Bekezdés és benne zsíros Element és itt hajlamos elem.

Itt zsíros és végrehajtott Elemek, vissza hajlamos.



A példában kiválasztható, hogy a szomszédos elemválasztó az első bekezdésben dolgozott. Itt címkék és Menj egymásra. És a második bekezdés közöttük a címke használta Most már két másik szomszédos címke van: + és + .

Hiba ebben az esetben figyelembe veszi a címkét a címke szomszédságában

Itt címke a címkével kapcsolatos leányvállalat

És ő viszont egy szülő .

Az alábbi példa nem fog működni:

Szomszédos választó a CSS-ben.

Bekezdés és benne zsíros Element és itt hajlamos elem.

Itt zsíros és végrehajtott Elemek, vissza hajlamos.



Egy igazi példa

Nézzük meg a szomszédos választó munkáját egy igazi példában. A több partíciót tartalmazó nagy cikkekben jelölt címkéket tartalmaznak

Kívánatos, hogy növeljék a felső francia bekezdés (a margó-top ingatlan). A 30px-es beillesztés szöveges olvashatóságot ad. De ha a címke

Megyek azonnal

, és ez lehet a cikk elején, Veri francia bekezdés a címkén

Ez felesleges lesz. A szomszédos elemválasztóval megoldhatja az ilyen feladatot.

Itt van egy HTML kód, amely példát mutat a szomszédos elem választójára.

Szomszédos választó a CSS-ben

Hé!

H2 fejléc.

H2 fejléc.

A bekezdés szövegét a hihetetlen kalandokról.

H2 fejléc.

A bekezdés szövegét a hihetetlen kalandokról.

H2 fejléc.

A bekezdés szövegét a hihetetlen kalandokról.



A szomszédos választókészülék használatával kényelmesen beállíthatja a szakasz címe és a szakasz első bekezdésének bemélyedését, példánkban ezek a címkék

és

Érdemes megjegyezni, hogy a francia bekezdés csökkentése érdekében kényelmes negatív értékek használata.

Szomszédos választó a CSS-ben

Hé!

H2 fejléc.

A bekezdés szövegét a hihetetlen kalandokról.

H2 fejléc.

A bekezdés szövegét a hihetetlen kalandokról.

H2 fejléc.

A bekezdés szövegét a hihetetlen kalandokról.

H2 fejléc.

A bekezdés szövegét a hihetetlen kalandokról.



Most egy példa arra, hogy egy szomszédos választó segítségével válassza ki az összes listát elemet, kivéve az elsőt.

Szomszédos választó a CSS-ben

  • Lista pontszám 1.
  • Lista pontszám 2. szám.
  • Lista 3. pont.
  • Lista pontszám 4.


Ez az, ami a példa munkáját eredményezi:

1. ábra: Az 5. példa működése.

Jó estét kedves kollégák, ma felfedezzük veled két további választóhívott cSS leányvállalatok és szomszédos választók. Nagyobb mértékben azonban lehet, hogy nélkülük, az Ön fejlődéséhez, asszimilálni kell őket, és néha alkalmazni kell, hogy továbbra is az emlékezetben maradnak. Ezért megvitatjuk, mi választók Ők szomszédosak, és mi a leányvállalatai és megértik a példát.
CSS leányvállalatok - A szülőelem belsejében található elemek. Ennek egyik példája lehet a következők. Van egy blokkunk, amelyben van egy bekezdés, egy másik blokk és kép. Ezek a három elem leányvállalatok. Ha más elemek is vannak a gyermekblokkban, akkor az első blokkban már nem leányvállalatok, de a blokkban lévő leányvállalatok, amelyekben közvetlenül vannak. Remélem, elkapta a lényeget.
Szomszédos CSS-választók - Az elemek egymásban találhatók a dokumentumkódban. Erre példa. Van egy bekezdésünk és a következő címke oszlop. Minden elég világos, de mindezeket igazi példákban kell szétszerelni.








Szöveg a bekezdésben


Szöveg a span.

Már nem a gyermek szövege a bekezdésben








A stílusok segítségével add hozzá ugyanazt az eredményt a címke számára oszlop

Div \u003e Span (
betűméret: 200%;
}

p. + span (
piros szín;
}

A kód eredményét mindkét esetben alkalmazzák a címkére oszlopMert ez egy leányvállalat a címkével kapcsolatban div és a címke után p.. Ezért a betűtípus két alkalommal és piros. Most már teljes mértékben foglalkoztunk leányvállalatok és szomszédos választók a CSS-benÉs csak akkor tudod erősíteni tudását a gyakorlatban, a hamar!