Bună ziua, dragi cititori ai site-ului blogului. Astăzi vom continua să le umplem pe ale noastre cu materiale și să începem să vorbim despre un lucru atât de fundamental precum selectoarele în limbajul CSS.

Există șapte tipuri de ele - etichetă, clasă, Id, universal, atribute, precum și pseudo-clase și pseudo-elemente. Cam mult, nu-i așa? Ei bine, nu contează, hai să le analizăm încet pe toate și să folosim exemple detaliate.

În publicațiile anterioare, ne-am uitat deja la , și, de asemenea, ne-am familiarizat cu unitățile de dimensiune, cum ar fi și am învățat despre principiile moștenirii în CSS. Ei bine, astăzi, așa cum am spus, deschidem un capitol foarte serios în studiul limbajului de markup stil.

Selectoare de etichete și clase în CSS

Înainte de a studia regulile de stil, va trebui să învățați cum și în funcție de ce principii să setați acele etichete prin care browserul va înțelege la ce elemente de cod HTML trebuie aplicate. Selectoarele sunt diferite. Cele mai simple, din punct de vedere al înțelegerii, folosesc nume de tag, cărora le vor trebui aplicate regulile limbajului CSS scris după ele.

În acest exemplu, toate etichetele paragrafului P vor folosi o culoare roșie a fontului și o culoare de umplere a fundalului gri. Orice regulă CSS poate avea mai mulți selectori specificați simultan. Cum ar trebui citite? Întotdeauna de la dreapta la stânga, adică începeți cu cea mai apropiată de bretele de deschidere.

În exemplul de mai sus, prima linie arată un selector de etichetă (element) care forțează culoarea fontului să fie roșie pentru toate containerele Div.

Conținutul unui container Div obișnuit

În a doua linie vedem un exemplu de selector complex în care avem un nou element ca clasă. Este înregistrată ca . Putem folosi un nume arbitrar ca valoare pentru clasă folosind simbolurile ,,,[_],[-].

Dar, pe lângă clasă, limbajul de markup stil folosește și Id. Care este diferența dintre o clasă și un Id? Valoarea acestuia din urmă trebuie să fie unică, deoarece Id este un identificator unic pentru o etichetă HTML și numele (valoarea) acesteia pot fi folosite o singură dată în cod.

Și valoarea pentru clasă nu este unică și poate fi folosită pentru oricare cantitate mare elemente din cod. Aceste. diferite etichete (Div, P, H1 etc.) pot avea aceeași valoare pentru atributul lor de clasă:

Cum este folosit în selectoarele CSS? Se pare că numele lui este scris cu un punct în față.

Prin urmare, când vedem ceva în codul CSS care începe cu un punct, înțelegem imediat că vorbim despre o clasă. Dacă ne uităm la exemplul dat în captură de ecran, acum în toate elementele codului HTML unde este scris „clasa” cu valoarea „Albastru”, textul va fi colorat în albastru.

Dar acest lucru nu se va întâmpla deloc, deoarece am ales numele de clasă „Albastru”. L-am putea numi orice (chiar și „xyz”), iar culoarea din exemplul nostru este setată exact așa cum a fost atribuită selectorului cu această clasă. Sper că acest lucru este clar? Să schimbăm numele (valoarea) clasei din exemplu:

Paragraf cu text

Paragraf cu text

Aceste. Acum avem clasa XYZ și o regulă scrisă pentru ea:

Xyz (culoare: albastru)

Colorat textul paragrafului în albastru. Acest exemplu subliniază încă o dată acest lucru nume pentru atributul de clasă poți folosi orice. Totuși, să continuăm.

Să aruncăm o altă privire la un exemplu despre modul în care selectorii de etichete și clase sunt utilizați în CSS. Să ne imaginăm că avem următoarele reguli de stil:

Div (culoare:roșu) div.a123 (culoare:verde) .xyz (culoare:albastru)

Să ne imaginăm și că în codul HTML avem următoarele elemente:

În conformitate cu regulile prescrise pentru selectoarele specificate, conținutul elementelor de cod HTML date ar trebui să arate astfel:

Acum să vedem de ce browserul a interpretat stilul acestor elemente de cod HTML în acest fel. Pentru primul container Div, în care nu este specificată nicio clasă, se va aplica regula CSS aplicabilă tuturor containerelor: div (culoare: roșu). În consecință, conținutul său va fi colorat în roșu. Asta trebuia arătat.

