Web design: CSS - Structura regulilor - Priorități

Există câteva reguli CSS pentru regulile noastre. Există o ierarhie a modului în care sunt aplicate pentru a oferi o aparență de ordine și pentru a evita conflictele. În primul rând, trebuie să luăm în considerare unde se află regula. În general, cu cât fișierul CSS este „mai aproape” de linia de cod care îl folosește, cu atât este mai probabil ca acel fișier CSS să înlocuiască ceea ce se află în celelalte. De exemplu, regulile dintr-o foaie de stil externă ar fi înlocuite de cele dintr-o foaie de stil internă. La fel, stilurile dintr-o foaie de stil internă ar înlocui foaia de stil anterioară inclusă. Stilurile care sunt adăugate în pagină sau atributele care sunt în conformitate cu elementul căruia i se aplică, devin cel mai „apropiate” de ceea ce vizează.

Caracteristică utilă: Codul JavaScript care afectează aspectul va aplica frecvent modificări inline pentru a aplica modificări de stil unei pagini, dar nu va afecta fișierul CSS sau alte pagini.

Când discutăm despre natura priotității, este important să ne amintim că la acest lucru se aplică regulii specifice. Un set de reguli pentru o etichetă <a> definită într-o foaie externă nu va fi neapărat înlocuit de regulile etichetei <a> dintr-o foaie de stil internă. Fiecare regulă din definiție este examinată și se aplică în continuare dacă regulile respective nu sunt „mai apropiate” de element. De exemplu:

O foaie externă:

a {
color:blue;
text-decoration:none;
}

O foaie internă:

a { color:red;}

Codul nostru:

<head>
<link rel=”style sheet” type=”text/css” href=”mystyle.css”>
</head>
<style>
a { color:red;}
</style>

Comparând exemplele de foi de stil de mai sus, putem vedea că foaia externă aplică două reguli: culoarea textului este albastră și nu ar trebui să fie subliniată. Cu toate acestea, foaia noastră de stil internă specifică o regulă conform căreia culoarea ar trebui să fie roșie. Deoarece această regulă este mai apropiată, linkul nostru va fi roșu. Cu toate acestea, regula de subliniere nu este definită în foaia internă, așa că va fi preluată și va rămâne.

Acest lucru este inclus și în regulile CSS în sine. Definițiile pot fi generale, cum ar fi exemplul nostru de mai sus, care s-ar aplica tuturor linkurilor de pe pagina noastră, sau pot fi mai specifice pentru a viza un anumit grup sau un singur link. Cu cât suntem mai specifici, cu atât va avea o influență mai mare regula noastră. De exemplu:

Mai sus, stilul nostru „a” pentru link-urile noastre este suprascris în div-ul nostru, deoarece stilul de bloc este mai particular, sau mai apropiat, de legătura reală pe care vrem să-l afecteze. Cu toate acestea, linkul nostru verde anulează stilul nostru de bloc, deoarece este inline și se aplică linkului respectiv. De aici, numai o modificare a acest stil inline cauzată de JavaScript sau o „suprascriere” dintr-o regulă marcată cu !important poate depăși regula inline. Cea mai ușoară modalitate de a depana problemele CSS este cu instrumente pentru dezvoltatori web care sunt un supliment sau incluse în browserele moderne, cum ar fi Chrome, care vă pot arăta exact ce reguli sunt aplicate, înlocuite și chiar vă pot permite să testați modificări (temporare) înainte de a le le face în dosarul real.

Avertisment: Stilurile impuse de utilizator (setări pe care clientul le introduce în browser sau aplicate de un program de accesibilitate) se potrivesc, de asemenea, în lista noastră de priorități și pot suprascrie orice stiluri pe care le setăm.

Figura 24 Modelul casetei CSS. Precedența stilului <p> concurent în cascada CSS. Aceste valori listate la fiecare nivel sunt obținute filtrând mai întâi prin specificitate. Credit: Matthias Apsel/Wikimedia Commons, licența CC0

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu