Syntaxe CSS
La syntaxe CSS se compose de 3 parties : un sélecteur, une propriété et une valeur
Code de la syntaxe CSS
selector {
property: value;
}Le sélecteur est un élément HTML que vous souhaitez styliser. Il peut s'agir de n'importe quelle balise comme <h1>, <p>, etc. Chaque sélecteur peut avoir une ou plusieurs propriétés.
La propriété est l'attribut de style d'une balise HTML. Les propriétés CSS sont similaires aux attributs HTML mais sont utilisées spécifiquement pour le style (couleur, bordure, etc.). Chaque propriété possède sa valeur.
La valeur est assignée à la propriété. Par exemple, la valeur de la propriété color peut être soit red, soit #F1F1F1.
Exemple de syntaxe CSS :
Exemple de syntaxe 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>Résultat
Dans l'exemple ci-dessus, la balise <a> est le sélecteur, color est la propriété, et #1c87c9 est la valeur de la propriété.
Comme vous pouvez le voir, la propriété et sa valeur sont écrites entre accolades et séparées par un deux-points. Remarque : CSS ignore les espaces supplémentaires entre les sélecteurs, les propriétés et les valeurs.
Un sélecteur peut également avoir plusieurs propriétés, séparées par des points-virgules.
Commentaires CSS
Vous pouvez utiliser des commentaires CSS pour ajouter des explications au code. Ils ne sont pas affichés car les navigateurs les ignorent.
Le début et la fin d'un commentaire CSS sont spécifiés par /* et */, respectivement :
Exemple de commentaires CSS
/*This is some comment*/Comme vous pouvez le voir, le texte entre /* et */ n'est pas affiché dans les navigateurs. Utilisez ces délimiteurs pour masquer des informations de la page rendue.
Exemple de commentaires CSS :
Exemples de commentaires 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>Pratique
Laquelle des options suivantes décrit la syntaxe CSS correcte ?