CSS = Stili e Colori
Styling HTML con i CSS
CSS sta per Cascading Style Sheets
Styling può essere aggiunto a elementi HTML in 3 modi:
- Inline - utilizzando un attributo style in elementi HTML
- Interno - utilizzando un <style> elemento nel codice HTML <head> sezione
- Esterno - utilizzando uno o più file CSS esterni
Il modo più comune per aggiungere stile, è quello di mantenere gli stili in file CSS separati. Ma, in questo tutorial, utilizziamo lo stile interno, perché è più facile dimostrare, e più facile per voi di provare voi stessi.
Si può imparare molto di più su CSS nel nostro Tutorial CSS .
Inline Styling (Inline CSS)
Styling in linea viene utilizzato per applicare uno stile unico ad un singolo elemento HTML:
Styling in linea utilizza lo style attributo.
Questo esempio viene modificato il colore del testo del <h1> elemento al blu:
Styling interno (Internal CSS)
styling interno viene utilizzato per definire uno stile per una pagina HTML.
Styling interno è definito nel <head> sezione di una pagina HTML, all'interno di un <style> elemento:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Prova tu stesso " Styling esterno (External CSS)
Un foglio di stile esterno viene utilizzato per definire lo stile per molte pagine.
Con un foglio di stile esterno, è possibile modificare l'aspetto di un intero sito web, modificando un file!
Per utilizzare un foglio di stile esterno, aggiungere un link ad esso nella <head> sezione della 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> Prova tu stesso " Un foglio di stile esterno può essere scritto in qualsiasi editor di testo. Il file non deve contenere tag HTML. Il file di foglio di stile deve essere salvato con un .css estensione.
Ecco come il " styles.css " si presenta:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS Caratteri
Il CSS color proprietà definisce il colore del testo da utilizzare per l'elemento HTML.
Il CSS font-family proprietà definisce il tipo di carattere da utilizzare per l'elemento HTML.
Il CSS font-size proprietà definisce la dimensione del testo da utilizzare per l'elemento HTML.
Esempio
<!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> Prova tu stesso " Il modello CSS Box
Ogni elemento HTML ha un riquadro attorno ad esso, anche se non si può vedere.
Il CSS border proprietà definisce un bordo visibile attorno a un elemento HTML:
Il CSS padding proprietà definisce un'imbottitura (space) all'interno del bordo:
Il CSS margin proprietà definisce un margine (space) al di fuori del confine:
Gli esempi sopra usano CSS px per definire le dimensioni in pixel.
L' id attributo
Tutti gli esempi di cui sopra uso CSS per gli elementi HTML in modo generale.
Per definire uno stile speciale per un elemento speciale, in primo luogo aggiungere un attributo id all'elemento:
<p id="p01">I am different</p>poi definire uno stile per l'elemento con lo specifico id :
La class Attribute
Per definire uno stile per un particolare tipo ( class ) di elementi, aggiungere una class attributo all'elemento:
<p class="error">I am different</p>Ora è possibile definire uno stile diverso per gli elementi con la classe specifica:
Utilizzare id per affrontare un single elemento. Utilizzare class per affrontare groups di elementi.
Riassunto capitolo
- Utilizzare il codice HTML style attributo per lo styling in linea
- Utilizzare il codice HTML <style> elemento per definire CSS interno
- Utilizzare il codice HTML <link> elemento per fare riferimento a un file CSS esterno
- Utilizzare il codice HTML <head> elemento conservare <style> e <link> elementi
- Utilizzare la CSS color immobili per i colori del testo
- Utilizzare il CSS font-family proprietà per i caratteri di testo
- Utilizzare il CSS font-size proprietà per le dimensioni del testo
- Utilizzare la CSS border di proprietà per i bordi elemento visibile
- Utilizzare la CSS padding proprietà per lo spazio all'interno del bordo
- Utilizzare la CSS margin proprietà per lo spazio al di fuori del confine
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
HTML Style Tag
| Etichetta | Descrizione |
|---|---|
| <style> | Definisce le informazioni di stile per un documento HTML |
| <link> | Definisce un collegamento tra un documento e una risorsa esterna |