2.1 Fogli di stile esterni
Collegare CSS (Cascading Style Sheets) a un documento HTML ti permette di stilizzare le pagine web, migliorandone l'aspetto e la facilità d'uso. Ci sono diversi modi per collegare CSS a HTML, ognuno con i suoi vantaggi e adatto per situazioni diverse.
Metodi per collegare CSS:
- Fogli di stile esterni (External Stylesheets)
- Fogli di stile interni (Internal Stylesheets)
- Stili inline (Inline Styles)
Fogli di stile esterni (External Stylesheets)
I fogli di stile esterni sono file CSS separati che vengono collegati al documento HTML tramite il tag <link>.
Questo metodo permette di separare gli stili dalla struttura del documento, semplificando la gestione degli stili e il riutilizzo dei file CSS su più pagine.
Vantaggi:
- Facilità di gestione degli stili
- Riutilizzo degli stili su più pagine
- Miglioramento della cache e delle prestazioni
Sintassi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di foglio di stile esterno</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Titolo</h1>
<p>Testo</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di foglio di stile esterno</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titolo</h1>
<p>Testo</p>
</body>
</html>
Esempio di file CSS(styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Fogli di stile interni (Internal Stylesheets)
I fogli di stile interni sono inseriti direttamente nel documento HTML nella sezione <head> tramite il tag <style>.
Questo metodo è utile quando si desidera applicare stili solo a una pagina o quando un file esterno non è disponibile.
Vantaggi:
- Facilità d'uso per una singola pagina
- Nessuna necessità di un file aggiuntivo
Sintassi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di foglio di stile interno</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Titolo</h1>
<p>Testo</p>
</body>
</html>
2.3 Stili inline (Inline Styles)
Gli stili inline sono applicati direttamente agli elementi HTML tramite l'attributo style. Questo metodo è utile per
test rapidi o quando si ha bisogno di modificare lo stile di un singolo elemento.
Vantaggi:
- Applicazione rapida e mirata degli stili
- Adatto per modifiche dinamiche tramite JavaScript
Svantaggi:
- Difficoltà nella gestione degli stili con un gran numero di elementi
- Difficoltà nel riutilizzo degli stili
Sintassi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di stili inline</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Titolo</h1>
<p style="color: #666; background-color: #f4f4f4;">Testo</p>
</body>
</html>
Esempio di utilizzo di tutti i metodi su una singola pagina:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di tutti i metodi di collegamento CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Titolo</h1>
<p style="color: #666;">Questo testo è stilizzato utilizzando stili inline.</p>
</body>
</html>
2.4 Priorità degli stili
Quando gli stili sono collegati in modi diversi, la priorità della loro applicabilità è determinata in questo modo:
- Stili inline (Inline Styles) hanno la massima priorità
- Fogli di stile interni (Internal Stylesheets) hanno il livello di priorità successivo
- Fogli di stile esterni (External Stylesheets) hanno la priorità più bassa
Se per lo stesso elemento vengono applicati più stili con la stessa priorità, la specificità del selettore e l'ordine di dichiarazione determinano la priorità.
Esempio di priorità degli stili:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Esempio di priorità degli stili</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Stile interno */
}
</style>
</head>
<body>
<p style="color: red;">Questo testo sarà rosso a causa della priorità dello stile inline.</p>
</body>
</html>
GO TO FULL VERSION