Identifiant CSS et classe
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
id 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 sont appliquées à l'attribut d'élément id="para1":
Instance
<!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écuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Ne démarrez pas l'attribut ID avec un numéro. Les identifiants commençant par des chiffres ne fonctionneront pas dans Mozilla. /Navigateurs Firefox.
sélecteur de classe
le sélecteur de classe est utilisé pour décrire le style d'un groupe d'éléments. Le sélecteur de classe est différent du 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.
Instance
<!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écuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Vous pouvez également spécifier des éléments HTML spécifiques à l'aide de classes.
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">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton «Exécuter l'instance» pour afficher l'instance en ligne
Le premier caractère du nom de la classe ne peut pas utiliser de chiffres ! Cela ne fonctionnera pas dans Mozilla ou Firefox.
