Embedded Files
Cascading Style Sheets, noti come CSS, sono una parte fondamentale dello sviluppo moderno delle pagine web. CSS è un linguaggio di stile utilizzato per controllare l'aspetto e la formattazione degli elementi all'interno di una pagina web scritta in HTML.
Mentre l'HTML è responsabile della struttura e della semantica di una pagina web, il CSS è ciò che definisce come tali elementi dovrebbero apparire. Con CSS è possibile definire attributi come colori, dimensioni del testo, margini, sfondi e molto altro ancora consentendo di personalizzare l'aspetto di una pagina in modo flessibile e coerente.
CSS opera su regole di stile, ognuna delle quali definisce come un elemento HTML di uno specifico tipo dovrebbe essere visualizzato. Queste regole includono selettori che identificano gli elementi HTML a cui si applicano e dichiarazioni che specificano gli stili desiderati.
Un buon controllo su CSS è essenziale per creare pagine web attraenti, di facile comprensione e professionali.
Questa pagina HTML fa uso di alcune semplici regole di stile CSS.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Pagina con CSS</title>
<style>
/* Regole di stile CSS per la formattazione degli elementi HTML nella pagina */
body {
font-family: Arial, sans-serif;
background-color: #ffe4b5;
}
h1 {
color: #FF0000;
text-align: center;
}
p {
font-size: 16px;
color: #800080;
line-height: 1.5;
margin: 20px;
}
</style>
</head>
<body>
<h1>Pagina dimostrativa con CSS</h1>
<p>
Questo è un paragrafo di testo.<br>Utilizzando il CSS, possiamo personalizzare il
colore del titolo, la famiglia di caratteri del testo, lo sfondo del corpo della
pagina e molto altro ancora.
</p>
</body>
</html>
Notare che in questo esempio sono definite tre regole di stile CSS, inserite nella sezione delimitata da <style> e </style>.
Esse fanno riferimento a:
body: definisce il colore di sfondo e la famiglia di font utilizzati da tutti gli elementi presenti nel BODY;
titolo h1: definisce il colore rosso e l'allineamento al centro per i titoli h1;
paragrafo: definisce la dimensione del font, il colore, l'altezza della riga e i margini.
Queste regole di stile CSS influenzano l'aspetto della pagina HTML, consentendo di personalizzare la tipografia, i colori e la spaziatura degli elementi. In questo modo il CSS migliora notevolmente l'aspetto visivo della pagina web.
Modalità di utilizzo
Gli stili CSS possono essere applicati ad un documento HTML in tre differenti modalità:
CSS Inline: In questo caso, le regole CSS vengono definite direttamente all'interno degli attributi style dei tag HTML.
CSS Interno o Embedded: In questo caso, le regole CSS sono definite all'interno della sezione STYLE delimitata dai tag <style> e </style> all'interno dell'intestazione (<head>) del documento HTML.
CSS Esterno: In questo caso, le regole CSS sono definite in un file CSS esterno e collegato alla pagina HTML utilizzando l'elemento <link> nell'intestazione del documento.
Colori del testo
In HTML è possibile specificare il colore del testo tramite l'attributo style del paragrafo o di titolo.
E' possibile specificare
il colore dello sfondo del testo (background);
il colore del carattere;
la dimensione e il colore di un eventuale contorno del background.
Il colore può essere specificato con un nome standardizzato o con un codice esadecimale preceduto da #.
La seguente tabella matte in relazione alcuni colori con il nome standardizzato e il codice esadecimale. Un elenco più esteso di colori può essere trovato a questo link.
Per completezza occorre precisare che sono possibili anche altre codifiche dei colori che però in queste pagine non sono considerate.
Pagina di esempio:
Applichiamo in una pagina HTML l'attributo style per mostrarne l'uso.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Colori</title>
</head>
<body>
<h1 style="color:Red;">Titolo principale rosso</h1>
<p style="color:Green;">Paragrafo di colore verde</p>
<p style="color:#FF00FF;">Paragrafo di colore fucsia (tramite codice)</p>
<h1 style="background-color:Yellow; color:Red;">Titolo principale rosso con background giallo</h1>
<h1 style="background-color:Yellow; color:Red; border: 2px solid Purple;">Titolo principale rosso con background giallo in un riquadro porpora di 2 pixel</h1>
</body>
</html>
Sito: 7ecnologie
Sezione: 18. HTML & CSS
Capitolo: 05. CSS: introduzione
Indice dei capitoli: 00. Risorse - 01. Ambiente di sviluppo - 02. HTML: introduzione - 03. Struttura di un documento HTML - 04. Tag HTML - 05. CSS: introduzione - 06. Selettori CSS - 07. Regole CSS - 08. Regole CSS speciali - 09. Esempi - 10. Tutorial - 98. Esercizi
Page updated
Google Sites
Report abuse