În eticheta din a doua Div avem clasa „a123”. În acest caz, se vor aplica regulile CSS corespunzătoare „div.a123” (pentru că avem doar o etichetă Div cu atributul class="a123" scris în ea). Prin urmare, conținutul celui de-al doilea recipient va fi colorat în verde.

Dar probabil ați observat că puteți aplica și prima regulă CSS „div (culoare:roșu)” la a doua Div, deoarece este destinată tuturor containerelor fără excepție. Acest lucru are ca rezultat o contradicție care poate fi rezolvată în CSS prin introducerea conceptului .

Vom vorbi despre asta în detaliu puțin mai târziu, dar deocamdată voi spune doar că prioritatea „div.a123” (pentru a doua Div din exemplul luat în considerare) va fi mai mare.

Apropo, o situație similară apare cu a treia Div din exemplul nostru. Există două opțiuni pentru acesta: selectorul de etichete „div” și selectorul de clasă „.xyz”. Din nou, din motive care nu au fost încă explicate de mine (citiți despre asta la linkul de mai sus), prioritatea acestuia din urmă va fi mai mare, astfel încât conținutul celui de-al treilea container va fi colorat în albastru.

Să mergem mai departe. În exemplul de mai sus, avem o etichetă de paragraf P, care conține class="a123". Se pare că acest element nu se încadrează în niciunul dintre cele trei selectoare pe care le-am specificat (toți trei l-au ratat).

Are doar o intersecție cu a doua opțiune, dar acest selector va fi folosit doar pentru etichetele „Div” cu clasa „a123”, și nu pentru eticheta de paragraf P. Ca urmare, culoarea textului din acest paragraf va rămâne implicită , adică negru.

În continuare, în exemplu, avem un element paragraf cu class="xyz". Se va aplica ultimul css regula „.xyz (culoare:albastru)”. Prin urmare, textul acestui paragraf va fi colorat în albastru. Aici, cred, totul este clar.

Selector universal și ID unic

Acum să trecem la ID-urile pe care le-am menționat deja. Când vedem ceva în codul CSS un hash in fata, atunci asta înseamnă că avem de-a face cu Id:

De obicei, acest selector este scris fără a menționa eticheta, la care se referă (prima opțiune din exemplul dat chiar mai sus), deși a doua ortografie este și ea acceptabilă, dar este rar folosită. Acest lucru se datorează faptului că valoarea atributului Id din cod va fi unică, ceea ce înseamnă că nu pot exista două elemente cu aceleași valori Id. Aceste. nu are rost să clarificăm, deși acest lucru nu este interzis.

Prin urmare, de obicei, ei scriu pur și simplu un hash (hash), urmat imediat de valoarea (numele) atributului Id. Să presupunem că avem următoarea regulă pentru Id:

#spate (culoare:roșu)

iar codul conține următorul fragment:

care, ca urmare a aplicării regulii după „#back” la aceasta, va fi interpretată de browser după cum urmează:

Container Div cu ID unic

CSS oferă, de asemenea selector universal indicat printr-un asterisc, ceea ce arată că această regulă se va aplica în general oricărui element din cod:

* (culoare:negru)

În acest caz, textul inclus în orice etichetă va fi negru (culoarea implicită). Este clar că toți ceilalți selectori (etichete, clase și Id) vor avea o prioritate mai mare decât cea universală.

Selectorii de atribute și viitorul lor în CSS modern

Toate opțiunile descrise mai sus (etichetă, clasă, Id și universal) vor funcționa în absolut toate browserele. Dar există și alte opțiuni care nu funcționează peste tot.

Acest tip include selectoare de atribute, care sunt foarte convenabile și vă permit să extindeți semnificativ și, în același timp, să simplificați posibilitățile de influență direcționată asupra, dar care, din păcate, nu sunt pe deplin acceptate de toate browserele.

După cum probabil vă amintiți, în limbajul HTML, în interiorul etichetelor putem folosi diverse atribute care ne permit să dăm anumite proprietăți conținutului acestor elemente în sine. Prin urmare, ar fi logic să folosiți nu numai nume de etichete, ci și nume de atribute ca selectoare în limbajul CSS.

De fapt, am făcut deja acest lucru când ne-am uitat la class și Id, pentru că erau în esență atribute ale unor etichete. Doar că ID-ul și Clasa sunt foarte importante în aspect și au fost puse în grupuri separate, fiecare cu propria sintaxă.

