Sélecteurs CSS
Sélecteur CSS
Le sélecteur CSS est divisé en deux types
Sélecteurs d'identifiant et de classe
Si vous souhaitez définir des styles CSS dans les éléments HTML, vous devez définir les sélecteurs "id" et "class" dans l'élément.
sélecteur d'identifiant
Le sélecteur d'identifiant peut spécifier un style spécifique pour les éléments HTML marqués avec un identifiant spécifique.
L'élément HTML utilise l'attribut id pour définir le sélecteur d'identifiant, et le sélecteur d'identifiant en CSS est défini avec "#".
Les règles de style suivantes s'appliquent à l'attribut d'élément id="para1":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">php中文网(php.cn)</p>
<p>这一段不受css样式影响。</p>
</body>
</html>Exécutez le programme pour l'essayer
L'attribut ID doit ne commencent pas par un chiffre. Les identifiants commençant par des chiffres ne fonctionnent pas dans les navigateurs Mozilla/Firefox.
sélecteur de classe
le sélecteur de classe est utilisé pour décrire le style d'un groupe d'éléments. sélecteur d'identifiant, la classe peut être utilisée dans plusieurs éléments.
Le sélecteur de classe est représenté par l'attribut class en HTML. En CSS, le sélecteur de classe est affiché avec un point "." :
Dans l'exemple suivant, tous les objets avec la classe centrale. Les éléments HTML sont tous centrés.
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>Exécutez le programme pour l'essayer
Vous pouvez également spécifier des éléments HTML spécifiques en utilisant cours.
Dans l'exemple suivant, tous les éléments p utilisent class="center" pour centrer le texte de l'élément :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题将不会受到影响</h1>
<p class="center">这一段将居中对齐</p>
</body>
</html>Exécutez le programme et essayez-le
Le premier caractère du nom de la classe ne peut pas utiliser de chiffres ! Cela ne fonctionnera pas dans Mozilla ou Firefox.
