Comment audacier le texte dans CSS
Exemple 1:
Nous avons besoin de quelques éléments pour appliquer la propriété «Font-Weight». En conséquence, nous commençons par créer des éléments HTML. Nous devons d'abord ouvrir un nouveau fichier pour créer un fichier HTML en choisissant HTML comme langue. Le logiciel que nous utiliserons dans ce tutoriel est le code Visual Studio. Dans ce fichier, nous commencerons à écrire du code. De plus, nous entrons "!»Et puis appuyez sur« Entrée »pour acquérir les balises HTML fondamentales, qui sont nécessaires pour tous les codes HTML.
Après tout cela, nous devons créer le corps où nous ajouterons quelques paragraphes sous la tête. Nous donnons à chaque paragraphe un nom unique afin que nous puissions l'utiliser lorsque nous appliquons l'attribut «Font-Weight» à ces paragraphes. Nous avons trois paragraphes ici. Maintenant, nous appliquerons la propriété «Font-Weight» à ces paragraphes dans le code CSS. Nous devons lier les deux fichiers, le HTML et le fichier CSS dans la tête en utilisant la balise «lien».
Tout d'abord, nous mettons le nom du paragraphe «P.P1 ”puis utilisez la propriété« Font-Weight ». Cette propriété est utilisée pour régler l'épaisseur du texte. Ici, nous le définissons sur «Normal» qui est également une valeur par défaut. La «taille de police» pour ce premier paragraphe est «20px». Après cela, nous avons un deuxième paragraphe nommé «P2» et mis son «poids de police» à «Bold». Ce mot-clé «audacieux» est utilisé pour rendre le texte du paragraphe plus épais que le texte simple et définir sa taille sur «20px». Maintenant, pour «P3», nous utilisons à nouveau la propriété «Font-Weight». Cette fois, nous définissons la valeur numérique pour régler l'épaisseur du troisième paragraphe et la rendre «audacieuse». Ici, nous utilisons la valeur «900» pour cette propriété «Font-Weight». Ainsi, le texte du paragraphe apparaîtra «audacieux» et aussi «taille de police» est le même que les paragraphes ci-dessus.
Voici la sortie ci-dessous, nous avons trois paragraphes dans la sortie et le premier paragraphe est simple car nous définissons sa valeur comme normal. Le deuxième paragraphe est plus épais que le premier, ce qui signifie que ce paragraphe est «audacieux». De plus, le dernier paragraphe est «audacieux» mais pour le troisième paragraphe, nous définissons la valeur numérique dans la propriété «Font-Weight».
Exemple n ° 2:
Ici, nous avons sept paragraphes différents avec des noms uniques, nous allons donc utiliser ces noms dans le code CSS pour appliquer la propriété «Font-Weight» sur eux. Nous définirons une valeur numérique pour cette propriété ainsi que des mots clés.
Nous utilisons la «couleur» pour la rubrique en tant que «marron» et définissons la «taille de police» pour tout «corps» à «22px». Pour «par1», nous avons mis le «poids de police» à «normal» et «rouge» comme la «couleur» de ce «par1». Pour «PAR2», nous définissons la valeur «Font-Weight» en tant que «600» et la couleur «verte» est là pour «PAR2». La valeur «Font-Weight» pour «par3» a été définie sur «700» et la couleur «bleu» est utilisée ici. Maintenant, nous utilisons à nouveau la propriété «Font-Weight» pour le paragraphe suivant «par4» et le fixons sur «800» et sa «couleur» est «orange». Le «Par5» «Font-Weight» est défini comme «900» et la «couleur» pour «par5» est «violet». Après cela, nous définissons le mot-clé «audacieux» pour la valeur de «poids de police» pour «par6» et définissant également sa «couleur» en «rose». Maintenant, nous avons le dernier paragraphe «par7» et le définissons sur le mot-clé «plus audacieux». La «couleur» de «par7» est «magenta».
Vous pouvez voir plusieurs paragraphes avec différentes valeurs de la propriété «Font-Weight». Le premier paragraphe semble normal car nous définissons sa valeur comme «normale». Les paragraphes restants apparaissent «audacieux» car nous définissons l'épaisseur de ces paragraphes dans le code CSS en utilisant la propriété «Font-Weight».
Exemple # 3:
Nous avons deux paragraphes dans ce code et appliquerons la propriété «Font-Weight» à un paragraphe et vous montrera la différence entre le texte audacieux et le texte simple.
Tout d'abord, nous allons styliser le corps en utilisant deux propriétés. La propriété «-taille de police» définit la taille du texte à «20px», puis aligne tous les éléments corporels sur le «centre» à l'aide de la propriété «Text-Align». Nous lions également l'en-tête pour le rendre plus attrayant en utilisant «Maroon» pour la «couleur» de «H1». Nous avons défini «algérien» comme «Font-Family» et «soulignant» le «H1» en utilisant la propriété «Text-Decoration». Pour le «H2», nous fixons la couleur «verte» et la «Font-Family» est «Times New Roman». Maintenant, nous allons utiliser la propriété «Font-Weight» pour les deux paragraphes. Pour «para1», sa valeur est définie comme «normale». Mais pour le «para2», nous utilisons simplement le mot-clé comme valeur et le définissons en «gras» pour rendre le texte épais.
Vous pouvez facilement remarquer la différence entre les deux paragraphes. Le premier paragraphe est le paragraphe normal, mais le deuxième paragraphe est «audacieux». La taille de la police des deux paragraphes est la même, mais vous pouvez voir que le deuxième paragraphe semble audacieux.
Exemple n ° 4:
Nous avons deux titres différents et quatre classes DIV différentes avec des noms différents pour chaque div. Nous allons utiliser la propriété «Font-Weight» pour ces div.
Tout d'abord, nous utiliserons ces deux paramètres pour coiffer le corps. L'attribut «-taille de police» ajuste la taille du texte à «21px». La propriété «Text-Align» «Centre» «Centre» tous les composants du corps pendant que nous le définissons. La «Font-Family» pour tous les éléments du corps est «Times New Roman». Nous utilisons «violet» comme «couleur» de «H1», définissons le «Font-Family» à «Algerien» et nous stylissons en outre l'attribut «Text-décoration» à «souligner» le «H1». Nous avons choisi la couleur «orange» pour le «H2» et le «calibri» comme famille de polices. Nous n'appliquons aucune propriété pour la «div1» et la «div2», nous définissons une valeur numérique «900» pour la valeur «Font-Weight». Nous avons «Div3» et «Bold» utilisés pour «Font-Weight» et «Div4», «Font-Weight» est défini comme «plus audacieux».
Le premier paragraphe «div1» est simple et nous n'avons définie aucune valeur «poids de police» pour cette div1, donc la valeur par défaut est définie ici pour «div1». Pour les autres divs, nous définissons la valeur de la valeur «de poids de police» et faisons le texte de ces divs «gras» ou «épais». Nous mentionnons également le «poids de police» de toutes les divs dans la sortie. La div2 apparaît avec une valeur de poids de police «900», la prochaine Div3 apparaît ici comme une valeur «audacieuse» pour la propriété «Font-Weight», et «plus audacieuse» pour la dernière div3.
Conclusion
Vous avez appris à utiliser la propriété CSS «Font-Weight» tout au long de ce tutoriel. Dans ce tutoriel, nous avons examiné la propriété CSS «Font-Weight» et avons expliqué ce qu'il fait, pourquoi nous l'utilisons, comment l'utiliser et quels résultats il produit. La propriété «Font-Weight» a déjà été couverte dans ce tutoriel. Nous avons utilisé cette propriété de «poids de police» pour mettre le poids de la police à plus épais ou audacieux. Parallèlement aux résultats de chaque exemple de ce tutoriel, nous avons également fourni des codes sur la façon d'utiliser la propriété «Font-Weight». Je crois que vous aurez une solide compréhension de la propriété CSS «Font-Weight» après avoir soigneusement lu ce tutoriel.