CSS3--Comment ajouter des styles de police et de couleur au texte

Ce chapitre peut rendre le texte de votre page Web plus beau

À propos de certaines propriétés du texte

• font-family : Police de texte

• taille de la police : taille du texte

• couleur : couleur du texte

• poids de la police : texte épaisseur

• text-decoration : plus de styles de texte

font-family (famille de polices)

Il y a cinq séries au total : sans-serif (pas d'empattement), serif (serif), monospace (largeur égale), cursive (cursive... c'est l'intention originale), fantasy ( Fantasy ? ) Regardez sur l'image de droite

Comment fonctionne la famille de polices en CSS

body {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

Vérifiez s'il y a Verdana dans l'ordinateur du client. Si c'est le cas, utilisez Verdana pour afficher le texte. Sinon, vérifiez s'il y a Genève. Sinon, vérifiez s'il y a Arial. ordinateur client. police serif (généralement chaque ordinateur a une police sans-serif, remarque : sans-serif n'est pas une police spécifique)

Si le nom de la police contient des espaces, vous pouvez mettre des guillemets. autour de ce nom, comme ceci : font-family:"Courier New", Courier;

Si je veux vraiment que l'utilisateur puisse utiliser la police que je spécifie, et je ne sais pas s'il a it Font

La police Web est là !

Comment utiliser

1. Trouver un fichier de police : le nom du suffixe est woff, svg, eot, otf, ttf

2. Pour placer cette police sur le Web, vous pouvez utiliser le service d'hébergement de polices de Google, qui est gratuit

3. Ajouter l'attribut @font-face en CSS

   @font-face {
   	font-family:"Emblema One";
   	src:url("www.某网站.com");
   }/*那个网址就是字体URL */

   À l'heure actuelle, cela équivaut à créer une police nommée Emblema One sur la machine de l'utilisateur

4. Utilisez-la comme une police locale. où la police est utilisée. Après @font-family

L'inconvénient est qu'il faudra un peu de temps pour charger la police, donc la première fois. le client visite votre site Web et il n'a pas la police Cela prendra un certain temps

Ajuster la taille de la police

Il existe trois unités de police : px ( pixel), %, em (qui est un multiple, em=% divisé par With 100)

h1 {
	font-size:220%;
}

Il existe également un moyen de spécifier la taille de la police - mots-clés (xx-small, x-small, petit, moyen, grand, x-large, xx-large)

La taille représentée par chaque mot clé n'est pas certaine, cela a quelque chose à voir avec le client

Alors, comment dois-je spécifier la taille du texte ?

Tout d'abord, vous pouvez définir la taille du texte de peut obtenir la taille par défaut du côté client. Ceci est couramment utilisé de l'autre côté. Après la taille de

, vous pouvez utiliser le pourcentage ou em pour ajuster la taille d'un autre texte (tel que). comme titres de premier niveau) par rapport à la taille du texte de . Il n'est pas recommandé d'utiliser px ici. Les pixels représentent la taille de la police

. du texte, la mise à l'échelle ne sera pas prise en charge dans les anciennes versions des navigateurs IE

Modification de l'épaisseur de la police

Il existe cinq tailles de mots clés, à savoir : gras (gras). , plus audacieux (plus épais), hériter (hériter de l'épaisseur du niveau précédent), plus léger (plus fin) ), normal (normal)

Il existe également un moyen de définir le poids de la police sur un nombre compris entre 100 et 900 (Multiple de 100)

Ajouter un style à la police

Il existe quatre types : hériter (hériter de papa), italique (italique), normal (normal), oblique ( Italique)

La différence entre l'italique et l'oblique est que le premier utilise l'italique de cette police, et la méthode d'affichage est dans le fichier de police, tandis que ce dernier met directement en italique les mots normaux. . . Mais ça semble être à peu près pareil

颜色

Demo设置的颜色

body {
	background-color:red;
	background-color:rgb(80%, 40%, 0%);
	background-color:rgb(204, 102, 0);
	background-color:#66ccff;
}

这是四种设置颜色的方法，第一种是关键字，这个一般是小学生在用的吧，支持的颜色不多

第二种是使用rgb（red、green、blue）百分比，那些百分比意思是依次是红/绿/蓝的量（怎么说呢，越大就越含有这个颜色）

第三种和第二种相似，只不过从0%~100%改成了0~255

最后一种是十六进制码，意思是：

前两个代表红的十六进制、中间两个是绿的、最后两个是蓝的

把十六进制转成10机制就变成了第三种设置颜色的方法了

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

    不多说，直接看效果：blink inherit line-through none overline underline

BULLET POINTS

• CSS fournit de nombreuses propriétés pour contrôler l'apparence des polices, notamment font-family, font-weight, font-size, font-style, etc.

• font-family est un groupe de polices ayant des caractéristiques communes

• Les familles de polices utilisées pour le Web incluent serif, sans-serif, monospace, cursif, fantaisie. serif et sans-serif sont les plus couramment utilisés

• Les polices que vos visiteurs voient sur vos pages Web dépendent des polices installées sur leur propre ordinateur, sauf si vous utilisez des polices Web

• C'est une bonne idée de spécifier les polices candidates dans la propriété CSS font-family au cas où l'utilisateur n'aurait pas installé votre police préférée

• La dernière police vouloir une police générique, telle que serif ou sans-serif, afin que si aucune autre police n'est trouvée, le navigateur puisse la remplacer par la police appropriée

• Si vous souhaitez utiliser une certaine police police, Bien que l'utilisateur n'ait pas cette police installée par défaut, vous pouvez utiliser la règle @font-face

• La taille de la police est généralement spécifiée par mots-clés, pixels px, pourcentage, em

• Si vous utilisez des pixels pour spécifier la taille de la police, vous indiquez au navigateur combien de pixels est la hauteur de la lettre

• em et % sont tailles de police relatives, utilisez donc em. Lorsque vous spécifiez une taille de police avec %, cela signifie que la taille de police est déterminée par rapport à la taille de police de son élément parent

• L'utilisation de tailles de police relatives peut faire votre page plus maintenable

• Utilisez le mot-clé taille de police dans la règle du corps pour définir la taille de police de base de sorte que si l'utilisateur souhaite que le texte soit plus grand ou plus petit, tous les navigateurs peuvent redimensionner la taille de la police proportionnellement

• Le texte peut être mis en gras à l'aide de la propriété CSS font-weight

• La propriété font-style est utilisée pour créer de l'italique ou texte en italique. Le texte en italique ou en italique est incliné

• Les couleurs du Web sont obtenues en mélangeant différentes quantités de rouge, de vert et de bleu

• if Mix rouge 100%, vert 100%, bleu 100% pour obtenir du blanc, tous les 0% sont noirs

• Il y a 16 couleurs de base en CSS et plus de 150 couleurs étendues

• Vous pouvez utiliser des pourcentages de rouge, de vert et de bleu pour spécifier la couleur souhaitée, ou vous pouvez utiliser des valeurs numériques (0 ~ 255) ou des codes hexadécimaux

• Pour trouver le code hexadécimal de la couleur souhaitée, utilisez l'outil de sélection de couleurs dans votre application de retouche photo

• Le code hexadécimal représentant une couleur comporte 6 chiffres. Chaque bit est 0. ~F, les deux premiers représentent le nombre de rouge, les deux du milieu sont verts et les deux derniers sont bleus

• Vous pouvez utiliser l'attribut text-decoration Créez un trait de soulignement pour cela. Les documents soulignés sont souvent confondus avec le texte d'un lien par les utilisateurs, utilisez donc cet attribut avec prudence

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!