Izbirnik
Univerzalni izbirnik

Oris kode CSS izgleda takole:

Izbirnik (lastnost CSS: vrednost; lastnost CSS: vrednost; ... itd.)

V univerzalnem izbirniku zvezdica * deluje kot izbirnik:

* (lastnost CSS: vrednost; lastnost CSS: vrednost; ... itd.)

Univerzalni izbirnik, vpliva na vse oznake dokumenta HTML hkrati.

Iz vseh oznak v dokumentu HTML lahko na primer odstranite vse oblazinjenja in oblazinjenja:

* (rob: 0; oblazinjenje: 0;)

Recimo, da imamo dokument HTML, ki vsebuje naslednjo kodo:

Snežni leopard

na naslednji način.

Uporabimo univerzalni izbirnik, da naredimo barvo pisave vseh oznak zeleno zeleno, ime pisave arial, slog pisave poševno.

Snežni leopard

Snežni leopard (irbis, ak leopard) je velik plenilski mačji sesalec. Živi v gorskih verigah Afganistana, Burme, Butana, Indije, Kazahstana, Kirgizistana, Kitajske, Mongolije, Nepala, Pakistana, Rusije, Tadžikistana in Uzbekistana. Irbis odlikuje tanko, dolgo, prožno telo, razmeroma kratke noge, majhna glava in zelo dolg rep. Dolžina snežnega leoparda z repom je 200-230 cm, teža do 55 kg. Barva dlake je svetla, dimljeno siva z obročastimi ali trdnimi temnimi lisami.

Snežni leopard lovi predvsem gorske koze in ovne, v njegovi prehrani najdemo tudi divje prašiče, fazane in celo gofje. Zaradi nedostopnosti habitata vrste so snežni leopardi še vedno slabo razumljeni. Vendar pa se po grobih ocenah njihovo število giblje v območju približno 10 tisoč posameznikov. Od leta 2013 je lov na snežne leoparde na splošno prepovedan.

Stran v brskalniku bo videti takole.

Lahko tudi eksperimentirate z oblazinjenjem, najprej naredite 0 in nato 15px, ga dodate v kodo CSS.

• Naloga, ki se izvaja, je izbira vseh predmetov. Na splošno vsi.
• Oznaka - simbol zvezdice - *.
• Primer uporabe:

privzeto ponastavi zamike za vse elemente

Več o univerzalnem izbirniku

Uvedeno v CSS od različice 2. Ujema se s katerim koli elementom v. Zato se slogi, določeni za univerzalni izbirnik, uporabijo za vse elemente hkrati. Zaradi tega vam svetujem, da ga uporabljate zelo previdno – pri dedovanju slogov lahko pride v težave. Oziroma nepredvidljivo (za neizkušenega koderja) obnašanje. To točko bomo podrobneje obravnavali v poglavju o dedovanju.

Druga značilnost univerzalnega izbirnika je, da ga je mogoče nekaznovano preskočiti, kadar se uporablja v povezavi z drugim izbirnikom (na primer izbirnikom razreda, identifikatorja ali atributa) kot del preprostega izbirnika. To je približno enako, kot če bi rekli preprosto "dromadarji so enogrbe kamele" namesto "Vsi dromedari so enogrbe kamele". Pomen se ni spremenil.

Primer:

* .error (barva: rdeča;) .error (barva: rdeča;) / * ti dve pravili sta enakovredni. Univerzalni izbirnik je v drugem primeru preskočen * /

Območje uporabe

Pravzaprav je najbolj priročno uporabiti univerzalni izbirnik, kot v prvem primeru, da ponastavite začetne vrednosti slogov, odvisne od brskalnika (zlasti zamik).

Toda tudi ta aplikacija se ne bo vedno izkazala kot dobra ideja. Zaradi pomanjkljivosti univerzalnega izbirnika, opisanega v tem članku, je bolje uporabiti. To pomeni, da uporabite izbirnike tipov.

