[CSS] Stili interni
Gli stili interni controllano l’aspetto di una singola pagina.
Esistono tre tipi di fogli di stile CSS: esterni, interni, in linea.
Gli stili interni, noti anche come “stili incorporati” o “stili interni alla pagina”, si riferiscono alla definizione degli stili direttamente all’interno del documento HTML. Questo viene fatto utilizzando il tag <style> nel tag <head> del documento HTML.
Ecco un esempio di come utilizzare gli stili interni:
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito</title>
<style>
/* Regola di stile per il testo principale */
p {
font-size: 16px;
color: #333;
line-height: 1.5;
}
/* Regola di stile per i link */
a {
color: #007bff;
text-decoration: none;
}
/* Regola di stile per gli elenchi */
ul {
list-style-type: square;
}
</style>
</head>
<body>
<h1>Benvenuti nel mio sito</h1>
<p>Questo è un esempio di utilizzo degli stili interni in CSS.</p>
<p>È possibile definire gli stili direttamente all'interno del tag <style> nel tag <head> del documento HTML.</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<p>Puoi anche creare regole di stile personalizzate per i tuoi elementi specifici.</p>
<a href="https://www.example.com">Visita il nostro sito web</a>
</body>
</html>In questo esempio, gli stili sono definiti tra i tag <style> nel <head> del documento HTML. Questi stili saranno applicati agli elementi corrispondenti all’interno del documento HTML. Le regole di stile sono simili a quelle utilizzate negli stili esterni.
Gli stili incorporati sono utili quando si desidera applicare stili specifici solo a una particolare pagina HTML, mantenendo gli stili separati dagli altri documenti o pagine web. Tuttavia, se si desidera riutilizzare gli stili su più pagine, è spesso preferibile utilizzare stili esterni per promuovere la coerenza e la facilità di manutenzione.
Un altro esempio di stile incorporato
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito</title>
<style>
/* Regola di stile per il testo principale */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
/* Regola di stile per l'intestazione */
h1 {
color: #333;
text-align: center;
padding: 20px;
background-color: #eee;
}
/* Regola di stile per i paragrafi */
p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
}
/* Regola di stile per i link */
a {
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Benvenuti nel mio sito</h1>
<p>Questo è un esempio di utilizzo degli stili interni in CSS.</p>
<p>Con gli stili interni, è possibile definire le proprietà di stile direttamente all'interno del documento HTML.</p>
<p>Puoi applicare stili a diversi elementi, come paragrafi, intestazioni, link e altro ancora.</p>
<p>Usando gli stili interni, puoi personalizzare l'aspetto del tuo sito in modo specifico e coerente.</p>
<a href="https://www.example.com">Visita il nostro sito web</a>
</body>
</html>In questo esempio, abbiamo definito alcuni stili interni per il documento HTML. Abbiamo applicato uno sfondo di colore al corpo (body), abbiamo stilizzato l’intestazione (h1) con un colore di testo, un allineamento centrato e un’area di riempimento, abbiamo definito lo stile dei paragrafi (p) con una dimensione del carattere, un interlinea e un margine inferiore, e infine abbiamo definito lo stile dei link (a) con un colore e la rimozione del sottolineato.
Gli stili incorporati possono essere utili quando si desidera applicare stili specifici a un singolo documento HTML senza dover creare un file CSS separato. Consentono di mantenere gli stili vicino al contenuto e possono semplificare la gestione delle regole di stile all’interno della pagina stessa.
