En savoir plus sur CSS
Nous allons explorer d’autres manières par lesquelles CSS peut rendre votre contenu plus facile à gérer et plus intéressant pour vos lecteurs.
Commentaires
Comme n’importe quel autre langage informatique, CSS prend en charge les commentaires. Pour commenter une section dans le fichier CSS, utilisez /* comment */.
/* identifie le début du commentaire et */ marque la fin. Un commentaire CSS peut couvrir plusieurs lignes de texte. Les commentaires sont un excellent moyen de laisser des notes pour vous-même ou d’autres développeurs, ou pour prendre des notes lors de l’apprentissage du langage.
Important
Les commentaires CSS sont publics et accessibles à la fois par le navigateur et les utilisateurs de votre site web. Ne stockez pas d’informations sensibles dans des commentaires.
Les commentaires CSS ont une mise en forme différente des commentaires HTML. Les commentaires au format HTML utilisent la syntaxe <!--comment-->.
Définition des polices
Vous pouvez utiliser CSS pour indiquer au navigateur la police que vous souhaitez utiliser pour un texte spécifique. Parfois, vous souhaiterez utiliser Arial pour la lisibilité et quelque chose d’un peu plus original pour le style. L’image suivante montre du texte en Arial et un autre texte dans une police nommée « Impact ».
L’option la plus courante pour définir la police à utiliser dans une page est font-family.
font-family est généralement défini sur une liste de polices, ce qui permet au navigateur d’utiliser la première police listée qu’il est capable de prendre en charge. Par exemple, un paramètre de tentatives d’utilisation de Tahoma, suivi de Tahoma, Verdana, sans-serif Verdana, et enfin une police générique sans empattement.
Vous pouvez également utiliser d’autres options, telles que le style, le poids et la décoration.
font-style sert à mettre du texte en italique en définissant la valeur sur italic.
font-weight prend en charge différents paramètres de mise en gras, bold étant le plus courant. Pour finir, text-decoration sert à appliquer une mise en forme underline, overline ou line-through à du texte.
| CSS | Résultat |
|---|---|
font-weight: bold; |
Démonstration |
font-style: italic; |
Démonstration |
text-decoration: line-through; |
|
text-decoration peut sembler différent des autres options utilisées pour modifier l’affichage d’une police. La principale différence est que text-decoration sert à appliquer un style autour du texte ou sur le texte, sans modifier la police proprement dite. La mise en gras et en italique modifie la police.
Notes
L’utilisation du soulignement sur une page Web doit généralement être évitée, car le texte peut sembler être un lien hypertexte.
Dimensionnement des polices
font-size vous permet d’indiquer la taille de police que vous souhaitez utiliser. CSS offre la possibilité d’utiliser un dimensionnement absolu ou relatif. Le dimensionnement absolu est généralement défini en pixels et utilise toujours la taille spécifiée. Le dimensionnement relatif peut être basé sur la taille par défaut du navigateur, et il est mesuré en pourcentage ou est basé sur le dimensionnement de l’élément de référence.
Notes
La taille de police par défaut pour de nombreux navigateurs est de 16 pixels.
Le dimensionnement absolu peut être mesuré en pixels, et il est indiqué en CSS à l’aide de px. Pour définir une police sur 14 pixels, vous pouvez utiliser la directive font-size: 14px;.
Le dimensionnement relatif des polices est généralement mesuré à l’aide de em ou rem.
em est l’abréviation d’element, et est relatif au parent (em) ou à la racine (rem). La racine est l’élément html.
1em ou 1rem est égal à la taille de l’élément parent ou racine, alors que 2em ou 2em serait le double de la taille. Étant donné que les tailles d’écran peuvent varier, il est généralement préférable d’utiliser un dimensionnement relatif dans la mesure du possible.
Prenons l’exemple de code HTML et CSS suivant :
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
Si l’élément est de 14 pixels parce que le parent est div et défini sur 14px, tandis que 1rem serait de 18 pixels car la html racine est définie sur 18px.div1em
1.5em pour l’élément div serait 21 pixels (14 * 1,5 = 21), et 1.5rem serait 27 pixels (18 * 1,5 = 27). Vous pouvez utiliser em et rem pour vous assurer que le reste de la page est mis à l’échelle lorsque vous mettez à jour la taille parente ou racine.
Couleurs
La couleur de police peut être définie à l’aide de la propriété color.
color peut être définie sur des valeurs RVB (rouge, vert, bleu) ou sur l’une des nombreuses couleurs nommées comme black ou lightgray.
Les valeurs RVB en CSS peuvent être des valeurs hexadécimales précédées d’un #, ou des valeurs comprises entre 0 et 255 à l’intérieur de la fonction rgb. Pour définir la couleur sur la nuance par défaut de brun, vous devez utiliser color: brown;. Pour une nuance de violet personnalisée, vous pouvez utiliser color: #7462e0.
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
Important
La sélection des couleurs doit toujours prendre en compte les personnes ayant une déficience de la vision des couleurs. Vous pouvez utiliser des outils tels que Color Safe pour faciliter la sélection de couleurs contrastantes afin de garantir l’accessibilité de votre site à tous les utilisateurs.
Comme vous pouvez le soupçonner, il existe des dizaines de couleurs nommées disponibles, et les valeurs RVB offrent un ensemble infini d’options. Des éditeurs comme vscode.dev ou Visual Studio Code peuvent vous aider à identifier les valeurs de couleur disponibles. Les deux éditeurs affichent un aperçu de l’échantillon de couleur dans votre CSS. Si vous passez la souris sur l’échantillon, un sélecteur de couleurs s’affiche et vous permet de définir la couleur que vous désirez.
