Maison  >  Article  >  interface Web  >  Quelle est la différence entre la classe CSS et le sélecteur d'identifiant

Quelle est la différence entre la classe CSS et le sélecteur d'identifiant

青灯夜游
青灯夜游original
2021-04-21 15:38:173865parcourir

Différences : 1. Le sélecteur de style "#" est utilisé lorsque id correspond à css tandis que le sélecteur de style "." est utilisé lorsque class correspond à css. 2. La classe peut être réutilisée dans la page ; mais l'identifiant ne peut apparaître qu'une seule fois dans la page, il ne peut donc pas être réutilisé.

Quelle est la différence entre la classe CSS et le sélecteur d'identifiant

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

Identifiant CSS et sélecteur de classe

Si vous souhaitez définir des styles CSS dans les éléments HTML, vous devez définir "id" dans l'élément et le sélecteur "classe".

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 deux sélecteurs d'identifiant suivants, le premier peut définir la couleur de l'élément en rouge, le second peut définir la couleur de l'élément en vert :

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

Dans le code HTML suivant , l'attribut id L'élément p dont l'attribut id est vert 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>

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 multiple. é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 "." :

.center {text‐align: center}

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

Bien sûr, 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 :

p.center {text‐align:center;}

La différence entre id et class en CSS

1. Différence de syntaxe :

L'ID correspondant au CSS utilise le sélecteur de style "#" (signe dièse).

la classe correspond au CSS utilisant le sélecteur de style "." (point de saisie en demi-largeur en anglais).

2. Différence dans les temps d'utilisation :

la classe peut être réutilisée dans la page,

l'identifiant ne peut apparaître qu'une seule fois dans la page, il ne peut donc pas être réutilisé,

Essayez donc de l'écrire en classe, afin que le CSS que vous écrivez puisse être référencé à plusieurs reprises dans la page, réduisant ainsi la charge de travail et la quantité de code.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Quelles sont les polices CSS ?Article suivant:Quelles sont les polices CSS ?