Maison > interface Web > tutoriel HTML > Trois façons de mettre les polices en gras en HTML et CSS

Trois façons de mettre les polices en gras en HTML et CSS

yulia
Libérer: 2018-10-31 15:05:49
original
17530 Les gens l'ont consulté

Avez-vous remarqué lors de votre navigation sur le site Web que certains textes ou polices de la page sont en gras ? Amis qui apprennent le HTML et le CSS, savez-vous comment mettre en gras du texte en HTML ? Comment définir la grasse des polices en CSS ? Cet article résume trois façons de mettre en gras les polices et le texte, y compris les balises grasses dans les styles gras de police HTML et CSS. Il a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

Il existe trois façons de mettre en gras les polices et le texte. L'une est le poids de la police : le style gras en CSS, l'autre est la balise La balise

Méthode 1 : Utilisez le style font-weight: bold en CSS pour rendre la police en gras

L'attribut font-weight peut définir l'épaisseur de la police, lorsque la valeur de l'attribut est normal , indiquant une police normale, ce qui équivaut à un nombre de 400 ; lorsque la valeur de l'attribut est en gras, la police peut être en gras, ce qui équivaut à un nombre de 700, ce qui équivaut également à l'effet de la balise

Description de l'instance : créez deux balises p et donnez à l'une des balises un nom de classe pour faciliter le style CSS. Ajoutez l'attribut font-weight: bold à la balise p avec le nom de la classe. Comparez les deux balises p pour voir la différence. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{font-weight: bold;}
</style>
</head>
<body>
<p>床前明月光</p>
<p class="aa">低头思故乡</p>
</body>
</html>
Copier après la connexion

Comme le montre la figure ci-dessous, « Regardez en bas et réfléchissez » Le texte « Ville natale » a été mis en gras.

Trois façons de mettre les polices en gras en HTML et CSS

Méthode 2 : utilisez la balise bold en HTML

Coarse, et tous les principaux navigateurs prennent en charge cette méthode.

Exemple de description : utilisez directement la balise en HTML pour obtenir l'effet de texte en gras. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<strong>疑是地上霜</strong>
</body>
</html>
Copier après la connexion

Comme le montre la figure, comparez le. Balise p et Le contenu de la balise forte s'avère être en gras.

Trois façons de mettre les polices en gras en HTML et CSS

Méthode 3 : Utiliser la balise grasse en HTML

texte, et tous les principaux navigateurs prennent en charge la balise

Exemple de description : la balise est la même que la balise , vous pouvez mettre du texte en gras et elle est simple et pratique à utiliser. suit :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<b>举头望明月</b>
</body>
</html>
Copier après la connexion

Comme le montre l'image ci-dessous, le texte dans la balise b est en gras

Trois façons de mettre les polices en gras en HTML et CSS

Résumé : Le ci-dessus vous présente les trois méthodes pour mettre du texte en gras. Il existe deux méthodes : le style gras en CSS et la balise et Quant à la méthode à choisir, cela dépend des habitudes personnelles et du travail. Oui, j'espère que cet article vous sera utile !

【Tutoriels associés recommandés】

1. Trois façons d'ajouter du texte barré en utilisant HTML et CSS (images et texte)

2. >Tutoriel HTML

3.

Manuel HTML en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal