Stili HTML - CSS
CSS sta per Cascading Style Sheets.
I CSS risparmiano molto lavoro. Può controllare il layout di più pagine Web contemporaneamente.
CSS = stili e colori
Cos'è il CSS?
Cascading Style Sheets (CSS) viene utilizzato per formattare il layout di una pagina Web.
Con CSS, puoi controllare il colore, il carattere, la dimensione del testo, la spaziatura tra gli elementi, il modo in cui gli elementi sono posizionati e disposti, quali immagini di sfondo o colori di sfondo devono essere utilizzati, diversi display per diversi dispositivi e dimensioni dello schermo e molto di piu!
Suggerimento: la parola cascata significa che uno stile applicato a un elemento padre si applicherà anche a tutti gli elementi figlio all'interno dell'elemento padre. Quindi, se imposti il colore del corpo del testo su "blu", anche tutti i titoli, i paragrafi e altri elementi di testo all'interno del corpo avranno lo stesso colore (a meno che tu non specifichi qualcos'altro)!
Utilizzo dei CSS
I CSS possono essere aggiunti ai documenti HTML in 3 modi:
- Inline - utilizzando l'
styleattributo all'interno degli elementi HTML - Interno - utilizzando un
<style>elemento nella<head>sezione - Esterno : utilizzando un
<link>elemento per collegarsi a un file CSS esterno
Il modo più comune per aggiungere CSS è mantenere gli stili in file CSS esterni. Tuttavia, in questo tutorial utilizzeremo gli stili inline e interni, perché è più facile da dimostrare e più facile per te provarlo tu stesso.
CSS in linea
Un CSS inline viene utilizzato per applicare uno stile unico a un singolo elemento HTML.
Un CSS inline utilizza l' styleattributo di un elemento HTML.
L'esempio seguente imposta il colore del testo <h1>dell'elemento su blu e il colore del testo <p>dell'elemento su rosso:
Esempio
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
CSS interno
Un CSS interno viene utilizzato per definire uno stile per una singola pagina HTML.
Un CSS interno è definito nella <head>sezione di una pagina HTML, all'interno di un <style>elemento.
L'esempio seguente imposta il colore del testo di TUTTI gli <h1>elementi (in quella pagina) su blu e il colore del testo di TUTTI gli <p>elementi su rosso. Inoltre, la pagina verrà visualizzata con un colore di sfondo "blu polvere":
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS esterno
Un foglio di stile esterno viene utilizzato per definire lo stile di molte pagine HTML.
Per utilizzare un foglio di stile esterno, aggiungi un collegamento ad esso nella <head>sezione di ciascuna pagina HTML:
Esempio
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Il foglio di stile esterno può essere scritto in qualsiasi editor di testo. Il file non deve contenere alcun codice HTML e deve essere salvato con estensione .css.
Ecco come appare il file "styles.css":
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Suggerimento: con un foglio di stile esterno, puoi cambiare l'aspetto di un intero sito web, cambiando un file!
Colori, caratteri e dimensioni CSS
Qui dimostreremo alcune proprietà CSS di uso comune. Imparerai di più su di loro in seguito.
La proprietà CSS colordefinisce il colore del testo da utilizzare.
La proprietà CSS font-familydefinisce il carattere da utilizzare.
La proprietà CSS font-sizedefinisce la dimensione del testo da utilizzare.
Esempio
Uso delle proprietà CSS di colore, famiglia di caratteri e dimensione del carattere:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Bordo CSS
La proprietà CSS borderdefinisce un bordo attorno a un elemento HTML.
Suggerimento: puoi definire un bordo per quasi tutti gli elementi HTML.
Esempio
Utilizzo della proprietà di confine CSS:
p {
border: 2px
solid powderblue;
}
Imbottitura CSS
La proprietà CSS paddingdefinisce un riempimento (spazio) tra il testo e il bordo.
Esempio
Uso delle proprietà CSS border e padding:
p {
border: 2px
solid powderblue;
padding: 30px;
}
Margine CSS
La proprietà CSS margindefinisce un margine (spazio) al di fuori del bordo.
Esempio
Uso delle proprietà di bordo e margine CSS:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Collegamento a CSS esterno
I fogli di stile esterni possono essere referenziati con un URL completo o con un percorso relativo alla pagina Web corrente.
Esempio
Questo esempio utilizza un URL completo per collegarsi a un foglio di stile:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Esempio
Questo esempio si collega a un foglio di stile che si trova nella cartella html sul sito Web corrente:
<link rel="stylesheet" href="/html/styles.css">
Esempio
Questo esempio si collega a un foglio di stile che si trova nella stessa cartella della pagina corrente:
<link rel="stylesheet" href="styles.css">
Puoi leggere di più sui percorsi dei file nel capitolo Percorsi dei file HTML .
Riassunto capitolo
- Usa l'
styleattributo HTML per lo stile in linea - Usa l'
<style>elemento HTML per definire i CSS interni - Utilizzare l'
<link>elemento HTML per fare riferimento a un file CSS esterno - Usa l'
<head>elemento HTML per memorizzare gli elementi <style> e <link> - Usa la
colorproprietà CSS per i colori del testo - Usa la proprietà CSS
font-familyper i caratteri di testo - Usa la
font-sizeproprietà CSS per le dimensioni del testo - Usa la proprietà CSS
borderper i bordi - Usa la
paddingproprietà CSS per lo spazio all'interno del bordo - Usa la proprietà CSS
marginper lo spazio al di fuori del bordo
Suggerimento: puoi imparare molto di più sui CSS nel nostro Tutorial CSS .
Esercizi HTML
Tag di stile HTML
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .