Există câteva reguli la regulile noastre. Există o ierarhie a modului în care acestea sunt aplicate pentru a oferi un aspect 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 este „mai aproape” fișierul CSS de linia de cod care îl folosește, cu atât este mai probabil ca fișierul CSS să înlocuiască ceea ce este în celelalte. De exemplu, regulile dintr -o foaie de stil extern ar fi anulate 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 la pagină sau atributele care sunt în linie cu elementul la care se aplică, devin „cel mai apropiate” de ceea ce vizează.
Caracteristică utilă: Codul JavaScript care afectează aspectul va aplica frecvent modificări în linie pentru a aplica modificări de stil pe o pagină, dar nu va afecta fișierul CSS sau alte pagini.
Când discutăm despre natura imperativă, este important să ne amintim că acest lucru se aplică regulii specifice. Un set de reguli pentru o etichetă <a> definită într -o foaie externă nu va fi neapărat anulată de regulile de etichetă <a> într -o foaie de stil intern. Fiecare regulă din definiție este examinată și este încă aplicată dacă acele reguli particulare nu apar „mai aproape” 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 foile de stil de mai sus, putem vedea că foaia externă aplică două reguli: culoarea textului este albastră și nu ar trebui să existe un text 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 aproape, legătura noastră va fi roșie. Regula de subliniere, însă, nu este definită în foaia internă, deci va trece și va rămâne.
Acest lucru intră, de asemenea, în regulile CSS. Definițiile pot fi generale, la fel ca 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:
<style>
a{
color:red;
}
div.block a{
color: blue;
}
</style>
<body>
<a href="">Our RED link</a>
<div class="block">
<a href="">Our BLUE link</a><br/>
<a href="" style="color:green">Our
GREEN link</a>
</div>
Mai sus, stilul nostru „a” pentru legăturile noastre este anulat în div, deoarece stilul bloc este mai particular sau mai aproape de legătura reală pe care o dorim afectată. Cu toate acestea, legătura noastră verde ne depășește stilul bloc, așa cum este în linie și se aplică la acea legătură specifică. De aici, doar o schimbare în acest stil inline cauzată de JavaScript sau o „supra-supraveghere” dintr-o regulă marcată !important poate învinge regula inline. Cel mai simplu mod de a depana problemele CSS este cu instrumentele 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, anulate și chiar vă permite să testați schimbările (temporare) înainte de a le adăuga în fișierul tău real.
Atenție: Stiluri forțate de utilizator (setările pe care clientul leintroduce în browserul lui sau sunt aplicate printr-un program de accesibilitate) se încadrează și pe lista noastră de prioritate și poate înlocui orice stiluri pe care le-am stabilit.
(Precedența stilurilor concurente <p> în cascada CSS. Valorile de stil enumerate la fiecare nivel sunt obținute prin prima filtrare pentru specificitate. Credit: Armchair/Wikimedia)
Referințe
- O listă cu toate proprietățile CSS: http://www.blooberry.com/indexdot/css/propindex/all.htm
- Toate selectoarele: http://www.w3.org/tr/css2/selector.html
- Câteva sfaturi, trucuri și mai multe caracteristici: http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/
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
Ghid WordPress pentru dezvoltatori
WordPress este o platformă pentru site-uri web rapidă, fiabilă, cu facilități multiple pentru dezvoltatori și ușor de utilizat. Totusi, dezvoltatorii și beneficiarii au de multe ori nevoie să adauge funcționalități suplimentare pentru a răspunde nevoilor lor. Acest ghid oferă unele … Citeşte mai mult
Ghid WordPress pentru începători
WordPress combină simplitatea pentru utilizatorii şi editori cu complexitate suportului software pentru dezvoltatori. Acest lucru îl face mai flexibil, fiind în acelaşi timp uşor de utilizat. Simplitatea sa face posibilă instalarea şi publicarea online rapid. Nimic nu ar trebui să … Citeşte mai mult
Proiectarea, dezvoltarea şi întreţinerea siturilor web
Un ghid pentru dezvoltatorii web, cu accent pe HTML, XML, JavaScript, SQL, tehnologii web, software web, software pentru dezvoltare web, aplicaţii web, şabloane pentru aplicaţii web, AJAX, servicii web, sindicalizarea web, web design, situri web, găzduirea web, analiza siturilor web, … Citeşte mai mult
Lasă un răspuns