Différence entre id et class en CSS
Share
le différence principale entre id et classe en CSS est que le id est utilisé pour appliquer un style à un élément unique alors que la classe est utilisée pour appliquer un style à plusieurs éléments.
Il existe différentes technologies dans le développement Web. Les principaux langages pour développer des sites Web sont HTML, CSS et JavaScript. HTML signifie Hyper Text Markup Language. Cela aide à développer la structure de la page Web. JavaScript aide à rendre la page Web plus dynamique. CSS est l'acronyme de Cascading Style Sheets. Il est utile d’ajouter des styles et de rendre les pages Web plus présentables. Les règles CSS s'appliquent aux éléments HTML. De plus, les sélecteurs CSS aident à trouver les éléments et à appliquer le style requis aux balises HTML. id et class sont deux types de sélecteurs.
Zones clés couvertes
1. Quelles sont les règles CSS
- Définition, exemple
2. Quel est l'identifiant
- Définition, exemple
3. Quelle est la classe
- Définition, exemple
4. Différence entre id et class
- Comparaison des différences clés
Mots clés
Classe, règles CSS, ID
Quelles sont les règles CSS
CSS consiste en un ensemble de règles. Le navigateur peut interpréter ces règles et les appliquer aux éléments spécifiés du document. Une règle de style CSS comprend trois sections. Ils sont le sélecteur, la propriété et la valeur. La déclaration fait référence à la combinaison de propriété et de valeur. Ils apparaissent dans une paire d'accolades comme suit.
sélecteur propriété: valeur;
Sélecteur - Aide à identifier l'élément pour appliquer le style
Propriété - Un attribut. Tous les attributs HTML sont convertis en propriétés CSS. Quelques exemples sont couleur, texte, alignement, bordure, etc..
Valeur - La valeur est ce qui est assigné à la propriété. Par exemple, le bleu peut être affecté à la couleur de la propriété.
Quel est l'identifiant
Le programmeur peut définir une règle de style en fonction de l'identifiant des éléments. Tous les éléments ayant le même identifiant seront appliqués avec le style défini. Pour sélectionner un élément avec un identifiant spécifique, il doit y avoir un symbole # (hash) suivi de l'id de l'élément.
Supposons que le fichier HTML contienne une déclaration comme suit.
Le fichier CSS contient le code suivant.
# header1
Couleur bleue;
Lorsque le navigateur interprète l'instruction HTML, il vérifie l'identifiant de l'élément h1, qui correspond à header1 dans le fichier CSS. Ensuite, il applique la règle CSS définie à l'élément h1. Par conséquent, le texte Hello World apparaîtra en bleu.
L'identifiant est unique dans la page. Par conséquent, le sélecteur id est utilisé pour un élément unique.
Quelle est la classe
Semblable à l'id, le programmeur peut définir les règles de style en fonction de la classe de l'élément. Tous les éléments de la même classe seront appliqués avec un style défini. Pour sélectionner un élément avec une classe spécifique, il devrait y avoir un. (point) symbole suivi du nom de la classe.
Supposons que le fichier HTML contienne les instructions suivantes.
Le fichier CSS contient le code suivant.
.header1
Couleur bleue;
Lorsque le navigateur interprète l'instruction HTML, il vérifie la classe de l'élément h1, qui correspond à header1 dans le fichier CSS. Ensuite, il applique la règle CSS définie à tous les éléments h1. Par conséquent, les textes Hello World 1 et Hello World 2 apparaissent en bleu..
Il est possible d'utiliser la même classe sur plusieurs éléments. Par conséquent, le sélecteur de classe est utilisé pour plusieurs éléments.
Différence entre id et class en CSS
Définition
id est un sélecteur en CSS qui donne un style à l'élément avec un identifiant spécifié, alors que classe est un sélecteur en CSS qui met en forme les éléments sélectionnés avec une classe spécifiée.
Syntaxe
La syntaxe id est #id css declarations; . La syntaxe de la classe est .class css declarations;
Usage
De plus, l'utilisation de id consiste à appliquer un style à un élément spécifique. L'utilisation de la classe est d'appliquer un style à plusieurs éléments.
Conclusion
L'identifiant et la classe sont deux sélecteurs CSS qui permettent d'appliquer un style aux éléments HTML. La principale différence entre id et class dans CSS est que id est utilisé pour appliquer un style à un élément unique, alors que class est utilisé pour appliquer un style à plusieurs éléments..
Référence:
1. «Syntaxe et sélecteurs CSS». Didacticiels Web en ligne W3Schools, Disponible ici.
Courtoisie d'image:
1. “CSS.3" de Nikotaf - Travail personnel (CC BY-SA 4.0) via Commons Wikimedia
