Alerte CSS
Exemple 1:
Tout d'abord, nous devons créer le fichier HTML pour créer ma boîte d'alerte, puis créer le fichier CSS pour styliser la boîte d'alerte. Nous allons démontrer ces codes dans le studio de code visuel. Nous créons un nouveau fichier avec n'importe quel nom de fichier et utilisons le ".Extension de fichier html ”pour enregistrer ce fichier html. Ensuite, commencez à taper le code donné dans ce fichier HTML.
Ici, nous mentionnons le type de document «HTML». Puis ouvrez la balise «». Vous devez fermer toutes les balises que vous utilisez ici. Donc, nous fermons cette balise «» en utilisant «» à la fin. Ouvrez la balise «». Dans la balise «», il y a une nouvelle balise «Meta». Le «nom» spécifie ici le nom et le «contenu» définit les valeurs. Cette ligne est utilisée pour définir la «fenêtre» afin que notre page d'alerte soit bonne sur chaque appareil.
Maintenant, liez ce fichier HTML au fichier "CSS" nommé "Styling.CSS ». La balise «lien» et le «rel» définissent la connexion entre la page liée et cette page. Le «HREF» est pour donner le nom du fichier «CSS» .Le fichier «CSS» est «style.CSS ». Après cette fermeture, la balise en utilisant cette balise "". Maintenant, nous devons ouvrir la balise «». Le corps contient la balise de cap
Et il y a une rubrique dans cette balise. Après la fermeture, nous avons utilisé une classe Div et pour cela, la balise est utilisée ici. Nous avons créé une «alerte» de classe Div qui est utilisée comme conteneur et une classe de span nommée «CloseBtn».
Ici, nous avons ajouté une classe avec une propriété «onclick» utilisée pour cacher l'élément parent. Lorsque vous cliquez dessus, c'est dans le . Le «& Times» est utilisé pour créer la lettre «x». Le "”Tag est là pour que le texte s'affiche comme audacieux. Après cela, fermez toutes les balises. Maintenant, enregistrez-le. Ensuite, créez le fichier CSS pour donner un style à cette boîte d'alerte. Le code du fichier CSS est également là ci-dessous.
Tout d'abord, appliquez le style à «l'alerte». Définir sa «position» comme absolue, ce qui signifie que nous pouvons placer des éléments où nous voulons. Le rembourrage est là pour créer un espacement supplémentaire dans un élément. La valeur du rembourrage est «20px». La couleur de l'arrière-plan est rouge. Le code de couleur rouge est «# f44336». La couleur du texte est blanche. Ensuite, appliquez un style sur «Closebtn» dans lequel nous fixons la marge gauche «15px» et la couleur est «blanc».
Le poids du pli indique à quel point la police est épaisse ou mince. Dans ce CAE, c'est «audacieux». La famille des polices est utilisée pour le style de police qui est la police «Cambria». La couleur de «x» est «brune» et elle, «flotte» sur le côté droit de la boîte d'alerte. La taille de la police est définie comme «22px» et la «hauteur de ligne» est «20px». Le «curseur» est là comme un «pointeur». Ceci est utilisé pour spécifier le type de curseur. Ici, le type de curseur est défini comme «pointeur» afin que le pointeur soit affiché à l'utilisateur. Nous appliquons le style à ma boîte d'alerte dans ce fichier CSS et avons également lié ce fichier au fichier html. Ensuite, générez la sortie sur le navigateur. Voir la sortie dans l'image:
Exemple n ° 2:
Nous allons créer plus d'une boîte d'alerte en même temps en modifiant le code ci-dessus. Vous pouvez voir comment nous créons des boîtes d'alerte dans ce code ci-dessous.
Le code HTML est le même que celui expliqué dans le premier exemple. Nous devons afficher les «messages d'alerte» de ruban
> balise. Ensuite, un paragraphe est affiché qui est écrit à l'intérieur "
""
" Mots clés. Ensuite, utilisez les balises «» et «» que nous avons expliquées dans le premier exemple. Cette boîte alerte affichera le «danger». Nous créons quatre boîtes d'alerte en utilisant la même méthode ici dans ce code.Maintenant, ici, nous stylisons les boîtes de messages d'alerte à l'aide de CSS. Tout d'abord, nous devons aligner le texte au centre de l'écran. Ainsi, les forithis nous avons utilisé «Text-Align: Center». Maintenant, utilisez ".alerte.danger »qui applique tout le style donné dans les accolades bouclées à la boîte d'alerte« danger ». Ici, vous pouvez voir que la couleur d'arrière-plan est définie comme «rouge». Lorsque cette boîte d'alerte apparaît, la couleur de ceci sera «rouge». Le texte écrit à l'intérieur sera de style «algérien».
Ici, pour appliquer le style de police, nous avons utilisé la «Font-Family». La couleur de la police ou du texte est définie comme «noir». Après cela, la couleur de la prochaine boîte d'alerte est «violet». La boîte d'alerte «succès» et le style de la police sont «Times New Roman». De plus, nous devons changer la couleur du texte à l'aide de la «couleur» et la définir comme «orangered». Ensuite, nous devons styliser le troisième boîte d'alerte: «Alerte.Info". Nous choisissons la couleur d'arrière-plan bleu clair et le code pour cela est «# 219643». Le style de police que nous avons choisi cette fois est «Arial» et la couleur est «bleu».
De plus, nous avons la quatrième boîte d'alerte nommée «AVERTISSEMENT». La couleur de l'arrière-plan de cette boîte d'alerte d'avertissement est «noir», «font-famille» est «Géorgie», et la couleur est «blanc». Fond noir et texte ou police blanc. Maintenant, il est temps de coiffer le bouton Fermer. Pour cela, nous avons utilisé «.Closebtn ”. En cela, nous devons coiffer ce bouton Fermer. Réglez la «marge-gauche» comme «15px» et la couleur à «blanc». Le poids de police est utilisé ici dont nous avons discuté dans le code ci-dessus. Nous utilisons le poids de police comme «audacieux» et le flottons vers la «droite». La «taille de police» et la «hauteur de ligne» sont respectivement «22px» et «20px». Le type de «curseur» est «pointeur».
Dans la sortie, vous pouvez voir que le texte au-dessus des boîtes d'alerte est centré et que toutes les boîtes d'alerte sont de couleurs différentes. Le style de police et la couleur de la police sont également différents dans chaque boîte d'alerte. Tous ces styles sont effectués en utilisant CSS.
Conclusion:
Dans ce tutoriel, nous avons discuté des messages d'alerte en détail. Nous avons expliqué comment créer la boîte d'alerte en HTML, comment styliser la boîte d'alerte en utilisant CSS et comment relier le fichier HTML avec le fichier CSS. Nous avons démontré des exemples ici dans ce tutoriel et montrons également la sortie des codes que nous avons écrits en HTML et CSS. Nous avons également expliqué chaque ligne de ces codes afin qu'il vous soit facile d'apprendre ce concept. Ce tutoriel vous sera utile dans le style et la création des boîtes d'alerte sur vos sites Web.