Foi de stil multiple
Dacă același selector este setat în mai multe foi de stil, valoarea din ultima foaie de stil citită de browser câștigă.
Să presupunem că o foaie de stil externă setează culoarea <h1> la navy, iar o foaie de stil internă setează aceeași culoare <h1> la orange. Rezultatul depinde de care dintre ele este citită ultima.
Intern după extern
Stilul intern este plasat după legătura către foaia de stil externă, deci elementele <h1> sunt orange.
<style> intern după aceasta.
În head, puneți întâi <link>-ul către mystyle.css, apoi un bloc <style> care setează h1 la orange. Deoarece stilul intern vine ultimul, titlul ar trebui să fie portocaliu. Includeți un <h1> în body.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The internal style is read last, so the heading is orange.</p>
</body>
</html>
Intern înainte de extern
Stilul intern este plasat înainte de legătura către foaia de stil externă, deci elementele <h1> sunt navy.
<style> intern, apoi face legătura cu o foaie de stil externă (mystyle.css) după aceasta.
În head, puneți întâi un bloc <style> care setează h1 la orange, apoi <link>-ul către mystyle.css (care setează h1 la navy). Deoarece stilul extern este citit ultimul, titlul ar trebui să fie navy. Includeți un <h1> în body.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The external style is read last, so the heading is navy.</p>
</body>
</html>
Stil extern
Stilul pentru <h1> în foaia externă.
h1 {
color: navy;
}
Stil intern
Stilul pentru <h1> în foaia internă.
h1 {
color: orange;
}
Ordinea cascadei
Când mai multe stiluri sunt setate pentru același element, care dintre ele este utilizat?
Toate stilurile de pe o pagină se combină într-o singură foaie de stil virtuală. Ordinea de prioritate, de la cea mai mare la cea mai mică, este:
- Stil inline (în interiorul unui element HTML).
- Foi de stil externe și interne (în secțiunea head).
- Setările implicite ale browserului.
Astfel, un stil inline are cea mai mare prioritate și suprascrie stilurile externe, stilurile interne și setările implicite ale browserului.
Stilul inline câștigă
Un stil intern setează titlul la navy, dar un stil inline îl setează la orange. Stilul inline câștigă.
<style> intern care face h1 navy. Apoi dați unui singur <h1> un stil inline care setează culoarea la orange. Stilul inline are prioritatea cea mai mare, deci titlul ar trebui să apară portocaliu.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: navy;
}
</style>
</head>
<body>
<h1 style="color:orange;">This is a heading</h1>
<p>The inline style overrides the internal style sheet, so the heading is orange.</p>
</body>
</html>