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中文網(wǎng)(php.cn)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">php中文網(wǎng)(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中文網(wǎng)(php.cn)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">標(biāo)題居中</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中文網(wǎng)(php.cn)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">這個(gè)標(biāo)題將不會受到影響</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.