Tako gladko sva prišla do naslednje teme. Z univerzalnim selektorjem se je, kot kaže, uredilo. Čas je da gremo naprej. Naslednja postaja - .

Pozdravljeni, dragi bralci spletnega mesta bloga. Danes bomo svoje še naprej polnili z materiali in začeli govoriti o tako temeljni stvari, kot so selektorji v jeziku CSS.

Obstaja sedem vrst njih - oznaka, razred, Id, univerzalni, atributi, pa tudi psevdorazredi in psevdoelementi. Malo preveč, kajne? No, nič, počasi bomo vse analizirali in s tem na podrobnih primerih.

V prejšnjih objavah smo že obravnavali in se tudi seznanili z enotami velikosti, kot smo spoznali načela dedovanja v CSS. No, danes, kot sem rekel, odpiramo zelo resno poglavje v preučevanju slogovnega označevalnega jezika.

Oznake CSS in izbirniki razredov

Preden preučite slogovna pravila, se boste morali naučiti, kako in po katerih načelih nastaviti tiste oznake, po katerih bo brskalnik razumel, za katere elemente kode HTML jih je treba uporabiti. Obstajajo različni selektorji. Najenostavneje, z vidika razumevanja, uporabite imena oznak, za katere bo treba uporabiti pravila CSS, zapisana za njimi.

Ta primer bo uporabil rdečo za barvo pisave in sivo za polnjenje ozadja za vse oznake P odstavka. Vsako pravilo CSS ima lahko več izbirnikov hkrati. Kako jih bo treba brati v tem primeru? Je vedno od desne proti levi, tj. začnite najbližje odpirajočemu oklepaju.

V zgornjem primeru prva vrstica prikazuje izbirnik oznake (elementa), ki pove, da mora biti barva pisave rdeča za vse Dive.

Vsebina običajne posode Div

V drugi vrstici vidimo primer kompleksnega izbirnika, v katerem imamo nov element kot je razred (razred)... Predpisano je v kakovosti. Kot vrednost za razred lahko uporabimo poljubno ime s simboli ,,, [_], [-].

Toda poleg razreda se Id uporablja tudi v označevalnem jeziku sloga. Kakšna je razlika med razredom in ID-jem? Vrednost slednjega mora biti edinstvena, saj Id je edinstven identifikator for Html oznako in njeno ime (vrednost) lahko uporabite samo enkrat v kodi.

In vrednost za razred ni edinstvena in se lahko uporablja za poljubno število elementov v kodi. tiste. različne oznake (Div, P, H1 itd.) imajo lahko enako vrednost za svoj atribut razreda:

Kako se uporablja v selektorjih CSS? Izkazalo se je, da je njegovo ime napisano s pikami naprej.

Zato, ko vidimo, da se v kodi CSS nekaj začne s piko, takoj razumemo, da govorimo o razredu. Če upoštevamo primer, prikazan na posnetku zaslona, ​​bo zdaj v vseh elementih kode Html, kjer bo zapisan "razred" z vrednostjo "Modra", besedilo obarvano modro.

A to se sploh ne bo zgodilo, ker smo izbrali ime razreda "Modri". Lahko ga poimenujete, kakor želite (vsaj "xyz"), barva v našem primeru pa je nastavljena točno tako, kot je dodeljena izbirniku s tem razredom. Upam, da je to jasno? Spremenimo ime (vrednost) razreda v primeru:

Odstavek z besedilom

Odstavek z besedilom

tiste. zdaj imamo razred XYZ in zanj napisano pravilo:

Xyz (barva: modra)

obarvali besedilo odstavka modro. Ta primer to še dodatno poudarja ime za atribut razreda katera koli se lahko uporabi. Vendar pa nadaljujmo.

Oglejmo si še en primer, kako se izbirniki oznak in razredov uporabljajo v CSS. Predstavljajmo si, da imamo naslednja slogovna pravila:

