lire la table des matières
Exemples CSS pour voir comment fonctionne CSS
Qu'est-ce que CSS ?
CSS signifie Cascading Style Sheets, également connu sous le nom de Cascading Style Sheets.
CSS décrit comment afficher des éléments HTML à l'écran, sur papier ou sur d'autres supports.
CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web en même temps.
Les feuilles de style externes sont stockées dans des fichiers CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wgchen</title>
<style>
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
Syntaxe CSS
Un ensemble de règles CSS se compose de sélecteurs et de blocs de déclaration :
les sélecteurs pointent vers les éléments HTML que vous souhaitez styliser.
Un bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.
Chaque déclaration se compose d'un nom de propriété CSS et d'une valeur, séparés par des deux-points.
Les déclarations CSS multiples sont séparées par des points-virgules et les blocs de déclaration sont entourés d'accolades.
p {
color: red;
text-align: center;
}
Tous les <p>éléments seront centrés avec une couleur de texte rouge :
Exemple d'explication
p est un sélecteur en CSS (il pointe vers l'élément HTML à styler : <p>).
la couleur est l'attribut et le rouge est la valeur de l'attribut.
text-align est la propriété et center est la valeur de la propriété.
Sélecteurs CSS
Les sélecteurs CSS sont utilisés pour "trouver" (ou sélectionner) des éléments HTML à styliser.
Nous pouvons diviser les sélecteurs CSS en cinq catégories :
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）
Sélecteurs d'éléments CSS
Les sélecteurs d'éléments sélectionnent les éléments HTML en fonction des noms d'éléments.
p {
text-align: center;
color: red;
}
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
Ici, tous les <p>éléments seront alignés au centre avec une couleur de texte rouge :
Sélecteur d'identifiant CSS
Le sélecteur d'id utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique.
L'identifiant d'un élément est unique dans une page, donc le sélecteur d'identifiant est utilisé pour sélectionner un élément unique !
Pour sélectionner un élément avec un identifiant spécifique, écrivez un signe dièse (#) suivi de l'identifiant de l'élément.
#para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
Cette règle CSS sera appliquée à l'élément HTML avec id="para1":
注意:id Le nom ne peut pas commencer par un chiffre.
Sélecteur de classe CSS
Les sélecteurs de classe sélectionnent des éléments HTML avec un attribut de classe spécifique.
Pour sélectionner des éléments avec une classe spécifique, écrivez un （.）point suivi du nom de la classe.
.center {
text-align: center;
color: red;
}
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
Dans cet exemple, tous les éléments HTML avec class="center" seront rouges et centrés :
vous pouvez également spécifier que seuls des éléments HTML spécifiques seront affectés par la classe.
注意: Le nom de la classe ne peut pas commencer par un chiffre !
Sélecteur universel CSS
Sélecteur générique （*）Sélectionne tous les éléments HTML de la page.
Les règles CSS suivantes affectent chaque élément HTML de la page :
* {
text-align: center;
color: blue;
}
Sélecteurs de regroupement CSS
Les sélecteurs de groupe sélectionnent tous les éléments HTML avec la même définition de style.
Jetez un œil au code CSS ci-dessous (les éléments h1, h2 et p ont la même définition de style) :
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Il est préférable de grouper les sélecteurs pour minimiser la taille du code.
Pour grouper des sélecteurs, séparez chaque sélecteur par une virgule.
h1, h2, p {
text-align: center;
color: red;
}
Dans cet exemple, nous avons regroupé les sélecteurs dans le code ci-dessus.