Cum să folosiți alți selectori care există în limbă? Atributele HTML(nu Id și nu clasă)? Destul de simplu - includeți-le între paranteze drepte:

(culoare:verde)

Acum orice etichetă din codul HTML care are „titlu” scris în ea va avea o culoare de text verde.

Foarte comod, dupa parerea mea. Dar întreaga problemă cu utilizarea selectorilor de atribute este aceea nu funcționează în IE 6 și mai josîn general sau funcționează, dar numai parțial. Până când procentul de utilizatori care accesează Internetul folosind IE 6 nu este zero, această metodă convenabilă nu va deveni, cel mai probabil, larg răspândită în aspect. Dar, cu toate acestea, trebuie să știți despre existența lor și să le puteți folosi.

După cum puteți vedea din exemplu, nu contează dacă atributul specificat în selector are vreo valoare sau este gol. Dar asta nu este tot ce poți face cu ea, pentru că este doar un cântec.

Puteți indica în ele nu numai numele atributului, ci și semnificația acestuia:

(culoare:verde)

Ca urmare, regulile CSS specificate pentru un astfel de selector vor fi aplicate numai etichetei care are un „titlu” cu valoarea „Primul paragraf” (în exemplul nostru aceasta va fi a doua linie):

Exemplul descris a fost o egalitate strictă, dar puteți scrie acest selector astfel:

(culoare:verde)

Că. Această regulă CSS se va aplica numai acelor elemente de cod HTML al căror „titlu” conține cuvântul „paragraf” (în exemplul nostru aceasta va fi a doua și a treia linie):

Sintaxa selectorului de atribute interpretează «~=» ca „întregul cuvânt este conținut”. De exemplu, pentru un element cu title="Second paragraph" CSS правило «color:green» уже применяться не будет.!}

Dar o poți pune în schimb «*=» și atunci nu vor fi luate în considerare numai cuvintele individuale specificate în selector, ci și părți de cuvinte (orice fragment de text conținut oriunde în atribut):

(culoare:verde)

În acest caz, și pentru elementul cu title="Second paragraph" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (tot ceea ce începe cu valoarea specificată în paranteze), ceea ce ajută la crearea unui selector de atribute ca acesta:

(culoare:roșu)

Probabil vă amintiți că atributul pentru specificarea . Deci, destul de des, link-urile interne de pe un site web sunt făcute relative, dar link-urile externe nu pot fi făcute altfel decât pentru a le face absolute.

Prin urmare, totul link-uri externe va începe cu „http”, iar cele interne pot fi specificate în formă relativă fără a utiliza „http”. Că. Selectorul specificat în exemplul nostru va permite colorează toate linkurile externe de pe site(toate absolute) în roșu. Ei bine, cele relative care nu conțin „http” vor rămâne culoarea care a fost adoptată pentru ele în mod implicit. Cred ca e grozav!!!

După cum puteți vedea, selectoarele de atribute ne oferă o mulțime de posibilități și faptul că nu sunt încă utilizate pe scară largă este meritul companiei foarte sărace și jignite Melkosoft și, în special, creația lor IE 6. Dar încetul cu încetul încep pentru a fi folosite în CSS și în curând, bineînțeles, își vor face drum în viață.

Da, există un alt operator «$=» - tot ce se termină cu valoarea specificată între ghilimele:

(culoare:verde)

Ca urmare, a doua și a treia rânduri din primul nostru exemplu vor fi colorate în verde, deoarece sensul de „titlu” se termină în „raf”. Acesta este modul în care selectoarele de atribute ar funcționa minunat în CSS modern dacă nu ar exista încă un anumit procent de utilizatori care folosesc browserul IE 6.

De fapt, dintre toate tipurile, mai avem doar două de luat în considerare: . Dar vreau să mut acest lucru la următorul articol, unde vom vorbi și despre diferitele lor combinații.