Div (barva: rdeča) div.a123 (barva: zelena) .xyz (barva: modra)

Predstavljajte si tudi, da imamo v kodi Html naslednje elemente:

V skladu s predpisanimi pravili za navedene selektorje naj bi vsebina danih elementov kode Html izgledala takole:

Zdaj pa poglejmo, zakaj je brskalnik tako interpretiral sloge teh elementov kode Html. Za prvi vsebnik Div, v katerem ni napisan noben razred, bo veljalo pravilo CSS, ki velja za vse vsebnike: div (barva: rdeča). Zato bo njegova vsebina obarvana rdeče. Kaj je bilo potrebno pokazati.

V oznaki drugega Diva imamo vpisan razred "a123". V tem primeru bodo uporabljena pravila CSS, ki ustrezajo "div.a123" (ker imamo samo oznako Div z napisanim atributom class = "a123"). Zato bo vsebina druge posode obarvana zeleno.

Verjetno pa ste opazili, da je prvo pravilo CSS "div (barva: rdeča)" mogoče uporabiti tudi za drugi Div, saj je namenjeno vsem vsebnikom brez izjeme. Izkaže se protislovje, ki se v CSS razreši z uvedbo koncepta.

O tem bomo podrobneje govorili malo kasneje, za zdaj pa bom rekel, da bo prioriteta "div.a123" (za drugi Div v tem primeru) višja.

Mimogrede, podobna situacija se zgodi s tretjim Div iz našega primera. Zanj sta primerni dve možnosti hkrati: izbirnik oznak "div" in izbirnik razreda ".xyz". Spet zaradi razlogov, ki jih še nisem pojasnil (o tem si preberite na povezavi zgoraj), bo prednost slednjega višja, zato bo vsebina tretjega vsebnika modro obarvana.

Gremo naprej. V zgornjem primeru imamo naslednjo oznako odstavka P, ki je napisana class = "a123". Izkazalo se je, da ta element ne sodi pod nobenega od treh selektorjev, ki smo jih napisali (vsi trije so ga zgrešili).

Prekriva se le z drugo možnostjo, vendar bo ta izbirnik uporabljen samo za oznake "Div" z razredom "a123", ne pa tudi za oznako odstavka P. Posledično bo barva besedila v tem odstavku ostala privzeta, tj Črna.

Nadalje v primeru imamo element odstavka z razredom = "xyz". Zadnje pravilo CSS ".xyz (barva: modra)" bo uporabljeno zanj. Zato bo besedilo v tem odstavku obarvano modro. Tukaj je, mislim, vse jasno.

Generični izbirnik in edinstven ID

Zdaj pa preidimo na Id-je, ki sem jih že omenil. Ko vidimo nekaj v kodi CSS sprednja mreža (hash), potem to pomeni, da imamo opravka z ID-jem:

Običajno je ta izbirnik napisan brez omembe oznake, na katerega se nanaša (prva možnost v zgornjem primeru), čeprav je sprejemljiva tudi druga možnost črkovanja, vendar se redko uporablja. To je posledica dejstva, da bo vrednost atributa Id v kodi edinstvena, kar pomeni, da ne moreta obstajati dva elementa z enakimi vrednostmi Id. tiste. nima smisla navajati, čeprav to ni prepovedano.

Zato običajno napišejo le hash (mrežo), takoj za njim pa vrednost (ime) atributa Id. Recimo, da imamo za Id naslednje pravilo:

#back (barva: rdeča)

in koda vsebuje naslednji odrezek:

ki ga bo brskalnik kot rezultat uporabe pravila za "#back" razlagal takole:

Vsebnik Div ​​z edinstvenim ID-jem

Prav tako CSS zagotavlja univerzalni izbirnik, označen z zvezdico, ki kaže, da bo to pravilo veljalo na splošno za kateri koli element v kodi:

* (barva: črna)

