Comment utiliser les classes CSS et les sélecteurs d'identifiant

En CSS, le sélecteur de classe est utilisé pour sélectionner des éléments avec une classe (classe) spécifiée, représentée par un point, et la syntaxe est ".specified class {attribut de style : valeur de l'attribut de style ;}". Le sélecteur d'identifiant est utilisé pour spécifier un style spécifique pour l'élément HTML marqué avec un identifiant spécifique. Il est défini à l'aide de "#" et la syntaxe est "#valeur d'identifiant spécifique {attribut spécifique : valeur d'attribut spécifique ;}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment utiliser les sélecteurs de classe et d'identifiant CSS

Sélecteur de classe

.le sélecteur de classe sélectionne les éléments avec une classe (classe) spécifiée.

En CSS, le sélecteur de classe est affiché avec un point :

.center {text-align: center}

Dans l'exemple ci-dessus, tous les éléments HTML avec la classe centrale sont centrés.

Dans le code HTML ci-dessous, les éléments h1 et p ont la classe centrale. Cela signifie que les deux obéiront aux règles du sélecteur ".center".

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

Remarque : les chiffres ne peuvent pas être utilisés comme premier caractère du nom de la classe ! Cela ne fonctionnera pas dans Mozilla ou Firefox.

Comme id, la classe peut également être utilisée comme sélecteur dérivé :

.fancy td {
color: #f60;
background: #666;
}

Dans l'exemple ci-dessus, les cellules du tableau à l'intérieur du plus grand élément avec le nom de classe fantaisie afficheront un texte orange sur un fond gris. (Un élément plus grand nommé fantaisie pourrait être une table ou un div)

Les éléments peuvent également être sélectionnés en fonction de leur classe :

td.fancy {
color: #f60;
background: #666;
}

Dans l'exemple ci-dessus, une cellule de tableau avec le nom de classe fantaisie serait orange sur fond gris.

<td class="fancy">

Vous pouvez attribuer une classe fantaisie à n'importe quel élément de table autant de fois que vous le souhaitez. Les cellules marquées de fantaisie seront orange avec un fond gris. Les cellules auxquelles aucune classe nommée fantaisie n’est affectée ne sont pas affectées par cette règle. Il convient également de noter que les paragraphes avec une classe fantaisie ne seront pas orange avec un fond gris, et bien sûr, tous les autres éléments marqués comme fantaisie ne seront pas affectés par cette règle. Tout cela est dû à la façon dont nous avons écrit cette règle, l'effet est limité aux cellules de tableau marquées comme fantaisie (c'est-à-dire en utilisant l'élément td pour sélectionner la classe fantaisie).

sélecteur d'identifiant

Le sélecteur d'identifiant peut spécifier un style spécifique pour les éléments HTML marqués d'un identifiant spécifique.

Le sélecteur d'identifiant est défini avec "#".

Pour les deux sélecteurs d'identifiant ci-dessous, le premier peut définir la couleur de l'élément en rouge, et le second peut définir la couleur de l'élément en vert :

#red {color:red;}
#green {color:green;}

Dans le code HTML ci-dessous, l'élément p avec le L'attribut id de red est affiché en rouge et l'élément p dont l'attribut id est vert est affiché en vert.

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

Remarque : L'attribut id ne peut apparaître qu'une seule fois dans chaque document HTML. Pour savoir pourquoi, consultez XHTML : refactorisation de sites Web.

Sélecteur d'identifiant et sélecteur dérivé

Dans les mises en page modernes, le sélecteur d'identifiant est souvent utilisé pour créer des sélecteurs dérivés.

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

Le style ci-dessus ne sera appliqué qu'aux paragraphes qui apparaissent dans les éléments avec l'identifiant de la barre latérale. Cet élément est très probablement une cellule div ou de tableau, bien qu'il puisse également s'agir d'un tableau ou d'un autre élément de niveau bloc. Il peut même s'agir d'un élément en ligne, tel que ou , mais une telle utilisation est illégale car elle ne peut pas être utilisée dans un élément en ligne ;p> (si vous oubliez pourquoi, voir XHTML : refactorisation de sites Web).

Un sélecteur, plusieurs utilisations

Même si l'élément marqué comme sidebar ne peut apparaître qu'une seule fois dans le document, ce sélecteur d'identifiant peut être utilisé plusieurs fois comme sélecteur dérivé :

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

Ici, et dans la page Ce qui est évidemment différent des autres éléments p est que l'élément p à l'intérieur de la barre latérale bénéficie d'un traitement spécial. En même temps, ce qui est évidemment différent de tous les autres éléments h2 de la page est que l'élément h2 à l'intérieur de la barre latérale bénéficie également d'un traitement spécial différent.

Sélecteurs séparés

Le sélecteur id peut fonctionner indépendamment même s'il n'est pas utilisé pour créer un sélecteur dérivé :

#sidebar {
border: 1px dotted #000;
padding: 10px;
}

Selon cette règle, l'élément avec la barre latérale id aura un point noir d'un pixel de largeur. La bordure sera entouré de 10 pixels de remplissage. Les anciennes versions des navigateurs Windows/IE peuvent ignorer cette règle à moins que vous ne définissiez spécifiquement l'élément auquel appartient ce sélecteur :

div#sidebar {
border: 1px dotted #000;
padding: 10px;
}

(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!