Syntaxe CSS
Une CSS règle-ensemble se compose d'un sélecteur et un bloc de déclaration:
Les points de sélection à l'élément HTML que vous voulez le style.
Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.
Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.
Une déclaration CSS se termine toujours par un point-virgule, et les blocs de déclaration sont entourés par des accolades.
Dans l'exemple suivant tous les <p> éléments seront aligné au centre, avec une couleur de texte en rouge:
CSS Selectors
Sélecteurs CSS sont utilisés pour "find" (ou sélectionnez) éléments HTML en fonction de leur nom d'élément, id, classe, attribut, et plus encore.
Le sélecteur d'élément
Le sélecteur d'élément sélectionne des éléments basés sur le nom de l'élément.
Vous pouvez sélectionner tous les <p> éléments sur une page comme celle (dans ce cas, tous les <p> éléments seront aligné au centre, avec une couleur de texte en rouge):
Le sélecteur de id
Le sélecteur de id utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique.
L'identifiant d'un élément doit être unique dans une page, de sorte que le sélecteur de id est utilisé pour sélectionner un élément unique!
Pour sélectionner un élément avec un id spécifique, écrire un dièse (#), suivi par l'identifiant de l'élément.
La règle de style ci - dessous sera appliqué à l'élément HTML avec id="para1" :
 | Remarque: Un nom identifiant ne peut pas commencer par un nombre! |
|---|
Le sélecteur de classe
Le sélecteur de classe sélectionne des éléments avec un attribut de classe spécifique.
Pour sélectionner des éléments avec une classe spécifique, écrire un period (.) Caractère, suivi du nom de la classe.
Dans l'exemple ci - dessous, tous les éléments HTML avec class="center" sera rouge et aligné au centre:
Vous pouvez également spécifier que seuls les éléments HTML spécifiques devraient être affectés par une classe.
Dans l'exemple ci - dessous, seulement <p> éléments avec class="center" sera aligné au centre:
Les éléments HTML peuvent également se référer à plus d'une classe.
Dans l'exemple ci - dessous, le <p> élément sera de style selon la class="center" et class="large" :
Exemple
<p class="center large">This paragraph refers to two classes.</p> Essayez - le vous - même » | Remarque: un nom de classe ne peut pas commencer par un nombre! |
|---|
Regroupement sélecteurs
Si vous avez des éléments avec les mêmes définitions de style, comme ceci:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Il sera préférable de regrouper les sélecteurs, pour réduire au minimum le code.
Pour les sélecteurs de groupe, séparer chaque sélecteur par une virgule.
Dans l'exemple ci-dessous, nous avons regroupé les sélecteurs du code ci-dessus:
CSS Commentaires
Les commentaires sont utilisés pour expliquer le code, et peut aider lorsque vous modifiez le code source à une date ultérieure.
Les commentaires sont ignorés par les navigateurs.
Un CSS commentaire commence par /* and ends with */ se /* and ends with */ . Les commentaires peuvent également étendre sur plusieurs lignes:
Exemple
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»