V tem primeru bo besedilo v kateri koli oznaki črno (privzeta barva). Jasno je, da bodo imeli vsi ostali izbirniki (oznake, razredi in Id) višjo prioriteto kot univerzalni.

Izbirniki atributov in njihova prihodnost v sodobnem CSS

Vse zgoraj opisane možnosti (oznaka, razred, ID in generično) bodo delovale v absolutno vseh brskalnikih. Vendar obstajajo druge možnosti, ki ne delujejo povsod.

Ta vrsta vključuje izbirnike atributov, ki so zelo priročni in vam omogočajo, da znatno razširite in hkrati poenostavite možnosti delovanja na točke, ki pa na žalost ne podpirajo 100% vsi brskalniki.

Kot se verjetno spomnite, lahko v jeziku HTML znotraj oznak uporabljamo različne atribute, ki nam omogočajo, da vsebini samih elementov damo določene lastnosti. Zato bi bilo logično, da kot izbirnike v CSS uporabite ne samo imena oznak, temveč tudi imena atributov.

Pravzaprav smo to že storili, ko smo upoštevali razred in Id, ker sta bila v bistvu atributa nekaterih oznak. Samo Aidi in Klass sta zelo pomembna pri postavitvi in ​​sta bila razčlenjena v ločene skupine, vsaka s svojo sintakso.

In kako uporabiti druge atribute, ki obstajajo v jeziku Html (ne Id in ne razreda) v izbirnikih? Precej preprosto - priložite jih v oglate oklepaje:

(barva: zelena)

Zdaj bo vsaka oznaka v kodi Html, ki bo imela "naslov", imela zeleno barvo besedila.

Po mojem mnenju zelo priročno. Toda celotna težava z uporabo izbirnikov atributov je v tem v IE 6 in nižjih ne delujejo na splošno ali delujejo, vendar le delno. Dokler se delež uporabnikov, ki brskajo po internetu z uporabo IE 6, ni nič, ta priročna metoda verjetno ne bo široko uporabljena pri postavitvi. Toda kljub temu morate vedeti za njihov obstoj in jih znati uporabljati.

Kot lahko vidite iz primera, ni pomembno, ali ima atribut, določen v izbirniku, kakšno vrednost ali je prazen. A to še zdaleč ni vse, kar se da narediti z njim, saj je to le pesem.

V njih lahko navedete ne le ime atributa, temveč tudi njegovo vrednost:

(barva: zelena)

Posledično bodo pravila CSS, napisana za tak izbirnik, uporabljena samo za oznako, ki ima "naslov" z vrednostjo "Prvi odstavek" (v našem primeru bo to druga vrstica):

Opisani primer je bil stroga enakost, vendar lahko ta izbirnik zapišete takole:

(barva: zelena)

To to pravilo CSS bo veljalo samo za tiste elemente kode Html, ki imajo v svojem "naslovu" besedo "odstavek" (v našem primeru bosta to druga in tretja vrstica):

Tolmači sintakso izbirnika atributov «~=» kot "vsebuje celotno besedo". Na primer, za element z naslovom = "(! LANG: drugi odstavek" CSS правило «color:green» уже применяться не будет.!}

Lahko pa namesto tega postavite «*=» in potem ne bodo upoštevane samo posamezne besede, določene v izbirniku, ampak tudi deli besed (kateri koli del besedila, ki je vsebovan kjer koli v atributu):

(barva: zelena)

V tem primeru in za element z naslovom = "(! LANG: Drugi odstavek" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (vse, kar se začne z vrednostjo v oklepajih), kar pomaga ustvariti izbirnik atributov, kot je ta:

(barva: rdeča)

Verjetno se spomnite, da je atribut označevanje. Tako so pogosto notranje povezave na spletnem mestu relativne, zunanje povezave, sicer, kako jih narediti absolutne, pa ne bodo delovale.

