Les feuilles de style CSS (5/15) - Textes et polices

Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui, nous allons traiter les textes et les polices. Considérons le code HTML suivant. Dans la balise body, nous avons intégré la balise h1 et la balise div. Et à l'aide de CSS, nous allons essayer de styler ce contenu. Maintenant, nous avons allé sur la feuille de style CSS et nous avons intégré le style sélecteur concerné, par exemple h1. Première chose à faire déjà, c'est changer la couleur par défaut parce que si j'exécute la page telle qu'elle est, je vais voir que le titre h1 est relativement gros alors que la balise div c'est un texte par défaut qui mesure 12 points. Les deux textes, ils ont été appliqués avec le rendu par défaut et principalement avec la couleur noire. Pour changer la couleur, il suffit de mettre la propriété color. Alors color, Et comme nous avons vu sur la vidéo consacrée aux couleurs, on peut définir la couleur de 4 manières différentes. Par exemple, je vais mettre ici F0F. Alors ce code, ça va donner du magenta. Quand j'exécute, je vais voir que le titre a changé de couleur. Même chose pour la balise div. Alors il suffit de mettre ici div et là pour color, mettre par exemple RGB et là par exemple 255, 0, 0, ça veut dire rouge. Voilà, et comme ça j'ai changé la couleur par défaut. Mais il n'y a pas que la couleur que l'on peut changer, on peut aussi agir sur le style du texte. Imaginez que je veux centrer le texte H1, alors dans ce cas je vais utiliser les propriétés text, bien sûr avec les sous-propriétés qui vont aller avec. Par exemple ici text-align et je vais mettre une des 4 valeurs possibles, à savoir left, right, center ou bien justify. Quand je mets center, ça veut dire que le texte sera centré sur la page. Et voilà, donc maintenant j'ai un titre H1 qui est centré. Même chose pour la balise div, mais les différentes valeurs possibles, il y a center, il y a aussi left, ça veut dire à gauche, qui est la valeur par défaut. Right, ça veut dire à droite. Justify, ça veut dire un texte justifié. Bon, le justifié, c'est surtout pour les paragraphes où vous avez plusieurs lignes. Nous allons remettre la valeur par défaut qui est left. Ensuite, nous allons voir text-decoration. Text-decoration permet tout simplement de souligner un texte ou bien de le surligner, voire même de le barrer. Si on met underline, alors underline permet de souligner le texte comme ça pour le titre H1. Il y a aussi overline qui permet de surligner, ou bien line-through. Dans ce cas, vous aurez un texte barré. C'est le même effet que la balise <s>. On peut bien sûr combiner plusieurs styles de text-decoration, par exemple overline et underline. L'ordre n'est pas important. N'oubliez pas de séparer par un espace blanc. Dans ce cas, on va appliquer les 3 styles simultanément et on aura un texte qui est barré, souligné et surligné. On va en conserver juste un seul, par exemple underline. Ensuite il y a text-indent, ce qu'on appelle l'indentation du texte ou bien l'alignement. C'est-à-dire que le texte par défaut il commence à cette position-là, si je veux qu'il soit un petit peu en retrait par rapport à la position de base, alors il suffit d'appliquer une indentation avec une valeur en pixels. Par exemple là je vais mettre 40px. Quand j'actualise, je vais voir que le titre est est un petit peu décalé vers la droite. Bien sûr, l'indentation, ça concerne surtout les paragraphes où vous avez plusieurs lignes. On a généralement la première ligne qui est un petit peu en retrait par rapport aux autres. On appelle ça l'alignement ou bien l'indentation. Il existe aussi le style text-transform. Text-transform permet tout simplement de changer l'apparence du texte. Ici, nous avons le titre qui commence par une majuscule. Si je veux tout mettre en majuscule, alors il suffit de mettre ici uppercase. Donc uppercase permet tout simplement de tout remettre en majuscule automatiquement. C'est-à-dire on n'est pas obligé de changer le contenu HTML, il suffit d'appliquer ça avec le CSS. On peut aussi mettre lowercase, dans ce cas tout le texte sera écrit en minuscule. Voilà. Ou bien capitalize, dans ce cas le texte sera capitalisé. Avec capitalize, nous allons voir que les premiers caractères de chaque mot seront mis en majuscule. Voilà ce qu'on appelle l'effet capitalisé. Il y a aussi la propriété letter-spacing qui va appliquer un espacement personnalisé entre les caractères. Par exemple, on va mettre 10 pixels. Alors les caractères sont espacés de 10 pixels sur le titre H1. On peut aussi agir sur la police des textes. Par exemple, bon, pour simplifier, je vais effacer tous ces styles et maintenant je vais mettre les styles qui sont préfixés par font. On va commencer par font-style. Font-style, il accepte 2 valeurs, soit italic ou bien normal. Normal, c'est la valeur par défaut, c'est-à-dire le texte sera appliqué avec le rendu par défaut. Si je mets italic, alors tout simplement le texte sera italique, c'est-à-dire sera oblique. Voilà, comme ça, c'est un peu comme l'effet de la balise i. Il y a aussi font-size. Dans ce cas, pour font-size, il suffit d'appliquer une taille autre que la taille par défaut, par exemple une titres H1, ils mesurent 24 points par défaut. Si je veux agrandir la police, il suffit de prendre une valeur supérieure, par exemple 32 points, et j'aurai un titre plus gros. Bon, pour les unités, on peut bien sûr mettre les points, les pixels, em, ou bien le pourcentage. Em et pourcentage sont des mesures relatives, et points et pixels, ce sont des mesures absolues. Moi personnellement, je préfère utiliser le point. Il y a aussi font FontVariant. Dans ce cas, FontVariant, il va transformer l'apparence du texte. Bon, tout à l'heure avec text-decoration, nous avons pu transformer le texte en majuscule ou bien en minuscule. Ici, on peut par exemple le transformer en ce que l'on appelle les petites majuscules grâce à smallCaps. Avec smallCaps, on aura le texte qui sera écrit de cette manière. Nous avons les majuscules qui sont conservées alors que toutes les minuscules ont été transformées en ce que l'on appelle des petites majuscules. Ça veut dire ce sont des caractères qui ont la forme des majuscules mais la taille des minuscules. L'autre valeur c'est normal, donc là c'est la valeur par défaut. Ça veut dire c'est comme si vous n'appliquez pas de style, alors par défaut il va reprendre la valeur normal. Ensuite il y a font-weight, ce qu'on appelle la graisse de la police, bon afin d'appliquer le gras. Et aussi il accepte 2 valeurs à savoir normal ou bien bold. Pour bold, ça veut dire gras. Mais regardez bien ce qui va se passer. Rien ne s'applique parce que par défaut les titres H1 sont déjà en gras. Alors là, je vais plutôt faire l'inverse, c'est normal. Ça veut dire je veux supprimer la graisse et le titre maintenant est démuni de graisse. Par contre, pour la balise div, je peux mettre font-weight bold. Dans ce cas, elle sera transformée en gras. Dernier style maintenant, c'est font-weight. Family. Alors pour font-family, il permet tout simplement d'appliquer une police. Bon, parce que par défaut le texte est écrit en Times et c'est une police qui n'est pas très appropriée aux pages web, alors je vais plutôt utiliser la police Arial. Maintenant le titre H1, il a changé de police. Voilà, imaginez maintenant que je voudrais appliquer une police un peu plus spectaculaire, c'est-à-dire une police qui n'est pas très courante, comme par exemple Rondadoo. C'est une police Ronda utilisée surtout par les infographistes. Quand je vais appliquer, je vais voir que la police Times a été appliquée. Ça veut dire que Ronda ne s'est pas appliquée correctement et c'est normal parce qu'il faut que la police soit installée chez le client pour qu'elle soit reprise par le navigateur. Dans ce cas, ce qu'on va faire, c'est quoi? On va donner au navigateur le premier choix, c'est Ronda. Ensuite, on va mettre Arial, c'est-à-dire que si le navigateur ne rencontre pas la police Ronda, il peut directement switcher vers Arial. Et dans ce cas, il applique le Arial. On peut bien sûr mettre des valeurs successives de cette manière, mais généralement la troisième valeur, on va mettre quelque chose qui ressemble à ça: sans-serif. Sans-serif, on appelle ça la famille générique. En réalité, il y a beaucoup de familles génériques, mais les plus connues sont serif, sans-serif et monospace. Sans-serif, ça veut dire que ce sont des polices à bâtons, bien des polices sans empattement. C'est un petit peu comme les Arial, comme les Verdana, Tahoma. Ce sont des polices qui sont écrites d'une manière un petit peu spéciale. On les appelle des sans-sérif. Et c'est généralement la famille la plus utilisée pour l'affichage des sites web. Alors en général, ce qu'on va faire, c'est quoi? Par exemple, vous sélectionnez la première police de votre choix, deuxième police alternative, et la dernière police vous mettez sans-sérif au cas où la première et la deuxième ne sont pas retrouvées sur l'ordinateur du client. Dans ce cas, le navigateur, il va se charger de choisir automatiquement la première police sans-sérif qu'il rencontre sur le système. Tout à l'heure, j'ai dit que si la police n'est pas retrouvée par le navigateur, alors automatiquement il va appliquer la police par défaut, ou bien il va suivre la chaîne jusqu'à ce qu'il trouve la police installée et ensuite il va l'appliquer. Mais imaginons que vous avez une police qui vous plaît tellement et vous voulez quand même afficher votre page avec. Alors dans ce cas, on va tout simplement utiliser ce que l'on appelle des polices embarquées. Pour faire ceci, je vous montre un exemple simple. Regardez, c'est un code qui est déjà prêt. On va commencer notre page par une déclaration qu'on appelle une déclaration@ parce que ça commence par l'arobase ou bien le caractère@. Il porte le nom font-face. On appelle ça une règle@. On ouvre des accolades et ensuite on va spécifier le nom de la police. Par exemple, c'est un nom qui vous appartient, appelez votre police comme vous voulez. Ensuite, on va spécifier la source, ça veut dire que la police on a déjà un dossier sur le serveur. Il suffit maintenant de l'associer à ce nom-là pour qu'il puisse être exécuté par le client. Ça veut dire il va être téléchargé momentanément par le client, il va s'en servir pour l'affichage du site, mais une fois il va se déconnecter du site web, alors cette police sera supprimée. Voilà, alors là on va mettre les URL, ça veut dire le chemin. C'est un petit peu comme nous avons fait pour les images d'arrière-plan, on va spécifier le chemin vers la police. Et vous avez vu qu'il y a 3 chemins différents, c'est tout simplement parce que les polices ne s'exécutent pas de la même manière sur tous les navigateurs. Il y en a qui reconnaissent la forme TTF, il y en a qui reconnaissent WOFF ou bien WOFF2, il y en a qui reconnaissent EOT, etc. Il suffit de prendre votre police et la convertir en tous ces formats. Donc d'ailleurs, il y a des sites qui font ça d'une manière automatique. Et ensuite, il suffit de les appeler une à une. On sépare les déclarations par une virgule. Bien sûr, mettre point-virgule à la fin de la déclaration. Bon, on va maintenant faire cet exemple, mais uniquement avec une seule police. On va se rendre sur le projet. Alors là, nous avons la page index, un dossier qui contient les images, le dossier CSS qui contient notre feuille de style, et j'ai ajouté un dossier qui s'appelle font et qui contient les polices. Dans ce cas, ça contient une seule police qui s'appelle admin.ttf. Ce n'est pas le vrai nom, j'ai renommé. Alors là, la police, elle va ressembler à ceci. Imaginons que je voudrais afficher mon site avec cette police-là sur le client. Alors ce que je vais faire, c'est tout simplement je vais aller sur la feuille de style Et je vais commencer par déclarer la règle@ comme ça, @font-face. Ensuite je vais mettre font-family et je lui donne un nom, par exemple nom de ma police. Bon, je vais l'appeler comme ça. Ensuite je vais mettre la source avec src URL et je mettrai ici le chemin relatif ou absolu. Dans ce cas, il faut pas oublier que je suis dans le dossier CSS parce que je suis en train de saisir une feuille de style. Il faut sortir de ce dossier pour pouvoir accéder au dossier font et ensuite sélectionner ma police. Donc je vais mettre ici deux points slash font et la police s'appelle admin.ttf. Alors désormais ma police elle est disponible sur le serveur pour que navigateur puisse la télécharger au besoin. Bon imaginons maintenant que pour h1 j'ai mis ici nom de ma police. C'est la première police préférentielle. Bien sûr navigateur il va la charger s'il supporte la famille TTF. Si on exécute On va voir que la police a changé et c'est bien entendu la police admin.ttf que j'avais installée sur le serveur. Cette technique est très utilisée parce qu'elle vous permet de mettre autant de polices que vous souhaitez même s'ils ne sont pas installés chez le client, mais vous pouvez quand même vous en servir de cette manière que l'on appelle d'ailleurs les polices embarquées. Merci pour votre attention et à la vidéo prochaine.