Dans CSS, nous avons un astérisque «*» qui est utilisé pour sélectionner tous les éléments de HTML et les appliquer au style. Dans CSS, si nous n'utilisons que «*» et appliquons le style dans les accolades bouclées, il appliquera ces styles à tous les éléments de la page HTML. Mais si nous mentionnons les enfants d'un parent en particulier, il obtiendra tous les enfants de ce parent et appliquera le style à tous les enfants de ce parent, pour ainsi dire. Dans ce tutoriel, nous utiliserons cet astérisque dans CSS et vous montrerons comment cela fonctionne. Nous vous donnerons différents exemples et leurs sorties dans ce tutoriel.

Syntaxe

*
Valeur de la propriété

OU
*parent
Valeur de la propriété

Exemple 1

Créez le fichier HTML et écrivez des paragraphes et des titres dans le fichier HTML afin que nous puissions les styliser en utilisant le sélecteur CSS «*». Dans ce tutoriel, le logiciel que nous utilisons pour effectuer des exemples est Visual Code Studio. Donc, nous ouvrons le fichier HTML dans ce code Visual Studio et écrivons le code HTML ici. Nous fournissons également le code. Ce fichier est enregistré en utilisant le «.Extension de fichier html ».

Vous pouvez voir que nous avons une tête1 dans le corps du HTML puis une classe «» dans laquelle nous avons deux paragraphes différents utilisant le «

"Tag puis fermez ce" div ". Après cela ", nous avons un autre paragraphe"

"Qui est en dehors du" ". Ici, nous fermons le corps et le sauvons. Ensuite, nous passons à notre fichier CSS où nous utilisons l'astérisque «*» pour appliquer différents styles sur cette page HTML.

Code CSS

Ici, nous créons notre fichier CSS et utilisons le ".Extension de fichier CSS »avec ce fichier. Nous devons lier ce fichier au fichier html. Ainsi, tout le style que nous mentionnons ici s'appliquera au fichier HTML que nous avons créé avant cela.

Tout d'abord, nous utilisons le sélecteur «*», puis utilisons des propriétés de style différentes à l'intérieur des accolades bouclées de ce sélecteur «*». Nous utilisons la propriété «fond de fond» et avons sélectionné la couleur «jaune» pour l'arrière-plan de cette page. Ensuite, nous avons la propriété «couleur» et cette propriété «couleur» modifie la couleur du texte en «violet». Il modifiera toutes les couleurs de texte qui sont écrites dans le fichier HTML en «violet». Utilisez également la propriété «Font-Family» qui est utilisée pour modifier le style de police, et définissez-la sur «Times New Roman». Tout le texte sera écrit dans ce style de police. Toutes les propriétés de style que nous utilisons s'appliqueront sur la page HTML complète parce que nous utilisons «*» et nous ne mentionnons aucun nom avec ce «*».

Sortir

Nous obtenons cette sortie en cliquant avec le bouton droit sur le fichier HTML et en sélectionnant «Ouvrir dans le navigateur par défaut». La sortie montre comment ce sélecteur «*» fonctionne dans CSS.

Vous pouvez observer que tout le texte est affiché en couleur «violet» et que tout le texte est écrit dans le style de police «Times New Roman» et toute la couleur d'arrière-plan est «jaune». Ainsi, lorsque nous utilisons le sélecteur «*», nous n'avons pas besoin de l'appliquer séparément à chaque élément. Le sélecteur «*» prend tous les éléments du fichier HTML et applique le style à tous.

Exemple 2

Nous avons l'exemple 2 et modifions le code HTML. Nous créons trois paragraphes dans le «div» et un paragraphe à l'extérieur de la div dans ce code HTML donné.

Code CSS

Dans ce fichier CSS, nous allons mentionner le «div» avec l'astérisque «*». Ensuite, utilisez les propriétés de style pour ce «div». Ces styles s'appliqueront à tous les éléments du «div».

