Primul este selectorul de tag-uri globale
Selectorii de etichete sunt concepute pentru a oferi stiluri tuturor elementelor de același tip. De exemplu, liste. Pentru a elimina marcatorii din toate listele de pe paginile web ale site-ului, este suficient ca în css să scrieți acest lucru:
Excelent. În consecință, selectorul este la celule de tabele, imagini, blocuri, câmpuri de forme și, în general, toate elementele. Acest lucru este de înțeles. Dar acolo și atunci există o problemă: cu greu toate listele de pe un site pe care îl stilizați în mod egal. Nu, bine, aici situația poate fi complet diferită. Să examinăm mai atent exemplul paragrafelor, pentru că va fi mai aproape de realitate.
Deci, toate paragrafele de pe pagină sunt date unor stiluri. Acesta va fi un design general.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Ei bine, nu ne vom strădui prea mult, doar setăm culoarea și mărimea fontului. Bine, e doar un design pentru toate paragrafele. Dar acum să spunem că aveți o problemă: anumite paragrafe trebuie evidențiate în roșu. Cum se face acest lucru?
Destul de simplu. Să descriem în css o nouă clasă de stil. Să spunem că o numim roșie, deci este clar.
Acum rămâne să-l punem la paragrafele necesare. Să presupun că trebuie să o fac pentru a doua și a treia. Sper că puteți scrie clasele de stil, se face astfel:
Ei bine, vom continua și cu un alt paragraf. Ca rezultat, am redefinit deja stilul. Adică culoarea textului tuturor paragrafelor era gri închis și am schimbat culoarea unor paragrafe în roșu. Aici aveți o redefinire a stilurilor.
Dar sarcina clasei de stil este utilă atunci când trebuie să suprascrieți regulile pentru un grup de elemente. Adică, mai multe paragrafe, imagini etc. Dar dacă nu trebuie decât să redefiniți stilurile într-un singur element? În acest scop, este mai bine să utilizați identificatorul.
Identificatorul (id) este utilizat pentru a atribui o etichetă unică unui element specific pe pagina web. Astfel, acesta poate fi accesat în css prin intermediul acestui identificator și poate stabili anumite reguli. Acestea vor fi aplicate, chiar dacă stilurile anterior au fost absolut diferite pentru acest element.
De exemplu, avem 2 paragrafe, în care textul este colorat în roșu. Dar dacă unul dintre ei stabilește un identificator și apoi descrie în stilurile css pentru acest selector, atunci acestea vor fi prioritizate decât regulile clasei.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Actualizați pagina și asigurați-vă că culoarea textului este albastră. Dar, pentru punctul nostru de vedere, culoarea textului este dată în trei locuri. În primul rând, selectorul de etichete este gri închis. În al doilea rând, în sala de clasă - roșu. În al treilea rând, în identificator.
Care este concluzia din acest experiment? Iar faptul că identificatorul de clasă prioritate tag-ul de clasă și selectorul de prioritate. Un alt fapt important pe care trebuie să înțeleagă pentru ei înșiși: clase de stil sunt utilizate în mod obișnuit pentru stilul unui grup de elemente (de exemplu, elementul de meniu, un grup de paragrafe, o serie de imagini) ca elemente de identificare - pentru stilul de elemente unice, care sunt unice pentru site-ul (capac, subsol, unele pictograma, sigla, etc.).
Suprascrieți cu stiluri încorporate
Orice element html poate încorpora stiluri direct în etichetă, înregistrându-le folosind atributul de stil. Dacă facem acest lucru:
Paragraful nostru are deja o mulțime de proprietăți care definesc designul. Dar textul său va deveni verde, așa cum este descris în atributul de stil. De ce? Deoarece stilurile interne au cea mai mare prioritate.
Noi rupem toate regulile cu ajutorul! Important!
Am ajuns la recepția CSS, care încalcă toate regulile de prioritate și le trimite la gunoi. Acest lucru este important, ceea ce marchează proprietatea ca cea mai importantă. Să examinăm același exemplu. Avem un paragraf, codul său este dat mai sus. După cum puteți vedea, are 4 opțiuni de culoare diferite pentru aceasta.
În particular, selectorul de taguri are o culoare gri închis, dar este întrerupt de stilurile de clasă, ID și interne, care, în cazul nostru, întrerup totul. Dar există o cale ușoară de a ucide toate acestea. Noi scriem astfel:
Adică aceleași stiluri pentru selectorul tuturor paragrafelor, numai când se determină culoarea după ce este scrisă valoarea! Important. Această comandă marchează stilul ca fiind important. Aceasta este una care trebuie să se aplice neapărat. Să verificăm:
Toate paragrafele de aceeași culoare sunt gri închis. Notă. Că nici clasa, nici identificatorul, nici chiar stilurile încorporate, care în teorie sunt folosite ultima și trebuie să întrerupă totul, nu pot redefini culoarea și rămân aceleași cu cele stabilite în selectorul de etichete.
Acestea sunt plăcinte. Cu toate acestea, vă sfătuiesc să nu recurgă prea des la! Important. Și dacă nu există nevoie urgentă, atunci nu recurgeți. Firește, dacă scrieți pentru clasa importantă, atunci acest stil va fi cel mai important. Și în concurs: selectorul etichetei importante și clasa importantă, clasa va câștiga. Și deja înțelegeți de ce. Ei bine, și așa mai departe. Se pare că puteți adăuga și stilul încorporat! Important. Acum, aceasta va fi o ultimă depășire, care nu poate fi întreruptă.
Din nou, nu vă sfătuiesc să jucați prea mult cu importante, este considerată o formă proastă de aspect.
Bine. Odată cu redefinirea, ne-am dat seama. Desigur, nu am luat în considerare toate căile de redefinire. Unii dintre voi vă puteți ghici. De exemplu, utilizarea selectorilor imbricați. În principiu, puteți ghici cu ușurință că paragrafele din coloana laterală sunt ușor separate de paragrafele din partea principală a site-ului.
Rețineți că nu am specificat clase și identificatori aici. Nivelul selectorilor de cuiburi poate fi orice. Puteți scrie totuși:
Totul depinde de complexitatea marcajului. În plus față de selectorii combinați, există o mulțime de alții care ajută într-un fel sau altul redefinirea designului. Le puteți învăța dacă studiați mai serios CSS. De exemplu, vă sugerez să trecem cursul nostru CSS3. în care tocmai vă puteți familiariza cu o grămadă de noi selectori interesanți.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Trimiteți-le prietenilor: