Sintassi CSS
Sintassi CSS - La sintassi CSS è composta da 3 parti: un selettore, una proprietà e un valore. Prova tu stesso gli esempi di sintassi CSS! Impara con W3docs!
La sintassi CSS è composta da 3 parti: un selettore, una proprietà e un valore
Codice della sintassi CSS
selector {
property: value;
}Il selettore è un elemento HTML a cui vuoi applicare uno stile. Può essere qualsiasi tag, come <h1>, <p>, ecc. Ogni selettore può avere una o più proprietà.
La proprietà è l'attributo di stile di un tag HTML. Le proprietà CSS sono simili agli attributi HTML, ma sono usate specificamente per lo stile (color, border, ecc.). Ogni proprietà ha il suo valore.
Il valore viene assegnato alla proprietà. Ad esempio, il valore della proprietà color può essere red oppure #F1F1F1.
Esempio di sintassi CSS:
Esempio di sintassi CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
</style>
</head>
<body>
<a>The color of this link is #1c87c9.</a>
</body>
</html>Risultato
Nell'esempio precedente, il tag <a> è il selettore, color è la proprietà e #1c87c9 è il valore della proprietà.
Come puoi vedere, la proprietà e il suo valore sono scritti tra le parentesi graffe e separati da due punti. Nota: i CSS ignorano gli spazi extra tra selettori, proprietà e valori.
Un selettore può anche avere più di una proprietà, separate da punti e virgola.
Commenti CSS
Puoi usare i commenti CSS per aggiungere spiegazioni al codice. Non vengono visualizzati perché i browser li ignorano.
L'inizio e la fine di un commento CSS sono indicati rispettivamente da /* e */:
Esempio di commenti in CSS
/*This is some comment*/Come puoi vedere, il testo all'interno di /* e */ non viene visualizzato nei browser. Usa questi delimitatori per nascondere informazioni dalla pagina renderizzata.
Esempio di commenti CSS:
Esempi di commenti CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
padding-left: 10px;
font-size: 26px;
line-height: 30px;
/*color:red;*/
}
p {
color: #1c87c9;
/*font-size:25px;
border:1px solid red;
*/
padding: 10px;
line-height: 30px;
}
</style>
</head>
<body>
<h1>CSS Comments</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>