Înțelegeți prioritățile
Să enumerăm foile de stil în creșterea priorității
- Cea mai mică prioritate este foile de stil situate în interiorul browser-ului în sine, acestea joacă rolul de stiluri implicite
- un pic mai important sunt prioritatea foilor de stil create de utilizator în setările browserului (ceea ce este rar)
- stiluri de pagina web. și care este caracteristică, foile de stil de pagină web pot fi declarate în trei moduri. fiecare fel creează un tabel cu prioritate proprie. le aflăm în ordine crescătoare:
3.1. tabele conectate prin etichetă . sunt situate într-un fișier extern css și au cea mai mică prioritate printre alte tabele ale documentului web
3.2. tabele plasate în documentul html în sine, între etichete . au o prioritate mai mare decât tabelele de la punctul 3.1
3.3. foile de stil care sunt localizate în atributul style = "..." sunt mai importante decât tabelele 3.2
3.4. cea mai mare prioritate pentru stilurile cu o etichetă de la sfârșitul "importantului"
Importanța foii de stil în conformitate cu aceste puncte poate fi scrisă după cum urmează:
Exemplu, există trei stiluri pe pagina web
- Primul stil este localizat în fișierul principal.css cu conținutul
Stilul rezultat pentru p este de culoare: verde. deoarece are cea mai mare prioritate.
Cascada a fost construită în acest fel: stilul din main.css a înlocuit stilul pentru p, care este situat în browser ca "implicit", deoarece are prioritate; stilul suplimentar în "Învinge" stilul pentru p specificat main.css; încă avem un stil în atributul etichetei p. deoarece este mai mare în prioritate decât culoarea: stilul roșu specificat în . apoi îl înlocuiește, în cele din urmă stilul rezultat este de culoare: verde.
Și ce este specificitatea?
Cu prioritățile de stiluri din diferite tabele toate clare, dar putem întreba, ce se întâmplă dacă o etichetă HTML abordează mai multe stiluri dintr-un singur tabel? De exemplu, în antetul h1, fișierul principal.css va fi scris
Ce culoare este titlul h1. Răspuns: albastru
Se pare că stilurile dintr-o tabelă nu sunt întotdeauna egale în mod prioritar una față de cealaltă, importanța stilului definește un astfel de concept ca specificitate. Aceasta înseamnă că, cu cât selectorul este mai specific, cu cât este mai prioritară, în cazul nostru selectorul "articolul h1" este mai specific decât "h1".
Determinarea specificității priorității poate fi în conformitate cu următoarea regulă:
Specificitatea selectorului va fi exprimată în puncte, după cum urmează:
- selectorul pentru fiecare identificator primește - 100 de puncte (un exemplu de identificator "#id")
- selector pentru fiecare clasă sau pseudo-clasă - 10 puncte (exemplu de clasă și pseudo-clasă ".my", ": href")
- selectorul pentru fiecare etichetă este 1 punct (exemplu "h1")
În acest caz, primul selector «H1» este de 1 punct, și un al doilea selector «Articolul H1» este de 2 puncte, prin urmare, culoarea stilului: albastru importante chemcolor: roșu. astfel încât culoarea antetului rezultat va fi albastră.
Voi da un exemplu de particularități selector, în selectorii coloanei din stânga. în dreptul "scorurilor de specificitate"
După ce sa spus ...
Vreau să notez câteva puncte care ar trebui notate
- Întrebarea despre priorități, specificitatea stilurilor este valabilă numai atunci când două sau mai multe stiluri sunt aplicate unui singur element. și anume atunci când există un conflict de stiluri.
- Conflictul de stil va apărea numai atunci când stilurile indică direct un element. De exemplu, dacă desemnează pentru eticheta articolului că culoarea textului ar trebui să fie albastră. și apoi pentru elementul său copil h1 că culoarea textului ar trebui să fie verde. atunci rezultatul pentru h1 va fi verde. Nu există niciun conflict. Regula care direcționează stilul direct către elementul neconcurențial este moștenită de la elementul părinte, este întotdeauna mai importantă.
- Dacă două sau mai multe reguli conflictuale sunt aceleași în termeni de specificitate (scoruri identice), atunci se aplică cea care este scrisă ultima dată.
Veți fi interesat de:
- Optimizarea site-ului intern (SEO)
- Structura și sintaxa SQL (stoarcere)
- Compozitor de lucru (pornire rapidă)
- Bazele teoretice ale DB (Introducere în SQL)
Aș fi recunoscător dacă ați împărtăși acest post
Postări populare
Trimiteți-le prietenilor: