Maison > interface Web > Questions et réponses frontales > CSS définir la police Web

CSS définir la police Web

PHPz
Libérer: 2023-05-09 09:05:07
original
1389 Les gens l'ont consulté

CSS est l'abréviation de Cascading Style Sheets et est un langage utilisé pour le style des sites Web. Parmi eux, la définition des polices Web est un aspect important du CSS. Comment utiliser CSS pour définir les polices Web nous apportera une meilleure expérience visuelle et améliorera la lisibilité et le professionnalisme de la page. Cet article présentera principalement les paramètres liés aux polices dans CSS, notamment le style de police, la taille de la police, la couleur de la police, etc.

1. Style de police

En CSS, le paramétrage du style de police se fait via les deux attributs font-family et font-style. Parmi eux, l'attribut font-family est utilisé pour spécifier le nom de la police, et l'attribut font-style est utilisé pour spécifier le style de police, notamment normal (normal), italique (italique) et oblique (italique).

Exemple de code :

p{
    font-family: Arial, "Microsoft Yahei", sans-serif;
    font-style: italic;
}
Copier après la connexion

Dans le code ci-dessus, nous avons utilisé trois polices : Arial, "Microsoft Yahei" et sans-serif comme polices alternatives. Si la police Arial ou « Microsoft Yahei » n'est pas installée sur l'ordinateur de l'utilisateur, la police sans empattement du système sera utilisée par défaut.

2. Taille de la police

En plus du style de police, la taille de la police peut également être définie en CSS, c'est-à-dire l'attribut font-size. La taille de la police est généralement mesurée en pixels (px) ou em. Parmi eux, 1em représente la taille de police de l'élément actuel. Si vous devez la définir sur deux fois la taille de l'élément actuel, utilisez 2em.

Exemple de code :

p{
    font-size: 16px;
}
Copier après la connexion

Dans le code ci-dessus, nous définissons la taille de la police à l'intérieur de la balise p sur 16 pixels. Si vous devez définir la taille de police de toutes les balises p sur la même valeur, vous pouvez utiliser le caractère générique (*) pour sélectionner tous les éléments.

*{
    font-size: 16px;
}
Copier après la connexion

3. Couleur de la police

En plus du style et de la taille de la police, la couleur de la police est également l'un des attributs importants pour définir les polices en CSS. Nous pouvons utiliser l'attribut color pour définir la couleur de la police. Cet attribut prend en charge toutes les expressions de couleur en CSS, telles que les noms de couleurs, les valeurs RVB, les valeurs HEX, etc.

Exemple de code :

p{
    color: #333;
}
Copier après la connexion

Dans le code ci-dessus, nous définissons la couleur de la police à l'intérieur de la balise p sur la valeur de couleur HEX #333. Semblable à la définition de la taille de la police, si vous souhaitez définir la couleur de la police dans toutes les balises p sur la même couleur, vous pouvez utiliser des caractères génériques pour sélectionner tous les éléments.

*{
    color: #333;
}
Copier après la connexion

Conclusion :

Dans la conception Web, la configuration des polices est un aspect très important. En définissant des polices Web avec CSS, nous pouvons améliorer la lisibilité et l'esthétique de la page Web, permettant ainsi aux utilisateurs de naviguer sur le Web plus confortablement. Dans les applications pratiques, nous devons non seulement maîtriser les compétences en matière de définition de polices en CSS, mais également procéder à des ajustements raisonnables en fonction de la situation réelle pour que la page présente un meilleur effet.

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!

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