Zato se bodo vse zunanje povezave začele s "http", notranje povezave pa je mogoče podati v relativni obliki brez uporabe "http". To selektor, napisan v našem primeru, bo dovolil pobarvajte vse zunanje povezave na spletnem mestu(vse absolutno) v rdeči barvi. No, relativne, ki ne vsebujejo "http", bodo ostale v privzeti barvi. Po moje super!!!

Kot lahko vidite, nam izbirniki atributov ponujajo veliko možnosti in dejstvo, da še niso v široki uporabi, je zasluga zelo revnega in užaljenega podjetja Melkosoft, predvsem pa njihove domišljije IE 6. Toda počasi se začnejo uporabljati v CSS in se bodo kmalu seveda prebili v življenje.

Da, obstaja še en operater «$=» - vse, kar se konča z navedeno vrednostjo:

(barva: zelena)

Posledično bosta druga in tretja vrstica iz našega prvega primera obarvani zeleno. vrednosti "title" se končajo z "raf". Tako bi izbirniki atributov čudovito delovali v sodobnem CSS, če ne bi bilo določenega odstotka uporabnikov IE 6.

Pravzaprav od vseh vrst ostajamo, da upoštevamo le dve:. Želim pa ga prenesti v naslednji članek, kjer bomo govorili tudi o njihovih različnih kombinacijah.

Srečno! Se vidimo kmalu na straneh spletnega mesta blog

Morda vas zanima

Izbirniki psevdorazredov in psevdoelementov v CSS (lebdenje, prvi otrok, prva vrstica in drugi), razmerja med oznakami v kodi Html
Prioritete Css in izboljšanje s pomembnimi, kombinacijami izbirnikov in združevanjem, slogi po meri in avtorji
Slog seznama (vrsta, slika, položaj) - pravila Css za prilagajanje videza seznamov v kodi Html
Ozadje v CSS (barva, položaj, slika, ponovitev, priloga) - vse za nastavitev barve ozadja ali slike ozadja elementov HTML
CSS - kaj je to, kako so kaskadne slogovne liste povezane s html kodo s pomočjo Style in Link
Enote velikosti (piksli, Em in Ex) in dedovanje pravil CSS
Za kaj je CSS, kako povezati kaskadne slogovne liste z dokumentom HTML in osnove sintakse tega jezika
Padding, Margin and Border - nastavite v CSS notranje in zunanje robove ter obrobe za vse strani (zgoraj, spodaj, levo, desno) Kako nastaviti izmenično barvo ozadja vrstic tabel, seznamov in drugih elementov Html na spletnem mestu z uporabo psevdorazreda nth-child
Kako najti in odstraniti neuporabljene slogovne črte (dodatne izbirnike) v datoteki CSS vašega spletnega mesta
Prikaži (blok, brez, v vrstici) v CSS - nastavite vrsto prikaza elementov HTML na spletni strani

Včasih je pri ustvarjanju spletnega mesta potrebno uporabiti poseben slog za vse elemente, ki se nahajajo na strani, brez izjeme. Za izpolnitev te naloge se uporablja univerzalni izbirnik.

Opis

Označen je s simbolom "*". Z njegovo pomočjo lahko izberete vse oznake na strani hkrati, ne da bi popravljali njihov namen in gnezdenje. Na primer:

* (velikost pisave: 18px;)

S tem vnosom smo vsem elementom z besedilom dali višino pisave 18 slikovnih pik.

Oglejmo si ga podrobneje. Do druge različice CSS ni bilo univerzalnega izbirnika. Ujema se z vsemi elementi, zato bodo slogi, ki jih bo imel, uporabljeni zanje hkrati. Pri uporabi tega izbirnika bodite zelo previdni. Ta previdnost je posledica morebitnega pojava težav pri dedovanju stilov oziroma njihovega nepredvidljivega vedenja.

Omeniti velja tudi, da uporaba razreda, identifikatorja, atributa omogoča, da brez škode preskočite univerzalni izbirnik. Na primer:

