Maison > interface Web > tutoriel CSS > Explication détaillée du principe d'utilisation à la fois de l'identifiant et de la classe en CSS

Explication détaillée du principe d'utilisation à la fois de l'identifiant et de la classe en CSS

高洛峰
Libérer: 2017-03-27 17:39:49
original
2303 Les gens l'ont consulté

Tout d'abord, introduisez la différence entre id et class :

1. id est une étiquette utilisée pour distinguer différentes structures et contenus ; id consiste d'abord à trouver la structure/le contenu, puis à définir un style pour it ; la classe est Un style peut être appliqué à n'importe quelle structure ou contenu ; une classe définit d'abord un style puis l'applique à plusieurs structures/contenus.

2. id est le nom de l'élément, qui peut être utilisé par js ou d'autres scripts pour accéder à l'objet élément, et class est le nom de classe CSS de l'élément.

3. Lors de la définition du style, utilisez #aa{...} pour id="aa" et .bb{...} pour class="bb".

4. Class est un attribut global et id est un attribut local.

Ensuite, le code ressemble à ceci :

test

 :300px; height:50px; background-color:Red;}

 .bb{ width:100px; height:300px; background-color:blue;}

Comment cela sera-t-il affiché ?

La réponse est : afficher un bloc de texte de test d'une largeur de 300, d'une hauteur de 50 et d'un fond rouge. Étant donné que la classe est un attribut global et que l'identifiant est un attribut local, le style affiché est l'attribut nouvellement défini de l'identifiant une fois que la classe a défini cet attribut. Lorsque les attributs class et id sont répétés, l'attribut id est utilisé. C'est quelque peu similaire à la relation d'héritage parent-enfant en programmation.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal