Fermatov zadnji izrek

X ⁿ+Y ⁿ
= Z ⁿ

kjer je n celo število > 2

Katero besedilo bo označeno z rdečo s slogom SUP + SUP ( barva: rdeča; )?

1. Drugi "n"
2. Drugi in tretji "n".

Pozdravljeni dragi bralci! Nadaljujemo s temo izbirnikov CSS in danes bom poskušal na dostopen način razložiti, kaj je sosednji izbirniki CSS, in kakšna je vloga univerzalni selektor. Poznavanje mehanizma za uporabo vseh vrst orodij CSS vam bo omogočilo doseganje optimalne in kompaktne vsebine dokumenta, ki opisuje sloge elementov, kar je ena od komponent uspešne promocije vašega vira, zato v vsakem primeru ne zanemarite priložnosti, da dobite koristne informacije o konceptu selektorja in njegovih različnih vrstah.

Če se spomnite in pozorno spremljate objave, je bilo zajetih že veliko vrst izbirnikov, ; ; . Še enkrat vas pozivam, da ne zanemarite učenja osnov CSS, saj si boste tako v prihodnosti pridobili veliko preferenc.

Univerzalni selektor

Zdaj pa preidimo naravnost k bistvu današnje objave. Kar se tiče univerzalnega izbirnika, je precej preprost, zato se o njem ne bom dolgo zadrževal. Sintaksa za pisanje pravila CSS, ki uporablja univerzalni izbirnik, je naslednja:

Tukaj operator “*” pomeni, da imamo univerzalni izbirnik. Uporablja se, ko je potrebno nastaviti en sam slog za vse elemente na spletni strani. Včasih je univerzalni izbirnik neobvezen. Na primer, zapis .*class in .class sta v teh primerih popolnoma enaka. Zdaj pa za primer. Običajno je najpogostejša določitev ene same pisave, velikosti in barve ter položaja običajnega besedila na blogu ali spletni strani.

* ( družina pisav: Tahoma, Arial, Helvetica, sans-serif; /* Pisava besedila */ barva: #646464; /* Barva besedila */ velikost pisave: 75 %; /* Velikost besedila */ poravnava besedila: levo; /* Položaj besedila */ )

Tako lahko določite oblikovanje besedila za vse elemente, ki se nahajajo na strani. Opozarjam, da bo v tem primeru rezultat podoben, če namesto univerzalnega izbirnika uporabimo ime oznake telesa, ki vključuje oznake vseh elementov.

Sosednji izbirniki CSS

No, zdaj pa se še malo posvetimo sosednjim selektorjem. Sosedje so elementi spletne strani, ko so neposredno drug poleg drugega v kodi dokumenta. Sintaksa sloga CSS izgleda takole:

Zdaj pa vzemimo odstavek besedila, definiran z oznako p, ki bo vključeval b, i in velike oznake kot podrejene, ki določajo oblikovanje besedila, krepko, ležeče in krepko:

Ta odstavek uporablja b oznaka, označim, velika oznaka.

In s pomočjo orodja za urejanje CSS in HTML, ki je vgrajeno v najnovejše različice vseh priljubljenih brskalnikov ( , ) in je analog znanega vtičnika za brskalnik Firefox (), bomo ta odstavek vstavili kamor koli na absolutno katero koli spletno stran (to sem naredil kar na strani prejšnjega članka v prvem odstavku). To orodje se na primer v Chromu pokliče s preprostim pritiskom na tipko F12. Uporablja se lahko za vadbo gradiva v vadnicah Osnove HTML in CSS. Torej, vstavim del besedila v obliki prvega odstavka:

Ta odstavek bo eksperimentalni in na njegovem primeru bomo preučili aplikacijo sosednji izbirniki. Kot sem rekel, so oznake b, i in big otroci oznake odstavka p, ker so vse neposredno znotraj vsebnika p. Tukaj sta oznaki b in i sosednji, pa tudi i in big. Zdaj uporabite pravilo CSS za sosednje izbirnike:

B+i (barva: rdeča;) i+velika (barva: zelena;)

Po uporabi teh slogov bo odstavek videti takole:

To velja za vse oznake spletnih strani, ki vsebujejo elemente b, i in big. Poleg tega morajo biti b in i, i in big blizu, za druge kombinacije to pravilo CSS ne bo delovalo. Mislim, da je zdaj jasno, kako se pri pisanju ali urejanju dokumenta CSS uporabljajo sosednji izbirniki. Še ena zelo pomembna opomba: če ste opazili, se v primeru sosednjih elementov navedeni slog uporabi samo za drugi element.

Primer z obravnavanim odstavkom je zelo opisen in vam omogoča, da hitro razumete bistvo sosednjih izbirnikov v CSS. Vendar se v praksi običajno uporabljajo druga področja uporabe sosednjih selektorjev. Recimo, zelo pogosto je treba v telo članka vključiti nekaj besedila, posebej oblikovanega, kot so: opombe, opombe itd.

Za te namene je običajno ustvariti ločen razred in ga uporabiti za želeni odstavek. Toda veliko boljši način je uporaba sosednjih selektorjev. Na primer, na mojem blogu so slogi, ustvarjeni za stil običajnega naslova h3.

H3 (velikost pisave: 1,7em; /* Velikost pisave */ poravnava besedila: sredina; /* Postavitev besedila */ teža pisave: običajna; /* Normalna teža pisave */ družina pisav: Tahoma, Arial, Helvetica, sans-serif; /* Slog pisave */ barva: #646464; /* Barva besedila */ )

Če želite označiti naslov opombe ali sprotne opombe, definiramo poseben razred, recimo put:

H3.put ( barva: rdeča; /* Barva besedila */ margin-left: 5px; /* Levo oblazinjenje */ margin-top: 0,5em; /* Zgornje oblazinjenje */ oblazinjenje: 10px; /* Oblazinjenje okoli besedila */ text-align: levo; /* Položaj besedila */ )

Zdaj pa uporabimo sosednje izbirnike, da ustvarimo poseben slog odstavka sprotne opombe, ta odstavek bo postavljen neposredno pod naslov s slogom "h3.put":

H3.put+p (ozadje: #ffefd5; /* Barva ozadja */ margin-left: 15px; /* Levo oblazinjenje */ margin-desno: 120px; /* Desno oblazinjenje */ margin-top: 0,5em; /* Zgornji odmik */ odmik: 5 slikovnih pik; /* Rob okoli besedila */ )

Ponovno uporabimo orodje za urejanje Google Chrome, s katerim sem vam brenčal na ušesa (vendar se splača), vnesemo naslov za sprotno opombo, pri čemer ne pozabimo dodati razreda put:

Pozor!

Nato napišemo besedilo same opombe:

Gradivo, predstavljeno v tej publikaciji, je zelo pomembno za učenje osnov CSS (Cascading Style Sheets).

Po vseh teh potezah dobimo naslednji odstavek sprotne opombe na spletni strani (ne pozabite, da sem ta odstavek vstavil na koncu prejšnjega članka o podrejenih in kontekstnih izbirnikih):

Zdaj na spletnem dnevniku ali spletnem mestu, ko povežete razred »put« s katero koli oznako h3, se bo takšna sprotna opomba pojavila na spletni strani. Poleg tega bo samo prvi odstavek za oznako h3 z “class=“put”” oblikovan na poseben način. Ampak točno to smo želeli, kajne?

Na tem naj zaključim današnji priročnik, v katerem je bil podan algoritem za uporabo sosednjih in tudi univerzalnih selektorjev. Upam, da vas bo ta članek spodbudil, dragi bralci, da se naročite

Lep pozdrav, dragi bralci. V prejšnjih člankih smo preučevali predvsem atribute sloga CSS. Veliko jih je. Nekatere nastavijo možnosti pisave, druge možnosti ozadja ter možnosti tretjega zamika in okvirja.

V tem članku bomo govorili o izbirnikih slogov. V enem od člankov smo se že dotaknili. In danes si poglejmo še nekaj vrst izbirnikov, ki implicitno vežejo slogovno pravilo na element spletne strani. To so tako imenovani posebni selektorji. Obstaja jih več vrst.

Kombinatorji CSS (izbirniki soseda, otroka in konteksta)

kombinatorji je vrsta izbirnika css, ki slogovno pravilo poveže z elementom spletne strani glede na njegovo lokacijo glede na druge elemente.

Prvi kombinatorski znak plus(+) oz sosednji izbirnik. Plus se nastavi med dvema izbirnikoma:

<селектор 1> + <селектор 2> { <стиль> }

Slog v tem primeru velja za selektor 2, vendar le, če je v bližini selektor 1 in gre takoj za njim. Razmislite o primeru:

močan + i (

}
...

To je golo besedilo. To je krepko besedilo., golo besedilo, rdeče besedilo

To je golo besedilo. To je krepko besedilo., golo besedilo, in to je golo besedilo.

rezultat:

Slog, opisan v primeru, bo uporabljen samo za prvo besedilo, ki je obdano z oznako. , Ker pride takoj za oznako .

kombinator tilda(~) velja tudi za sosednje izbirnike, vendar so tokrat lahko vmes drugi elementi. V tem primeru morata biti oba izbirnika ugnezdena v isti nadrejeni oznaki:

<селектор 1> ~ <селектор 2> { <стиль> }

Slog bo uporabljen za selektor 2, ki naj sledi selektor 1. Razmislite o primeru:

močan~i(
barva: rdeča; /* Rdeča barva besedila */
}
...

To je golo besedilo. To je krepko besedilo., golo besedilo, rdeče besedilo zanj je bilo uporabljeno pravilo sosednjih izbirnikov.

To je golo besedilo. To je krepko besedilo., golo besedilo, to je rdeče besedilo.

rezultat:

Kot lahko vidite, je tokrat slogovno pravilo delovalo za obe besedili, ki sta v oznaki , kljub dejstvu, da je v drugem primeru med oznako in vredno oznake .

kombinator > se nanaša na izbirniki otrok. Omogoča pripenjanje sloga CSS k elementu spletne strani, ki je neposredno ugnezden znotraj drugega elementa:

<селектор 1> > <селектор 2> { <стиль> }

Slog bo vezan na selektor 2, ki je neposredno ugnezdena v selektor 1.

div > močno (

}
...

To je golo besedilo. To je krepko poševno besedilo.

To je golo besedilo. To je običajno krepko besedilo..

In rezultat:

Kot lahko vidite na sliki, je slogovno pravilo vplivalo samo na prvo oznako. , ki je neposredno ugnezdena v oznaki

. In neposredni starš druge oznake je oznaka

, zato pravilo zanj ne velja.

Naslednji razmisli izbirnik konteksta<пробел> . Omogoča vam, da slog CSS povežete z elementom, ugnezdenim v drugem elementu, in obstaja lahko poljubna raven ugnezdenja:

<селектор 1> <селектор 2> { <стиль> }

Slog bo uporabljen za selektor 2če je nekako vgnezdena selektor 1.

Upoštevajte prejšnji primer, samo ko opisujete pravilo CSS, je izbirnik konteksta uporaben:

div močan(
slog pisave: poševno /* poševno */
}
...

To je golo besedilo. To je krepko poševno besedilo.

To je golo besedilo. In tudi to je poševno krepko besedilo.

golo besedilo in samo krepko besedilo

rezultat:

Kot lahko vidite, je tokrat pravilo vplivalo na obe oznaki. , tudi na tisti, ki je ugnezdena v vsebniku

in v odstavku

. Na oznako , ki je samo ugnezdena znotraj odstavka

pravilo css ne deluje.

Izbirniki atributov oznak

Izbirniki atributov so posebni izbirniki, ki slog vežejo na element glede na to, ali je določen atribut prisoten ali ima določeno vrednost. Te izbirnike lahko uporabite na več načinov.

1. Preprost izbirnik atributov

Izgleda kot:

<селектор>[<имя атрибута тега>] { <стиль> }

In poveže slog s tistimi elementi, znotraj katerih je dodan navedeni atribut. Na primer:

močan(
barva: rdeča;
}
...

Avtomobilski to je mehanski motor brez sledi cestno vozilo z vsaj 4 kolesi.

rezultat:

Na sliki lahko vidite, da je za element uporabljeno pravilo css (rdeča barva besedila). močan, ki mu je dodan atribut naslov.

2. Izbirnik atributa z vrednostjo

Sintaksa tega izbirnika je:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

veže stil na elemente, katerih oznake imajo atribut z podanim ime in vrednost. primer:

a(
barva: rdeča;
velikost pisave: 150 %;
}
...
.ru" target="_blank">Povezava v novem oknu

rezultat:

Kot lahko vidite, imata oba elementa tipa hiperpovezave atribut tarča, vendar je za oznako uporabljeno pravilo css, ki besedilo povezave poveča za 1,5-krat in spremeni njegovo barvo v rdečo čigav atribut tarča ima pomen "_prazno".

3. Ena od več vrednosti atributa

Nekatere vrednosti atributov so lahko navedene s presledki, kot so imena razredov. Naslednji izbirnik se uporablja za določanje slogovnega pravila, ko seznam vrednosti atributa vsebuje želeno vrednost:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Slog se uporabi, če ima atribut zahtevano vrednost ali je na seznamu vrednosti, ločenem s presledki. Na primer:

{
barva: rdeča;
velikost pisave: 150 %;
}
...

Naš telefon: 777-77-77

Naš naslov: Moskva st. Sovjetska 5

Dobite naslednji rezultat:

Pravilo se uporabi za element, kjer je med vrednostmi atributa razred obstaja pomen tel.

4. Vezaj v vrednosti atributa

V vrednostih identifikatorjev in razredov je dovoljeno uporabljati vezaj. Če želite slog povezati z elementi, katerih vrednosti atributov lahko vsebujejo vezaj, lahko uporabite naslednjo konstrukcijo:

[atribut|="vrednost"] ( slog )
Izbirnik[atribut|="vrednost"] ( slog )

Slog se uporabi za tiste elemente, katerih vrednost atributa se začne z navedeno vrednostjo, ki ji sledi vezaj. Na primer:

{
barva: rdeča;
velikost pisave: 150 %;
}
...

• 1. odstavek


• Točka 2


• Točka 3


• Točka 4

rezultat:

V primeru slogovno pravilo velja samo za tiste elemente seznama, katerih ime razreda se začne z vrednostjo "meni".

5. Vrednost atributa se začne z določenim besedilom

Ta izbirnik nastavi slog za element, če se vrednost atributa oznake začne z določeno vrednostjo. Obstajata lahko dve možnosti:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

V prvem primeru stil velja za vse elemente, katerih oznake imajo atribut z podanim ime in vrednost, ki se začne z podanim podnizi. V drugem primeru ista stvar, le za določene elemente, navedene v glavni selektor. primer:

a(
barva: zelena;
teža pisave: krepko;
}
...

rezultat:

Primer prikazuje, kako drugače prikazati zunanje in notranje povezave. Zunanje povezave se vedno začnejo z nizom "http://". Zato v izbirniku označimo, da se slog uporablja samo za povezave, ki imajo atribut href se začne z vrednostjo http://.

6. Vrednost atributa se konča z določenim besedilom

Povezuje slog z elementi, katerih vrednost atributa se konča s podanim besedilom. Ima naslednjo sintakso:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

V prvem primeru stil velja za vse elemente, ki imajo atribut z navedenim ime in ima vrednost, ki se konča z določeno podniz. V drugem primeru ista stvar, le na določeno selektorji. Na ta način je na primer mogoče različno prikazati različne formate grafičnih podob. Na primer:

img(
obroba: 5px polna rdeča;
}
...

gif slika

slika formata png

rezultat:

V primeru bodo vse slike s pripono gif prikazane z rdečim robom debeline pet slikovnih pik.

7. Vrednost atributa vsebuje podani niz

Ta izbirnik poveže slog z oznakami, katerih vrednost atributa vsebuje navedeno besedilo. Sintaksa:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Slog veže na elemente, ki imajo atribut s podanim imenom in njegova vrednost vsebuje podano podniz. Na primer:

img(
obroba: 5px polna rdeča;
}
...

Slika iz mape galerije

Slika iz druge mape

rezultat:

V primeru je slog uporabljen za slike, ki so naložene iz mape "galerija".

To je vse o izbirnikih atributov. Vse zgornje metode je mogoče kombinirati med seboj:

Izbirnik[atribut1="vrednost1"][atribut2="vrednost2"] ( slog )

Poleg tega naj vas spomnim na posebne izbirnike CSS:

• z uporabo simbolov "+" in "~" se oblikujejo;
• simbol ">" povezuje sloge css otrok oznake;
• simbol<пробел>ustvari izbirnike konteksta.

V naslednjih člankih si bomo ogledali tudi psevdoelemente in psevdorazrede, ki zagotavljajo močno orodje za upravljanje stilov.

To je vse, dokler se spet ne srečamo.

Ne tako dolgo nazaj je izšla nova, osma različica brskalnika Internet Explorer in vsi spletni skrbniki so si oddahnili. Navsezadnje je Microsoftov brskalnik, čeprav z veliko zamudo, začel bolj ali manj spoštovati specifikacije HTML in CSS ter ustrezno prikazovati spletne strani. Na splošno so vsi pričakovali to od sedme različice. Vendar na prvi pogled ni prinesel nič novega, razen podpore za uporabo zavihkov. Toda to je le na prvi pogled ... Malo ljudi ve za še eno zelo pomembno novost v IE7: v tej različici je brskalnik prvič začel podpirati nove vrste izbirnikov CSS.

Izbirnik je del pravila CSS, ki določa, za katere elemente naj se uporabi. Njihove glavne vrste poznajo skoraj vsi spletni skrbniki. Toda malo ljudi je slišalo za tako "eksotiko", kot so sosednji in podrejeni izbirniki ter izbirniki atributov. Dolgotrajna uporaba namreč ni imela smisla, saj eden najbolj priljubljenih brskalnikov Internet Explorer zanje ni nudil podpore. Vendar so se razmere zdaj spremenile in ne bi bilo razumno pustiti ob strani novih priložnosti, ki so se odprle. Zato sem se odločil napisati to kratko recenzijo.

Sosednji izbirniki

Podaja, da se pravilo CSS uporabi za element le, če je poleg drugega elementa. primer:

Elementi se imenujejo sosednji ko so v kodi strani , in med njimi drugih elementov ni

Tukaj so sosednje oznake in , in in . oznake in niso sosednji, ker je mednje »vkleščen« tujek .

Sintaksa za pisanje sosednjega izbirnika je naslednja:

I element + II element (…)

Naredimo takšno pravilo za naš primer:

močna + em ( barva: rdeča; )
močna + ins ( barva: modra; )

Takole bo videti rezultat:

Kot lahko vidite, se je slog spremenil samo za oznako , in oznako ni bil prizadet. To zelo dobro ponazarja pravilo sosednosti.

Izvedimo še en poskus - zamenjajte v našem primeru na :

Elementi se imenujejo sosednji ko so v kodi strani ki se nahajajo drug poleg drugega, in med njimi drugih elementov ni

Kot morda ugibate, slog druge oznake Ne bo spremenil:

To pa zato, ker ne bo več sosed za .

Izbirniki otrok

Določa, da se pravilo CSS uporabi samo za element, če je podrejeni elementu drugega. primer:

Za element pravimo, da je otrok elementa, v katerega je ugnezden, če je je takojšnje potomec ta element

Tukaj so otroci oznaka v zvezi z oznako

in proti . Oznaka v zvezi z oznako

Ni otrok, ker ni njegov neposredni starš.

Sintaksa pisanja je naslednja:

I element > II element ( … )

Podrejeni izbirniki so zelo podobni dobro znanim kontekstnim izbirnikom, z edino razliko, da pri kontekstnih izbirnikih globina ugnezdenja elementov ni pomembna. Za otroke globina gnezdenja ne sme biti večja od ene stopnje. Ponazorimo vse to z nekaj pravili za naš primer:

p >
p > em (barva: modra; ) /* Podrejeni izbirnik */

Dobili bomo naslednji rezultat:

V našem primeru oznaka ni otrok

Ker je v njej na drugi stopnji gnezdenja. Seveda mu slog, ki bi moral narediti besedilo modro, ni "delal".

Zdaj zamenjajmo podrejeni izbirnik z izbirnikom konteksta:

p > močna ( barva: rdeča; ) /* Podrejeni izbirnik */
p em (barva: modra; ) /* Izbirnik konteksta */

Rezultat je predvidljiv:

Za razliko od podrejenega izbirnika je kontekstni izbirnik v tem primeru "delal", ker mu ni pomembna globina ravni gnezdenja.

Izbirniki atributov

Podaja, da se pravilo CSS uporabi samo za tiste elemente, ki vsebujejo atribut, naveden v izbirniku. primer:

CSS je zelo pomembna tehnologija, brez katere je nemogoče ustvariti vsaj dostojno spletno stran.

Osnovni pojmi CSS so stilska pravila, izbirniki, lastnosti in njihove vrednosti.

Tu ima le prvi odstavek samodefiniran parameter (ali atribut, kar je isto) align. Zato bo pravilo CSS za izbirnik atributa poravnave veljalo za prvi odstavek in samo zanj.

Sintaksa za vnos izbirnika atributa je:

[atribut] ( ... )

Naredimo pravilo za naš primer (zaradi jasnosti bomo poleg atributa navedli tudi samo oznako, za katero jo je treba upoštevati):

p (barva: zelena; teža pisave: krepko;)

Lahko je uganiti, kaj se bo zgodilo na koncu:

Doslej sem opisal tako imenovani enostavni izbirnik atributov. Zanj je pomembna samo prisotnost atributa na oznaki, njegova vrednost pa sploh ni pomembna. Medtem pa obstajajo druge vrste izbirnikov atributov. Oglejmo si jih na kratko:

[attribute="value"] ( ... )

Velja samo za elemente, ki imajo podano vrednost za ta atribut.

[atribut^=”vrednost”] ( … )

Skoraj enako, le da se mora atribut v tem primeru začeti samo z navedeno vrednostjo in ne nujno, da jo vsebuje v celoti.

[attribute$="value"] ( ... )

Podobno, s to razliko, da se mora tukaj atribut končati z navedeno vrednostjo.

[atribut*=”vrednost”] ( … )

Ta zapis pomeni, da se vrednost lahko pojavi kjer koli v atributu.

Kot lahko vidite, nam izbirniki sosedov, otrok in atributov ponujajo veliko novih načinov za pisanje učinkovite kode CSS. Izvedete lahko ogromno primerov, v katerih bi bila njihova uporaba boljša od "tradicionalnih" znanih izbirnikov. Zato menim, da bi bilo pametno uporabiti te tehnike. Kako jih uporabiti, je odvisno od vas.

Avtor članka: Aleksej Antonov, ustvarjalec in skrbnik bloga o spletnih tehnologijah www.lounwolf.ru
=====================================================================