Stili HTML - CSS
In questa pagina scopri come aggiungere CSS agli elementi HTML in 3 modi, come stilizzarli con diverse proprietà CSS e visualizzare esempi pratici.
CSS viene utilizzato per stilizzare HTML. Determina come gli elementi HTML appaiono sullo schermo, sulla carta o in altri media.
CSS fa risparmiare molto lavoro. Può controllare il layout di molte pagine contemporaneamente.
Puoi aggiungere CSS agli elementi HTML in 3 modi:
- Inline — l'attributo
styleviene aggiunto direttamente a un elemento HTML. - Interno — un elemento
<style>viene inserito nella sezione<head>della pagina. - Esterno — un file
.cssseparato viene collegato alla pagina.
Perché tre metodi? Ognuno bilancia comodità e portata. Gli stili inline sono rapidi ma si applicano solo a un singolo elemento. Gli stili interni coprono una sola pagina. I fogli di stile esterni sono l'approccio consigliato per i progetti reali, perché un unico file può stilizzare un intero sito web e viene memorizzato nella cache dal browser.
Priorità della cascata
Quando più di una regola si applica allo stesso elemento, CSS risolve il conflitto in base a specificità e ordine di dichiarazione. Come regola generale, più uno stile è dichiarato vicino all'elemento, più alta è la sua priorità:
style inline > <style> interno > foglio di stile esterno
Quindi se un foglio esterno dice che un paragrafo è blu e un attributo style inline dice che è rosso, il paragrafo sarà rosso. (Il flag !important può modificare questo ordine, ma usarlo con parsimonia.) Scopri di più nell'introduzione a CSS.
Vediamo ciascun metodo nel dettaglio.
CSS Inline
Un CSS inline applica uno stile specifico a un singolo elemento HTML. A questo scopo viene utilizzato l'attributo style dell'elemento HTML.
Nell'esempio seguente il colore del testo dell'elemento <p> è rosso:
Esempio di CSS inline:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Usage of the inline CSS</h1>
<p style="color:red;">The paragraph is red.</p>
</body>
</html>CSS Interno
Un CSS interno specifica uno stile per una singola pagina HTML. Viene definito nell'elemento <head> della pagina HTML, all'interno di un tag <style>:
Esempio di CSS interno:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Esterno
Un foglio di stile esterno specifica lo stile per più pagine HTML. Può cambiare l'aspetto dell'intero sito web modificando un solo file.
Per utilizzare un foglio di stile esterno, aggiungi un <link> ad esso all'interno dell'elemento <head> della pagina HTML. L'attributo href punta al percorso del file .css:
Esempio di foglio di stile CSS esterno:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Il file styles.css collegato contiene le regole. Non può contenere codice HTML e deve essere salvato con estensione .css. Per la pagina sopra, styles.css potrebbe apparire così:
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}Font e Colori CSS
La proprietà CSS font-family definisce il carattere tipografico del contenuto testuale.
La proprietà CSS font-size definisce la dimensione del testo.
La proprietà CSS color imposta il colore del testo stesso. (Da notare che color non è una proprietà del font — controlla il colore del testo in primo piano.)
La proprietà CSS background-color imposta il colore dietro l'elemento.
Esempio di font e colori CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #008000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 200%;
}
p {
color: #666666;
font-family: 'New Roman', serif;
font-size: 150%;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Bordo CSS
La proprietà CSS border imposta i valori per tutti e quattro i lati di un elemento.
Esempio della proprietà CSS border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dotted red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Padding CSS
La proprietà CSS padding specifica il padding (spazio) tra il testo e il bordo.
Esempio della proprietà CSS padding:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #008022;
padding: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Margin CSS
La proprietà CSS margin crea spazio attorno all'elemento.
Esempio della proprietà CSS margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #090fce;
margin: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>L'attributo id
L'attributo id individua un singolo elemento univoco. Un valore id deve essere univoco all'interno della pagina — nessun elemento può condividere lo stesso id. In CSS lo si seleziona con il cancelletto, ad esempio #large-text.
Esempio dell'attributo id:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#large-text {
border: 8px groove powderblue;
font-size: 24px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p id="large-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>L'attributo class
L'attributo class è riutilizzabile: la stessa classe può essere applicata a qualsiasi numero di elementi e un singolo elemento può avere più classi. Questo rende le classi lo strumento ideale per stilizzare un gruppo di elementi allo stesso modo. In CSS si seleziona una classe con il punto, ad esempio .text.
Esempio dell'attributo class:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
border: 8px inset powderblue;
font-size: 20px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>