Dans ce tutoriel, nous utiliserons cette valeur non définie dans notre code CSS et présenterons comment cela fonctionne. Nous explorerons des exemples où nous appliquons certaines propriétés, puis utiliserons le «non set» pour les propriétés d'annuler ou d'annuler."
Exemple 1
Nous allons commencer à écrire HTML en créant un nouveau fichier dans Visual Studio Code et en choisissant HTML comme langue. Le fichier a été généré, et tout ce que nous devons faire maintenant est d'ajouter le «!»Marquez pour obtenir les balises de base. En conséquence, l'appuyer sur «Entrée» fait afficher le fichier de toutes les balises de base du HTML. Le corps est la section d'où nous commençons à coder. Nous mettons simplement un titre «H1» et un paragraphe «P» dans le corps. Nous fournissons également un lien vers le fichier CSS à l'intérieur de la «tête» dans ce modèle HTML. Regardez comment cette valeur non set fonctionne dans CSS.
Nous allons styliser à la fois le titre et le paragraphe. Nous définissons d'abord le titre «Font-Family», et nous sélectionnons «calibri» pour cela. Nous changeons également sa «couleur» et nous avons mis «rouge» pour cela. Maintenant, nous avons également un paragraphe, et ici nous changeons simplement la «couleur» du paragraphe. Maintenant, nous voulons annuler la couleur du paragraphe. Donc, pour cela, nous utilisons la valeur «non set» pour la «couleur» du paragraphe, de sorte que cette couleur «verte» n'est pas appliquée au texte du paragraphe.
La sortie montre que la couleur de la tête et la famille des polices sont modifiées, mais la couleur du paragraphe reste inchangée. Ici, vous pouvez voir que la couleur verte n'est pas appliquée ici au texte du paragraphe parce que nous avons non pas la propriété de la couleur du paragraphe.
Exemple 2
Nous utilisons le même code HTML ici que nous avons créé dans notre exemple précédent. Nous stylissons l'en-tête en utilisant deux propriétés. L'un d'eux est la propriété «Font-Family», et nous avons définie cette propriété comme «Algérien.«La deuxième propriété que nous utilisons ici pour le titre est la propriété« couleur », et nous utilisons ici le« bleu ». Nous appliquons également plusieurs propriétés au paragraphe ici. La «couleur» de ce paragraphe est «vert» et la taille de la police du paragraphe est «24px». Nous utilisons également le «Times New Roman» comme «Font-Family.«Nous utilisons la propriété« Text-Decoration »pour générer le soulignement pour l'en-tête. Nous définissons la valeur «text-decoration» comme «soulignant."
Maintenant, nous utilisons le mot clé «Bold» pour le «poids de police» et alignons ce paragraphe dans le «centre» en utilisant la propriété «Text-Align». Mais maintenant, nous ne voulons pas appliquer toutes ces propriétés à notre paragraphe, donc au lieu d'écrire toutes les propriétés séparément, puis en utilisant la valeur «non finie» sur chaque propriété, nous mettons simplement «tous» et définissons sa valeur sur «Unred» pour le paragraphe. Notre paragraphe restera inchangé, et aucune propriété ou style ne sera appliqué au paragraphe.
La famille des couleurs et des polices de la rubrique a été modifiée, tandis que le paragraphe est resté inchangé. Parce que toutes les propriétés que nous avons appliquées au paragraphe n'ont pas été défoncées en utilisant «Tous: Unset» dans CSS.
Exemple 3
Dans ce code HTML donné, nous allons mettre un titre et un div ici et passer au CSS pour leur appliquer un style et l'annuler ou décrocher certains styles en utilisant «Unset."
Nous appliquons simplement certaines propriétés sur le div. Ici, nous avons défini sa «taille de police» et avons mis la valeur de la «taille de police» comme «24px». Nous utilisons également «audacieux» pour le «poids de police.«La« couleur »que nous choisissons ici pour cette div est« rouge », et la« Font-Family »que nous sélectionnons ici est« Arial."Maintenant, nous n'avons pas besoin de changer la« couleur »et le« poids de police »de cette div, nous mettons donc ces deux propriétés à l'intérieur des accolades de div bouclées et placons« Undet »pour les deux. Les propriétés restantes s'appliqueront à l'élément DIV, mais les propriétés de couleur et de poids de police ne s'appliqueront pas à la div car nous avons non mis ces propriétés ici.
La sortie rend ici, et vous pouvez voir que la «famille de police» et la «taille de police» est modifiée ici en fonction des valeurs que nous avons définies dans le code CSS, mais il n'y a aucun effet sur le «poids de police», mais il n'y a aucun effet sur le «poids de police» et «couleur» du div. C'est parce que nous détendons ces valeurs. De cette façon, nous pouvons undage de certaines propriétés en utilisant le nom de la propriété et définir la valeur «Unset» pour cette propriété.
Exemple 4
Nous allons placer un en tête ici, puis mettre un paragraphe; Après ce paragraphe, nous avons également mis un élément div ici, et à la fin, nous plaçons un élément de portée. Nous allons styliser tous ces éléments, puis les undous tous dans CSS. Regardez le fichier CSS et voyons comment nous allons faire cela.
Le titre «Font-Family» est la première propriété que nous avons définie, et nous choisissons «algérien» pour cela. Nous ajustons également sa «couleur», que nous avons mis sur «violet» et «centre» cette rubrique aussi, en utilisant le «Text-Align.«Nous avons maintenant un paragraphe, et tout ce que nous devons faire, c'est changer la« couleur »du paragraphe. La valeur de l'attribut «couleur» est définie sur «vert» dans ce cas. La «taille de police» ici est «24px». En tant que propriété «Font-Family», nous utilisons également «Times New Roman.L'attribut "Text-Decoration" est utilisé pour créer le soulignement du texte. La valeur de «text-decoration» a été définie pour «souligner.«Nous utilisons maintenant le mot-clé« Bold »pour la propriété« Font-Weight »et la propriété« Text-Align »pour positionner ce paragraphe dans le« Centre."
Maintenant, pour le div, nous utilisons les mêmes propriétés mais modifiant les valeurs de ces propriétés ici. Dans cette situation, la valeur de l'attribut «couleur» est «rouge.«La« taille de police »est« 22px »dans ce cas. Nous utilisons également «Calibri» comme une propriété «Font-Family». La valeur de la «décoration de texte» a été modifiée en «souligner.«Pour mettre cette div au milieu, nous utilisons la propriété« Text-Align »et la définissons comme« Centre."
Après cela, nous avons une envergure, le «bleu» est la valeur de la propriété «couleur» de Span. Dans ce cas, la «taille de police» est «20px». «Cambria» est également définie ici comme une valeur de la propriété «Font-Family». Nous changeons également le «style de police» de cette durée en «italique.«La valeur« texte-décoration »que nous utilisons ici est« souligner.«Nous vous montrerons à quoi cela ressemblera lorsque toutes les propriétés s'appliquent à eux et aussi quand aucune propriété ne s'appliquera à eux. Nous vous montrerons deux sorties ici afin que vous apprennerez facilement la différence avant d'utiliser «Unset» et après avoir utilisé la valeur «Unset» pour les propriétés «toutes».
Regardez cette première sortie ici; Toutes les propriétés sont appliquées à l'en-tête, au paragraphe, au div et à la durée parce que nous n'utilisons pas «Unset» ici avec une propriété. Maintenant, avancez et vérifiez comment il affichera la sortie lorsque nous utiliserons «Unset."
Dans ce fichier CSS, nous ajoutons simplement «tout: unset» pour l'en-tête, le paragraphe, div et span. Cela signifie que nous «décollons» toutes les propriétés que nous avons appliquées pour tous.
La sortie vous montre qu'il n'y a pas de propriété appliquée sur aucun titre, paragraphe, div et à l'élément Span. C'est juste à cause de la valeur «non set» que nous avons utilisée pour «tous."
Conclusion
Ce tutoriel a été développé pour vous aider à apprendre la valeur «non set» du CSS qui nous permet de défaire certaines propriétés et également de défaire toutes les propriétés en plaçant simplement ce «non-set» là-bas. Ce tutoriel a suivi ce sujet en détail. Nous avons dépassé quatre exemples différents ici dans lesquels nous avons utilisé cette valeur «non set», ainsi que les sorties, vous comprendrez donc facilement comment cette valeur «non set» fonctionne. Nous avons utilisé la valeur «non set» séparément des noms de propriété et avons également utilisé cela avec la propriété «tout» qui a annulé toutes les propriétés que nous avons appliquées dans les exemples. J'espère que vous pourrez perturber vos propriétés dans CSS après avoir correctement suivi ce tutoriel.