Mult succes pentru tine! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Selectoare de pseudo-clase și pseudo-elemente în CSS (hover, first-child, first-line și altele), relații între Etichete HTML cod
Prioritățile în Css și creșterea lor datorită Important, combinarea și gruparea selectoarelor, stilurilor de utilizator și autor
Stil listă (tip, imagine, poziție) - reguli Css pentru personalizare aspect liste în cod HTML
Fundal în CSS (culoare, poziție, imagine, repetare, atașament) - totul pentru setarea fundalului sau a culorii de fundal Poze HTML elemente
CSS - ce este, cum sunt conectate foile de stil în cascadă la codul HTML folosind Style și Link
Unități de dimensiune (pixeli, Em și Ex) și reguli de moștenire în CSS
Pentru ce este CSS, cum să conectați foile de stil în cascadă la document HTMLși sintaxa de bază a acestui limbaj
Căptușeală, margine și chenar - instalate CSS internși marginile externe, precum și cadre pentru toate părțile (sus, jos, stânga, dreapta) Cum să configurați culoarea de fundal alternativă a rândurilor de tabele, liste și altele elemente HTML pe site-ul web folosind pseudoclasa a nth-child
Cum să găsiți și să eliminați liniile de stil neutilizate (selectoare suplimentare) din fișierul CSS al site-ului dvs
Afișare (block, none, inline) în CSS - setați tipul de afișare a elementelor HTML pe pagina web

Selector
Selector universal

Conturul codului CSS arată astfel:

Selector (proprietate CSS: valoare; proprietate CSS: valoare; ... etc.)

Într-un selector universal, asteriscul * acționează ca un selector:

* (proprietate CSS: valoare; proprietate CSS: valoare; ... etc.)

Selector universal, afectează simultan toate etichetele din documentul HTML.

De exemplu, puteți elimina toate indentările interne și externe din toate etichetele dintr-un document HTML:

* ( marja: 0; umplutură: 0; )

Să presupunem că avem un document HTML care conține următorul cod:

Leopard de zăpadă

după cum urmează .

Să folosim un selector universal pentru a seta culoarea fontului pentru toate etichetele la verde, numele fontului să fie arial și stilul fontului să fie oblic.

Leopard de zăpadă

Leopardul de zăpadă (irbis, ak leopard) este un mamifer mare prădător din familia pisicilor. Trăiește în munții din Afganistan, Birmania, Bhutan, India, Kazahstan, Kârgâzstan, China, Mongolia, Nepal, Pakistan, Rusia, Tadjikistan și Uzbekistan. Leopardul de zăpadă este subțire, lung, corp flexibil, picioare relativ scurte, cap mic și coadă foarte lungă.

Lungimea leopardului de zăpadă, inclusiv coada acestuia, este de 200-230 cm, greutate de până la 55 kg.

Culoarea blănii este gri deschis, fumuriu, cu pete întunecate în formă de inel sau solide.

Leopardul de zăpadă vânează în principal capre de munte și oi; Din cauza inaccesibilității habitatului speciei, leoparzii de zăpadă rămân încă puțin studiati. Cu toate acestea, conform estimărilor aproximative, numărul lor variază în jurul a 10 mii de indivizi. Din 2013, vânătoarea de leoparzi de zăpadă este interzisă peste tot. Pagina din browser va arăta astfel. De asemenea, puteți experimenta

Uneori, atunci când creați un site web, devine necesar să aplicați un stil specific tuturor elementelor care apar pe pagină fără excepție. Pentru a implementa această sarcină, se utilizează un selector universal.

Descriere

Este indicat prin simbolul „*”. Cu ajutorul acestuia, puteți selecta toate etichetele de pe pagină simultan, fără a face ajustări în scopul și imbricarea acestora. De exemplu:

* (dimensiunea fontului: 18px; )

Folosind această intrare, setăm toate elementele cu text să aibă o înălțime a fontului de 18 pixeli.

Să aruncăm o privire mai atentă. Înainte de versiunea 2 a CSS, nu exista un selector universal. Se potrivește cu toate elementele, astfel încât stilurile pe care le specifică le vor fi aplicate simultan. Ar trebui să fiți extrem de atenți când utilizați acest selector. Atenția este cauzată de posibila apariție a dificultăților la moștenirea stilurilor sau, mai degrabă, de comportamentul lor imprevizibil.

De asemenea, merită remarcat faptul că utilizarea unei clase, a unui identificator, a unui atribut vă permite să săriți peste selectorul universal fără niciun rău. De exemplu:

