Style de police CSS
Le style de police
| Nom d'attribut | sens | Par exemple |
|---|---|---|
| famille de polices | Définir le type de police | font-family: "Script officiel" |
| taille de police | Définir la taille de la police | taille de la police: 12px |
| font-style | Définir le style de police | style de police: italique |
| poids de la police | Définir l'épaisseur de la police | font-weight: gras |
| Police de caractère | Définir toutes les propriétés de police | police: italique gras 36px "Arial" |
propriété font-family
.p1{ font-family: "隶书";}
.p2{font-family: "黑体"; }
.p3{ font-family: "Arial Black"; }
Exemple de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-family: "隶书";}
.p2{
font-family: "黑体"; }
.p3{
font-family: "Arial Black"; }
</style>
<title></title>
</head>
<body>
<h1>不加修饰的一级标题</h1>
<h1 class="p1">一级标题隶书</h1>
<h1 class="p2">一级标题黑体</h1>
<h1 class="p3">一级标题Arial Black</h1>
</body>
</html>
Capture d'écran d'effet:
attribut font-size
Unité: px (pixel)
.p1{font-size: 10px; }
.p2{font-size: 20px;}
.p3{font-size: 30px;}
Exemple de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-size: 10px; }
.p2{
font-size: 20px;}
.p3{
font-size: 30px;}
</style>
<title></title>
</head>
<body>
<h1>这是正常的一级标题</h1>
<h1 class="p1">这是10px的一级标题</h1>
<h1 class="p2">这是20px的一级标题</h1>
<h1 class="p3">这是30px的一级标题</h1>
</body>
</html>
Capture d'écran d'effet:
attribut de style de police
normal 、 italique 和 oblique
.p1{font-style: normal; }
.p2{font-style: italic;}
.p3{font-style: oblique;}
Exemple de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-style: normal; }
.p2{
font-style: italic;}
.p3{
font-style: oblique;}
</style>
<title></title>
</head>
<body>
<h1>这是正常的一级标题</h1>
<h1 class="p1">这是normal的一级标题</h1>
<h1 class="p2">这是italic的一级标题</h1>
<h1 class="p3">这是oblique的一级标题</h1>
</body>
</html>
Capture d'écran d'effet:
attribut font-weight
normal La valeur par défaut, définit la police standard.
gras police gras.
.p1{font-weight: normal; }
.p2{font-weight: bold ;}
Exemple de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-weight: normal; }
.p2{
font-weight: bold ;}
</style>
<title></title>
</head>
<body>
<p>这是正常的字体</p>
<p class="p1">这是normal的字体</p>
<p class="p2">这是bold的字体</p>
</body>
</html>
Capture d'écran d'effet:
attribut de police
L'ordre des attributs de police: style de police → épaisseur de police → taille de police → type de police
.p1{font:oblique bold 12px "楷体"; }
Exemple de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font:oblique bold 12px "楷体"; }
</style>
<title></title>
</head>
<body>
<p>这是正常的字体</p>
<p class="p1">这是font:oblique bold 12px "楷体";的字体</p>
</body>
</html>
Capture d'écran d'effet:
Ecrire n'est pas facile, si cela vous est utile après la lecture, merci pour votre soutien!
Si vous êtes sur un ordinateur, vous verrez "Une triple connexion clé"Avez-vous raison, cliquez dessus à droite [haha]
Allons!
Travailler ensemble!
Keafmd