11.1 Cascading
I principi fondamentali del CSS includono cascading, inheritance, e specificità. Capire questi principi aiuta a controllare meglio lo stile e l'aspetto delle pagine web.
Cascading
Cascading è il principio base del CSS che determina come applicare gli stili quando diversi regole sono in conflitto. In caso di conflitto, il browser utilizza le seguenti regole per risolverli:
-
Ordine delle fonti: gli stili possono essere definiti in diversi luoghi - fogli di stile esterni (file CSS),
fogli di stile interni (all'interno del tag
<style>) e stili inline (nell'attributostyledi un elemento HTML). Le regole vengono applicate nell'ordine in cui appaiono. - Specificità: ogni selettore ha un proprio livello di specificità. Più alta è la specificità del selettore, più alto è il suo priorità.
-
Importanza: le regole con la direttiva
!importanthanno la massima priorità e vengono applicate anche in presenza di altre regole conflittuali.
Esempio di cascading:
In questo esempio, il colore di sfondo sarà giallo, poiché lo stile inline ha priorità su quello interno. Il colore del testo sarà rosso, poiché lo stile inline ha priorità su quello interno.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di cascading CSS</title>
<style>
body {
background-color: lightblue; /* Stile interno */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Stile inline -->
<p style="color: red;">Esempio di cascading CSS</p>
</body>
</html>
11.2 Inheritance
Inheritance è il processo attraverso il quale gli elementi figli ereditano gli stili dei loro elementi genitori. Non tutte le proprietà CSS sono ereditabili. Le proprietà ereditabili includono il colore del testo, la famiglia dei font, l'interlinea e alcune altre.
Esempio di inheritance:
In questo esempio, l'elemento <p> eredita il font e il colore dall'elemento <body>,
e la dimensione del font dalla classe .container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di inheritance CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Questo testo eredita il font e il colore dal body, e la dimensione del font da ".container".</p>
</div>
</body>
</html>
11.3 Specificità
La specificità determina quale regola CSS sarà applicata a un elemento quando più regole corrispondono allo stesso elemento. La specificità viene calcolata in base al numero e ai tipi di selettori nella regola.
Regole di calcolo della specificità:
- Gli stili inline hanno la specificità più alta
- Gli identificatori (selettori per ID) hanno una specificità più alta rispetto a classi, pseudo-classi e attributi
- Classi, pseudo-classi e attributi hanno una specificità più alta rispetto ad elementi e pseudo-elementi
- Elementi e pseudo-elementi hanno la specificità più bassa
Esempio di calcolo della specificità:
In questo esempio, il testo sarà rosso, poiché il selettore #unique ha la specificità più alta.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di specificità CSS</title>
<style>
p {
color: blue; /* Specificità 0-0-0-1 */
}
.highlight {
color: green; /* Specificità 0-0-1-0 */
}
#unique {
color: red; /* Specificità 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Questo testo sarà rosso.</p>
</body>
</html>
11.4 Importanza
Il CSS permette agli sviluppatori di indicare esplicitamente la priorità degli stili tramite la direttiva !important. Le regole
con questa direttiva verranno applicate indipendentemente dalla specificità di altre regole.
Esempio di utilizzo di !important:
In questo esempio, il testo sarà blu, perché la regola con !important ha la massima priorità.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di !important in CSS</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Questo testo sarà blu a causa di "!important".</p>
</body>
</html>
11.5 Esempi di utilizzo dei principi CSS
Esempi di utilizzo dei principi CSS in compiti reali.
Esempio di cascading e specificità:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di cascading e specificità CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Questo testo sarà rosso, perché .important ha una specificità più alta rispetto a "p".</p>
</body>
</html>
Esempio di inheritance e specificità:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di inheritance e specificità CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Sovrascrive il colore del body per tutti gli elementi figli */
}
.highlight {
color: red; /* Ha una specificità più alta rispetto a .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Questo testo sarà rosso a causa della specificità della classe ".highlight".</p>
</div>
</body>
</html>
GO TO FULL VERSION