Groupe CSS

Le sélecteur de groupe est utilisé pour styliser tous les éléments, qui sont séparés par des virgules, avec les mêmes propriétés de style. Plusieurs composants peuvent être choisis et stylisés collectivement en utilisant le sélecteur de groupement CSS. Chaque sélecteur est séparé des autres par un espace et place une virgule entre chaque élément ou sélecteur. Lorsque nous voulons appliquer le même style à tous les éléments, nous n'avons pas besoin de mettre des propriétés distinctes pour tous ces. Au lieu de cela, nous avons utilisé la méthode du sélecteur de groupement et défini les propriétés sur tous les éléments en même temps. Dans ce tutoriel, nous utiliserons ce sélecteur de regroupement et vous expliquerons son utilisation en détail.

Syntaxe du sélecteur de groupe:

Element1, élément2, élément3…

// Liste de déclaration

Exemple 1:

Pour démontrer ces exemples donnés, le code Visual Studio est utilisé. Nous ouvrirons le nouveau fichier et choisirons la langue «HTML», qui créera un fichier HTML. Ensuite, nous commençons à le faire dans le fichier fraîchement créé. Lorsque nous enregistrons le code fini, le «.L'extension de fichier html »est automatiquement ajoutée au nom du fichier. Une fois que les balises HTML de base sont apparues dans ce fichier nouvellement formé en ajoutant "!«Marques et cliquant sur« Entrer », nous commençons par ajouter les titres« H1 »et aussi« H2 ». Après ces titres, nous mettons deux paragraphes différents dans le code HTML. Maintenant, nous produisons le fichier CSS après cela et relions également les deux fichiers pour appliquer les propriétés CSS aux éléments HTML.

Comme nous voulons appliquer le même style à la fois à l'en-tête et aussi au paragraphe, nous n'avons pas besoin de mettre tous ces éléments séparément. Nous suivons simplement le sélecteur de regroupement et mentionnons tous les éléments et les séparons en mettant une virgule «» entre eux comme indiqué dans la capture d'écran ci-dessous. Nous mentionnons tous les éléments comme «H1, H2, P». Maintenant, mettez des accolades bouclées, puis utilisez des propriétés dans ces accolades bouclées. Lorsque nous ajoutons des propriétés, ces propriétés s'appliqueront à tous les éléments que nous avons mentionnés. Nous utilisons la propriété «Text-Align» de chacun d'eux et les fixons sur «Centre» en utilisant cette propriété.

Ensuite, nous décorons tout cela en mettant «souligner» comme valeur de la propriété «texto-décoration». La «famille de police» que nous utilisons pour tous ces éléments est «algérien». Nous ajustons la «taille de police» en «22px». Ensuite, nous avons utilisé la propriété «couleur» que nous avons mise à «marron» à tous les titres ainsi qu'aux paragraphes.

Voici le résultat du code CSS ci-dessus. Vous pouvez voir que la couleur, la taille de la police, la famille et toutes les autres propriétés que nous avons utilisées ci-dessus sont appliquées à tous les titres et paragraphes parce que nous utilisons le sélecteur de regroupement pour chacun d'eux. Tout le style de ces éléments est le même ici que nous avons défini dans le code CSS.

Exemple n ° 2:

Dans cet exemple, nous allons créer plusieurs paragraphes avec des noms uniques et également plusieurs divs avec des noms différents. Nous avons une rubrique ici avant tous ces paragraphes et div. Nous appliquerons le sélecteur de regroupement à tous ces éléments dans le code CSS.