*. levo (obroba: 1px, trdna # 000;). levo (obroba: 1px trdno # 000;)

Ti vnosi imajo enako pomensko obremenitev, slog pa bo uporabljen na enak način tako z univerzalnim izbirnikom kot brez njega.

Kje se lahko uporablja?

V bistvu se univerzalni izbirnik najde v praksi, ko nuliranje privzetih slogov brskalnika. Na primer, oblazinjenje, velikosti pisave in tako naprej.

Čeprav je ta metoda preprosta in bo tudi znatno zmanjšala dolžino kode, ima številne pomanjkljivosti.

Slabosti univerzalnega izbirnika pri spuščanju standardnih slogov:

• nekaterih slogov ni mogoče ponastaviti
• za atribut izbire ne more biti ničelnega odmika
• lahko "ubije" standardni videz gumba v večini brskalnikov
• Mozila deluje z manjšimi napakami v brskalniku
• znatno upočasni nalaganje strani za Mozilo (vendar to velja za spletna mesta s CSS več kot tisoč vrsticami, sicer je zamuda nevidna.)

Zaradi zgoraj opisanih razlogov je priporočljivo, da izpisete sloge posebej za vsak element z uporabo izbirnika vrste. Na koncu je podan primer podobne kode za ponastavitev slogov.

Splošni izbirnik CSS je morda najlažje razumeti, saj določa, da bodo slogi uporabljeni za absolutno vse elemente brez izjeme. Univerzalni izbirnik je sestavljen samo iz enega znaka - zvezdice (*), splošna sintaksa je naslednja:

* { lastnost: vrednost; lastnost: vrednost; ...)

Primer uporabe generičnega izbirnika CSS

1. odstavek

2. odstavek

3. odstavek

Rezultat v brskalniku

1. odstavek

2. odstavek

3. odstavek

V tem primeru so bili robovi, odmiki in obrobe elementov strani odstranjeni. za kaj je to? Kot že veste iz lekcije , nekateri elementi HTML imajo na začetku določene vrednosti nekaterih lastnosti, na primer, odstavki imajo neničelni zgornji in spodnji rob belega prostora, povezave na slike imajo okvirje itd. Vendar ni vse tako preprosto, dejstvo je, da se lahko v različnih brskalnikih velikost teh polj nekoliko razlikuje, nekateri pa že dolgo niso nastavili privzetih okvirjev za povezave do slik. In to niso vse možne razlike.

Torej, mnogi oblikovalci postavitve (in zdaj se naučite točno postavitve) ustvarijo tako imenovane "Ponastavi sloge CSS", to pomeni, da na samem začetku slogovne liste ponastavijo vse možne vrednosti CSS, ki niso nič, in nato v procesa, dodaj sloge elementom, vendar že , seveda s svojimi pomeni. Tako ste lahko prepričani, da bo stran HTML videti enako v vseh brskalnikih.

Zelo pogosto se za ponastavitev slogov uporablja univerzalni izbirnik, čeprav nekateri raje preprosto navedejo nekatere izbirnike oznak, ločene z vejicami, drugi pa sploh ne uporabljajo ponastavitve, saj se zanašajo na njihovo skrbnost. Kako boste ravnali, je odvisno od vas, v vsakem primeru pa je o tem še prezgodaj razmišljati. In bodite prepričani, da boste sčasoma razvili svoj slog pisanja (oprostite za tavtologijo), zato se s tem ne obremenjujte.

Domača naloga.

Ne vidim smisla delati domače naloge na univerzalnem selektorju, saj je tukaj vse preveč očitno, zato naredimo malo drugače.

1. Spremenite sloge oznake, tako da bo videti kot odstavek. Kakšno lastnino potrebujete za to, pomislite sami.
2. Spremenite oznako odstavka tako, da bo videti kot oznaka za poudarjanje dolgih narekovajev.
3. Pretvorite oznako iz elementa v vrstici v element bloka. Za to uporabite lastnino