*. stânga (chenar: 1px solid #000; ). stânga (chenar: 1px solid #000; )

Aceste înregistrări poartă aceeași încărcare semantică, iar stilul va fi aplicat în același mod atât cu cât și fără utilizarea unui selector universal.

Unde poate fi folosit?

Practic, selectorul universal se găsește în practică la resetarea stilurilor implicite de browser. De exemplu, indentări, dimensiuni de font și așa mai departe.

Cu toate acestea, deși această metodă este simplă și, de asemenea, va reduce semnificativ lungimea codului, are o serie de dezavantaje.

Dezavantajele selectorului universal la resetarea stilurilor standard:

• unele dintre stiluri nu pot fi resetate
• pentru selectarea atributului nu poate reseta umplutura
• poate „ucide” aspectul standard al butonului în majoritatea browserelor
• Browserul Mozila funcționează cu erori minore
• încetinește semnificativ încărcarea paginii pentru Mozila (cu toate acestea, acest lucru se aplică numai site-urilor cu CSS care au mai mult de o mie de linii, altfel întârzierea este inobservabilă.)

Din motivele descrise mai sus, se recomandă să resetați stilurile pe element folosind un selector de tip. Un exemplu de cod similar pentru resetarea stilurilor este dat la sfârșit

Uneori trebuie să setați un stil pentru toate elementele unei pagini web în același timp, de exemplu, să setați un font sau un stil de text. În acest caz, un selector universal care se potrivește cu orice element al paginii web va ajuta.

În CSS3, selectorul universal este folosit și în combinație cu un spațiu de nume.

• ns|* - toate elementele din spațiul de nume ns.
• *|* - toate elementele din toate spațiile de nume.
• |* - toate elementele fără un spațiu de nume explicit.

Sintaxă

* (Descrierea regulilor de stil)

Simbolul asterisc (*) este folosit pentru a indica un selector universal. În unele cazuri, nu este necesar să specificați un selector universal. Deci, de exemplu, intrările *.class și .class sunt identice în rezultatele lor.

Denumiri

Exemplu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Nota

Browser Internet Explorer până la a șasea versiune inclusiv, înțelege construcția * html, ceea ce este ilogic, deoarece eticheta este o etichetă de nivel superior și nu poate exista niciun element deasupra acesteia. Această eroare este uneori folosită pentru a modela IE6, de exemplu construcția * html body ( ... ) va adăuga stil selectorului de corp din IE6 și mai jos și nu funcționează în alte browsere.

ÎN browser de internetÎn Explorer 7, când adăugați un selector universal înaintea numelui selectorului fără spații, acesta este tratat ca un selector de context. Astfel, intrarea *body funcționează numai în IE7 și este ignorată de alte browsere.

Caietul de sarcini

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

• Sarcina efectuată este de a selecta toate elementele. De fapt, toată lumea.
• Desemnarea este simbolul asterisc - *.
• Exemplu de utilizare:

Resetați umplutura la implicit pentru toate elementele

Aflați mai multe despre selectorul universal

Introdus în CSS versiunea 2. Se potrivește cu orice element din . Prin urmare, stilurile specificate pentru selectorul universal sunt aplicate tuturor elementelor simultan. Din acest motiv, te sfătuiesc să-l folosești cu mare atenție – moștenirea stilurilor poate cauza probleme. Sau, mai degrabă, un comportament greu previzibil (pentru un programator fără experiență). Vom lua în considerare acest punct mai detaliat în secțiunea despre moștenire.

Un alt lucru despre un selector universal este că atunci când este utilizat în combinație cu un alt selector (cum ar fi o clasă, un identificator sau un selector de atribute) ca parte a unui selector simplu, acesta poate fi omis cu impunitate. Este aproximativ același lucru cu a spune în loc de „Toți dromedarii sunt cămile dromedare” pur și simplu „dromedarii sunt cămile dromedare”. Sensul nu s-a schimbat.

Exemplu:

*.error (culoare: roșu; ) .error (culoare: roșu; ) /* aceste două reguli sunt echivalente. Selectorul universal lipsește în al doilea caz */

Domeniul de aplicare

De fapt, cel mai convenabil este să folosiți un selector universal, ca în primul exemplu, pentru a reseta valorile inițiale ale stilurilor dependente de browser (în special, indentări).

Dar nici o astfel de aplicație nu va fi întotdeauna o idee bună. Datorită dezavantajelor selectorului universal descrise în articol, este mai bine să utilizați . Adică folosiți selectoare de tip.

Așa am abordat fără probleme următorul subiect. Se pare că am rezolvat selectorul universal. E timpul să treci mai departe. Următoarea oprire - .