Nous mettons les noms de toutes les classes de paragraphe et des classes Div et aussi le titre. Nous allons appliquer les mêmes propriétés à tous. Toutes les propriétés que nous allons définir ici dans les accolades bouclées s'appliqueront à tous ces éléments que nous avons mentionnés. Nous alignons tous les éléments du «centre» à l'aide de la propriété «Text-Align» et utilisons le «Times New Roman» comme valeur de la propriété «Font-Family». Ensuite, définissez la «taille de police» sur «23px» et la «couleur» pour tous est «rouge». Maintenant, nous appliquons un «coulor de fond» comme «bleu léger» et «style de police» à «italique». Toutes ces propriétés seront appliquées à tous les paragraphes, div et aussi à la rubrique.

Ici, dans ce résultat du code ci-dessus, tous les divs, paragraphes et aussi le titre apparaît dans le même style. Toutes les propriétés de style qui sont appliquées sur tous sont les mêmes. Comme nous avons utilisé le sélecteur de groupement pour faire cela.

Exemple # 3:

Ici, nous allons appliquer les mêmes propriétés aux paragraphes. Tous les paragraphes apparaîtront la même. Pour les Divs, nous utilisons les mêmes propriétés, donc tous les divs rendront dans le même style.

Nous utilisons «Times New Roman» comme «Font-Family» du «H1» et «Orange» est sélectionné ici comme «couleur». La «couleur arrière-plan» de ce «H1» est définie sur «jaune clair». Maintenant, nous plaçons tous les noms de paragraphe et utilisons certaines propriétés ici. «Calibri» est spécifié comme la valeur de la propriété «Font-Family» et de la «taille de police» sera «23px». Ensuite, «marron» pour la «couleur». Ici, nous mettons une «couleur d'arrière-plan» de «vert clair» et la valeur de la propriété «poids de police» est définie sur «Bold». Ensuite, nous avons la propriété «couleur» et nous l'avons réglée sur «vert» et la «couleur arrière» pour tous les divs est «Light-Salmon». Nous les «italiques» en définissons cette valeur dans la propriété «de style texte».

Ici, vous voyez que tous les paragraphes apparaissent dans le même style et que tous les divs apparaissent dans le même style que nous avons défini ces valeurs dans le code CSS.

Exemple n ° 4:

Nous avons trois titres différents, un paragraphe, un div et aussi une classe de traves. Nous appliquerons les mêmes propriétés de style à tous ces éléments dans CSS.

Nous mettons les noms de tous les éléments sur lesquels nous voulons appliquer les propriétés. Vous pouvez voir ici comment mettre ces noms. Nous devons mettre la virgule entre tous les noms de tous les éléments, puis placer les propriétés à l'intérieur des accolades bouclées. Nous utilisons la propriété «Text-Align» pour aligner «gauche» tous les composants. La famille de polices «Times New Roman» est définie comme la valeur de la propriété «Font-Family». Ensuite, choisissez «24px» pour la «taille de police» qui sera appliquée à tout le monde, et «violet» est sélectionné pour la «couleur». Ici, nous appliquons une «couleur d'arrière-plan» de «rose légère» et le mot-clé «Bold» est sélectionné comme valeur de la propriété «Font-Weight». De plus, nous avons utilisé «souligner» pour la propriété «text-decoration» pour les rendre tous plus attrayants.

Le résultat du code CSS susmentionné est indiqué ici. Comme vous pouvez le voir, tous les en-têtes et paragraphes ainsi que la portée ont la même couleur, la même taille de police, la famille et tous les autres styles sont les mêmes parce que nous avons utilisé le sélecteur de regroupement pour tous. Le formatage de ces éléments est le même ici.

Conclusion

Dans ce tutoriel, nous avons expliqué que le sélecteur de groupement est défini comme nous pouvons choisir plusieurs composants et styles collectivement, les séparant par une virgule. Dans nos codes, nous avons utilisé ce concept. Dans ce tutoriel, nous avons également discuté de la façon d'utiliser ce sélecteur de groupement et comment définir des propriétés à l'intérieur. Nous avons également donné les résultats de tous ces codes. Pour votre avantage, nous avons développé un tutoriel complet qui comprend le code, une explication approfondie et les résultats.