Nous utilisons «div *» et placez les accolades bouclées dans lesquelles nous utilisons les propriétés de style. Ici, nous utilisons le «bleu clair» comme «couleur fond» uniquement pour les éléments div. Ensuite, le «bleu-violet» est défini pour la couleur du texte ou de la police. Aussi, modifiez le style de police des éléments div en «algérien» en utilisant la propriété «Font-Family». Nous alignons le texte des éléments «div» du «centre» à l'aide de «Text-Align».

Sortir

Dans cette sortie, l'en-tête est simple. Il n'y a pas de style appliqué à cette rubrique car cette rubrique est écrite à l'extérieur du «div». Nous appliquons le style aux éléments «div» uniquement. Maintenant, les trois lignes suivantes ont été écrites à l'intérieur du «div». Son style de police est modifié, sa couleur de police est modifiée et le texte est également placé au centre et l'arrière-plan de ces lignes est bleu. Tous ces styles que nous utilisons dans notre fichier CSS sont appliqués à tous les éléments «div». Le dernier paragraphe est également simple car il est également écrit en dehors du «div».

Exemple 3

Nous effectuons également un autre exemple, vous pouvez donc facilement faire la différence entre le fonctionnement du sélecteur «*» et comment il fonctionne lorsque nous utilisons un nom avec ce sélecteur «*».

Dans ce fichier HTML, nous créons un titre 1 en utilisant le «

" étiqueter; une classe div utilisant la balise «»; paragraphes utilisant le «

" étiqueter; et aussi une classe de span en utilisant la balise «». Nous appliquerons différents styles sur «H1», «Div», «P» et «Span» en utilisant CSS.

Code CSS

Tout d'abord, nous utilisons uniquement le sélecteur «*» pour modifier toute la couleur d'arrière-plan de la page HTML. La couleur «rose» est sélectionnée comme «couleur arrière» pour la page HTML. Ensuite, nous utilisons «P» avec le «*» afin que tout le style sera appliqué aux paragraphes écrits dans le fichier HTML. La «couleur d'arrière-plan» de tous les paragraphes est définie comme la couleur «vert clair». La taille du texte écrit dans la balise de paragraphe sera rendue en «monospace» alors que nous définissons la taille du texte du paragraphe sur «Monospace». Toutes ces propriétés de style sont appliquées aux paragraphes.

Ensuite, nous allons styliser les éléments de classe «Span» en utilisant la «Span» avec le «*». La couleur d'arrière-plan des éléments de la portée est «bleu clair» et le style de police est «italique» et «audacieux». Ensuite, nous avons une classe «div» et nous allons styliser ceci. Nous changeons sa couleur d'arrière-plan en «jaune». La «taille de police» est «130%» pour les éléments div. Tout le texte de l'élément div est rendu au centre, car nous utilisons «Text-Align». La «Font-Family» est «Algérien». Le «H1» reste. Donc, nous devons appliquer un peu de style sur ce H1. La «couleur d'arrière-plan» du titre 1 est «orange» et le texte de cette rubrique 1 est défini en couleur «vert». La taille de la police de la tête 1 est «25px» et elle est alignée «Centre».

Sortir

La sortie montre que l'en-tête est de couleur différente et que le style de cette rubrique est différent. Nous utilisons deux classes «div» et ces deux données de classes Div sont les mêmes dans le style. Vous pouvez voir qu'il y a quatre paragraphes et que la couleur de fond de ces quatre paragraphes est vert. Les classes de span sont les mêmes dans le style et la couleur d'arrière-plan de la classe Span est bleu clair. L'arrière-plan est le même que nous utilisons cette propriété «couleur arrière-plan» avec la «*».

Conclusion

Dans ce tutoriel, nous avons appris l'utilisation de l'astérisque «*» dans CSS. Nous avons étudié comment cela fonctionne seul et comment cela fonctionne lorsque nous écrivons un nom avec ce sélecteur «*». Nous avons appris que ce sélecteur d'astérisque prend tous les éléments de la page HTML et a appliqué le style à tous ces éléments. Nous avons exploré différents exemples dans lesquels nous avons utilisé ce sélecteur «*» dans CSS et avons rendu la sortie de tous ces exemples. Nous avons fourni le code HTML et CSS dans ce tutoriel ainsi que les sorties de ces codes.