Typographie Web pour les débutants : Décorez votre texte avec HTML et CSS

1. Introduction: Bonjour, je suis Brent Miller et aujourd'hui je vais vous apprendre à mettre en œuvre une typographie créative et accrocheuse sur les pages Web. Ces dernières années, j'ai écrit du code derrière des sites web. J' ai travaillé sur des applications professionnelles avec l'accent mis sur les étiquettes d'entrée et les astuces d'outils et un style professionnel propre. J' ai également travaillé sur de nombreux sites Web de brochures avec des en-têtes audacieux et artistiques et du contenu long. Après avoir terminé ce cours, vous serez en mesure de prendre une conception de type sophistiquée d'un concepteur et de mettre en œuvre ce design en détail dans une page Web de travail réelle. Si vous êtes le genre de personne qui aime concevoir vos propres designs, vous aurez une bien meilleure compréhension de la façon dont le texte stylisé fonctionne pour le Web. Vous aurez un ensemble de techniques à votre disposition pour expérimenter ces détails. Vous développerez également une meilleure connaissance du HTML et du CSS en général. Si vous êtes intéressé par la conception Web ou le développement Web de manière plus générale, vous disposez d'une base plus solide de connaissances dans ces domaines. Je suppose que vous êtes au moins intéressé par le lettrage, la typographie ou le web design. Vous n'avez pas besoin d'être un designer professionnel pour réussir ce cours. Mais si c'est le cas, vous allez ramasser quelques nouvelles astuces. Vous n'avez pas besoin de connaître de programmation avant de commencer, cependant, si vous avez une connaissance très basique du HTML et du CSS, vous trouverez cette connaissance utile. Si vous avez des questions au fur et à mesure que nous progressons dans ce cours, n' hésitez pas à les poster ici dans le cours. Vous pouvez également me contacter sur Twitter ou LinkedIn. Je vous encourage également vivement à publier vos projets ici dans ce cours, que vous les ayez terminés ou non. Si vous êtes coincé dans un problème, n' hésitez pas à publier votre projet en tant que « travail en cours » et à demander des commentaires. Peu importe la façon dont vous tendez la main, je m'engage à vous aider à réussir et à répondre à toutes les questions que vous pourriez avoir. C' est ça. Nous sommes prêts à commencer. Plongons et je te verrai dans la première leçon. 2. Configurer le projet: Cette leçon est tout au sujet du projet de cours. Il couvre ce que vous allez faire tout au long du cours et comment commencer. Sur l'écran, nous voyons une page Web simple. C' est la page à propos de nous pour le site de la bibliothèque fictive de Letterville. Il ne se passe pas grand-chose ici à part la typographie. Pour ceux d'entre vous qui veulent garder les choses simples, faire cette page sera votre objectif. Je vais vous emmener à travers toutes les étapes nécessaires pour passer du texte brut à ceci. Si vous prévoyez de suivre mon exemple de projet, voici deux liens importants. J' ai posté ces liens dans les notes de cours, alors n'hésitez pas à les copier et à les coller. Ils vous montrent ce que vous allez commencer, et ce que vous allez finir avec. Vous n'avez pas à suivre mon exemple de projet. Cependant, certains d'entre vous peuvent avoir vos propres objectifs et projets en tête pour la typographie web. Certains d'entre vous pourraient penser, je suis un concepteur horrible et que vous pouvez faire beaucoup mieux avec cet exemple de page. Ces deux positions sont très bien. N' hésitez pas à mettre en œuvre le projet que vous voulez. Pour le reste de ce cours, cependant, j'utiliserai cette démo de la bibliothèque de Letterville comme référence principale. Parlons maintenant de CodePen. Vous avez peut-être remarqué tous ces trucs supplémentaires sur notre page Web. C' est parce que j'héberge ce projet sur CodePen. Codepen est un terrain de jeu pour construire des projets web simples et des prototypes, qui est exactement ce que nous faisons dans ce cours. Si vous prévoyez de suivre mon exemple de projet, vous allez utiliser CodePen. Beaucoup d'entre vous demandent probablement : « Hé Brent, tu me demandes de créer un autre compte en ligne ? » Eh bien, la réponse est peut-être, à proprement parler, non, vous n' avez pas besoin de créer un compte CodePen pour réussir dans ce cours, mais vous trouverez plus facile de partager votre travail ou d'y revenir plus tard si vous avez un compte. Je ne vais pas entrer dans les détails de la création d' un compte CodePen dans ce cours parce que c'est super simple. Une fois que vous êtes sur CodePen, il suffit de cliquer sur ce bouton d'inscription en haut de l'écran pour commencer. La dernière étape pour préparer votre projet à travailler, est de fourcher mon projet de démarrage. Forking est juste un lingo de programmeur fantaisie pour faire une copie. Allons au projet de démarrage de la Bibliothèque de Letterville. Il y avait un lien sur cette diapositive, et il y a aussi un lien vers le bas dans les notes de cours. C' est le projet de démarrage. Le contenu du texte est sur la droite, puis nous avons ces boîtes de code sur la gauche. Une fois que vous êtes connecté sur le compte CodePen, pour ceux d'entre vous qui vont utiliser votre propre compte, cliquez sur ce bouton « Fork » ici en haut de l'écran. Une fois que vous faites cela, vous devriez voir ce nom d'utilisateur ici changer de mon nom à votre nom. Ou si vous n'avez pas de compte, vous verrez les mots « capitaine anonyme » là-bas. Une fois que vous voyez ce changement de nom d'utilisateur, voila, vous avez maintenant votre propre copie de ce projet. Vous pouvez le changer, l'enregistrer, faire ce que vous voulez avec, c' est votre propre projet à partir de maintenant. Maintenant, CodePen a un ton de fonctionnalités, mais nous n'allons pas en couvrir la plupart dans ce cours. On va garder les choses simples. Je vais vous montrer juste assez de fonctionnalités ici pour compléter vos projets. Tout d'abord, ce panneau ici à gauche avec différentes sections. Nous ne sommes intéressés que par deux des sections ici, celle marquée HTML et celle marquée CSS. Si tu ne sais pas ce que ça veut dire, ne paniquez pas. C' est bon. On va couvrir tout ça, je te le promets. Les zones HTML et CSS sont là où va votre code. Remarquez qu'il y en a déjà. CodePen prendra le code de ces boîtes, et le transformera en sortie ou résultats sur cette plus grande partie de l'écran. Il le fait en temps réel, ce qui signifie que lorsque vous apportez des modifications à votre code, les résultats sont mis à jour immédiatement. Par exemple, si j'avais jusqu'à notre en-tête de la bibliothèque de Letterville, et que j'ai mis mon curseur là, et que je supprime le caractère E, attendez une seconde. Notez que le E vient de disparaître de notre page de résultats. C' est parce que CodePen recharge notre code en direct sur notre exemple de page Web. Si je retourne en arrière, et que je tape le E, attendez une seconde, puis le E revient. C' est tout ce que vous devez savoir sur CodePen. 3. Structure de votre texte avec des étiquettes HTML: Cette leçon est tout au sujet du HTML. Nous couvrons ce qu'est HTML, ce qu'il fait et comment l'utiliser. HTML signifie langage de balisage hypertexte. La définition nous donne une idée de ce que fait HTML, elle marque le langage avec des balises qui donnent le sens du contenu écrit. Dans ce cours, nous allons utiliser le HTML pour deux choses une, pour donner notre structure de texte, et deux, pour fournir un style de base. En regardant notre code HTML existant ici, remarquez que ce n'est pas seulement un blob géant de texte. Il est divisé et enveloppé dans ces ensembles de mots correspondants appelés balises HTML. Jetons un coup d'oeil à notre titre de page par exemple. Donc, ici, nous avons la bibliothèque de Letterville, et cette phrase est enveloppée dans une paire de balises h1 correspondantes, et elle se traduit par cette sortie d'en-tête ici, sur la droite. Notez que la deuxième balise appelée balise de fermeture a cette barre oblique avant devant la partie h1. Tous les tags de ce cours auront ce duo d'ouverture et de fermeture qui nous amène à notre prochain bout de vocabulaire. Une balise d'ouverture vient avant le contenu du texte et n'a pas la barre oblique avant. Une balise de fermeture vient après le contenu du texte et comporte la barre oblique avant le nom de la balise. Lorsque nous mettons la balise d'ouverture, le contenu du texte et la balise de fermeture ensemble, il forme un élément HTML. Notre deuxième utilisation pour HTML est de fournir un style de base. Certaines balises HTML, mais pas toutes, fourniront à votre contenu un peu de présentation par défaut. Jetons un coup d'oeil à ce titre de page ici dans notre code. Notez qu'il est plus grand que tous les autres textes de la page plus des autres en-têtes ici dans la sortie. Le navigateur le voit, nous avons enveloppé le titre dans cette balise h1 dans notre code, et rend le titre grand et gras ici en conséquence. Voici une liste de tous les éléments HTML de notre projet de bibliothèque de Letterville. Ne paniquez pas, nous reviendrons à chacun d'eux à différents moments du cours, mais pour l'instant, je vais vous en expliquer quelques-unes. abord, nous utilisons la balise p ou un paragraphe pour définir un seul paragraphe de texte. Par défaut, les navigateurs donneront aux paragraphes un espace supplémentaire au-dessus et au-dessous. Ici, remarquez le paragraphe commençant par, nous aspirons, ici dans notre code est enveloppé en ouvrant p et en fermant les balises p et puis ici dans notre sortie, remarquez qu'il est un peu stylé comme un paragraphe avec un peu d'espace supérieur et un peu d'espace inférieur. Deuxièmement, l'étiquette forte nous donne des éléments de style audacieux. Donc, notez ici que nous avons le mot empower enveloppé dans la balise forte de début, la balise d'ouverture, et une balise de fermeture avec la barre oblique ici sur notre sortie a pris ce mot empower, et il l'a rendu en gras. Troisièmement, l'élément em définit son texte en italique. Notez que les deux premiers mots de chaque élément de liste sont enveloppés dans les balises em et remarquez comment ils sont en italique dans les résultats. Nous faisons défiler vers le bas dans le code et remarquez em tag ici autour de nous favorisons, em tag ici autour de nous agissons, et cetera. Enfin, nous allons mettre en œuvre le dernier élément de cette leçon ensemble. Vous avez probablement eu l'idée principale derrière les balises à l'heure actuelle, donc c'est un bon point pour vous de commencer à travailler. La balise marque met en surbrillance les textes avec une couleur d'arrière-plan. Revenons en arrière et regardons la première phrase du dernier paragraphe, commençant par, comment nous poursuivons. Ici, dans le code, il y a comment nous poursuivons enveloppés dans les balises de paragraphe d'ouverture et de fermeture. Nous allons donc mettre en évidence cela avec un élément de marque. Nous plaçons notre curseur juste après la balise de paragraphe d'ouverture, nous taperons la marque de mot dans nos crochets d'angle, puis ici à la fin de cette phrase après la période, nous aurons une marque avec une barre oblique avant à la balise de fermeture, et nous y allons. Nous avons défini cette première phrase comme un élément de marque, et notez ici sur notre page web, notre navigateur lui a donné cette couleur d'arrière-plan comme un moyen de la mettre en évidence. Il y a beaucoup plus de balises dans le langage HTML que ce que nous avons utilisé dans ce projet. Si vous souhaitez en savoir plus, je vous recommande de lire le guide de référence des éléments HTML de Mozilla. 4. Listes: Cette leçon explore les listes des pages Web. Nous allons expliquer comment faire des listes et comment ajuster leur présentation. Nous avons déjà un exemple de liste ici dans notre projet vers le bas. Faire la liste est assez simple et nous le faisons avec juste du HTML. Toutes les listes ont une balise externe, qui est soit une balise OL ou UL, et une ou plusieurs balises LI internes. Ici, dans notre HTML, nous avons une balise UL externe qui contient les listes entières. A l'intérieur de cela, nous avons cinq balises LI dont chacune contient le contenu d'un seul élément de liste. Ici, dans nos résultats, remarquez comment le navigateur donne à notre liste un peu de style par défaut. Chaque élément de liste commence sur une nouvelle ligne et comporte un symbole à puce à l'avant. Il existe deux types principaux de listes. Le premier, que nous voyons ici dans notre projet sont des listes non ordonnées. La liste non ordonnée affiche des puces, des disques ou d'autres symboles non numériques devant leurs éléments de liste. Nous faisons une liste non ordonnée en utilisant la balise UL. Les listes ordonnées, d'autre part, affichent un ordre séquentiel. Chaque élément de liste commence par un numéro ou une lettre devant lui. Nous faisons une liste ordonnée en utilisant la balise OL. Voici un autre exercice à compléter ensemble. Changons temporairement notre liste d'être une liste non ordonnée à une liste ordonnée. Nous mettons en évidence le U dans notre balise UL ici dans notre HTML, nous tapons un O au lieu de l'U. Notice CodePen vient de mettre à jour notre balise de fermeture pour que nous soyons une balise OL. Maintenant, dans les résultats, nous voyons que nous avons des chiffres devant la liste au lieu des puces qui étaient là avant, parce que maintenant nous avons une liste ordonnée. Mais pour notre projet final, nous ne voulons pas la liste numérotée ici. On veut la liste des bouteilles. Nous retournerons à notre HTML, sortirons cet O, remettrons le U. CodePen vient de mettre à jour notre balise de fermeture pour nous, et maintenant nous revenons à cette liste non ordonnée. Vous pouvez imbriquer une liste à l'intérieur d'une autre. Essayons ça. Ajoutons un élément de liste à la fin de notre ensemble. Nous descendons ici, nous ajouterons une autre balise LI. Puis à l'intérieur de notre étiquette LI, maintenant nous avons une étiquette de fermeture. On y va. Nous allons ajouter une autre liste. Ce sera une étiquette OL et nous allons clore ça avec notre OL. Maintenant, nous avons une deuxième liste à l'intérieur d'un élément de liste. Nous allons ajouter deux articles de liste à notre liste intérieure. Je fais juste les tags ici, notre contenu va être que j'aime. Ensuite, nous allons ajouter un LI. Ce sera des lettres comme deuxième élément de la liste. Laisse-moi faire la fin. On y va. Maintenant, nous voyons que nous avons ces listes ordonnées imbriquées à l'intérieur de nos listes externes non ordonnées. On peut toujours changer ça. Si je change l'O en U, comme on l' a fait avant, on y va. Il s'est mis à jour une seconde et ils avaient les balles là-bas. Il a un style de puces différent car il s'agit d'une liste imbriquée, mais nous la voyons toujours comme faisant partie de la liste externe. Maintenant, nous ne voulons pas de cet élément de liste supplémentaire dans notre projet final. Donc nous allons l'effacer et nous en débarrasser. Maintenant, nous revenons à ce qu'il était avant. Cela conclut notre leçon sur les listes. Si vous avez décidé que vous aimez les listes et que vous voulez en savoir plus, consultez ce tutoriel. 5. Taille de polices avec HTML: Dans cette leçon, nous allons apprendre quelques techniques pour rendre texte plus grand et plus petit avec seulement du code HTML. Nous allons commencer par les éléments d'en-tête. Notez que nous avons déjà quelques en-têtes de section sur notre écran. Ils correspondent à ces éléments H1 que nous avons dans notre code. Il existe en fait six niveaux différents d'en-têtes de section en HTML. Nous définissons le niveau d'en-tête de section par le nombre dans nos balises HTML. Notez que tous nos en-têtes de section sont le même niveau, H1, c'est H1, c'est H1, c'est H1, c'est H1 et ainsi de suite à travers les différents en-têtes que nous avons. Ainsi, dans la sortie ici sur la droite, ils ont tous la même taille. Cela ne fonctionne pas très bien du point de vue du design, il ne donne pas de hiérarchie visuelle à notre contenu. Du point de vue de la programmation, cela rend notre code plus difficile à comprendre puisque nos éléments ne communiquent pas notre hiérarchie prévue. Allons aux éléments de sous-titre des pages, l'élément A propos de nous et changeons-le en éléments H2. Je vais juste remplacer le numéro 1 et cette balise d'ouverture, le numéro 2 CodePen est mis à jour notre balise de fermeture pour nous. Maintenant, notez dans les résultats, le sous-titre vient de devenir un peu plus petit. Ensuite, changeons cet en-tête de section au-dessus de chaque paragraphe en un élément H3. Pour notre mission, je l'ai changé en un H3 pour notre vision, je la change en un H3 pour nos valeurs, un changement en et H3. Maintenant, nous avons mis à jour ces balises H3 et remarquons que l'en-tête de section est maintenant communiquer une hiérarchie visuelle et le code que nous avons ici communique notre structure prévue. Un autre élément qui change la taille du texte est le petit élément. Le petit élément est généralement utilisé pour représenter caractères fins dans un document tel qu'un droit d'auteur ou un texte légal. Il rend son contenu de texte d'une catégorie de taille plus petite. Notez que la dernière phrase de la page décrivant la licence de copyright est de la même taille que tous les autres textes. Comme il s'agit d'un avis de copyright, allons le rendre plus petit, comme une note de bas de page au-dessus de la zone d'entrée HTML, nous allons faire défiler vers le bas et nous avons remarqué que ce contenu écrit commence la phrase à l'intérieur de cette balise de paragraphe. Nous allons écrire la balise d'ouverture de petit ici dans notre code. Il y a l'étiquette d'ouverture du petit. Ensuite, à la fin de notre contenu, à la fin de cette fermeture d'une balise, nous allons faire la petite balise de fermeture juste comme ça. Maintenant, remarquez plus dans les résultats, les phrases maintenant une taille plus petite et il ressemble à une note de bas de page. Là, nous l'avons. Nous venons d'ajuster la taille de notre contenu texte à l'aide de balises HTML. 6. Fondes de dimensionnement avec CSS: Dans cette leçon, nous allons continuer à apprendre des techniques pour rendre le texte plus grand et plus petit. Cette fois, nous aurons notre premier goût d'écrire du code CSS au lieu du HTML. CSS signifie Cascading Style Sheets. Les développeurs Web l'utilisent pour définir la présentation visuelle du contenu dans les pages Web. Jetons un coup d'oeil à cette boîte CSS que j'ai brièvement mentionnée plus tôt. Il y a déjà des trucs dedans. La plupart d'entre eux sont des commentaires et ils ne modifient pas les résultats. Au lieu de cela, ils sont uniquement destinés aux développeurs à lire et ils aident les développeurs à comprendre le code. Pour notre premier morceau de code CSS, nous allons définir la taille de police de quelques-uns de nos éléments. Au bas de notre code CSS existant, nous allons écrire notre premier ensemble complet de règles CSS. Écrivons un h 1 et puis on écrira une accolade comme ça. CodePen réalise ce que nous faisons et nous a juste donné une accolade de fermeture correspondante. Appuyez sur la touche « Retour » pour nous donner notre code sur une nouvelle ligne. Ensuite, nous allons taper le mot police, tiret, la taille du mot, un deux-points , un espace, puis le chiffre quatre, les lettres r-e-m, deux-points. Maintenant, remarquez ce qui vient d'arriver à notre en-tête, notre titre en haut. C' est parce que nous venons de changer sa taille de police. Je dois mentionner que CSS est sensible à la casse. Lorsque nous écrivons du code CSS dans ce cours, il doit être en minuscules pour que cela fonctionne correctement. Discriminons ce qu'on vient de faire. Chaque jeu de règles CSS se compose de quelques composants. La partie h 1 de notre ensemble s'appelle le sélecteur. sélecteurs peuvent devenir compliqués mais dans ce cours, nous restons simples. Le h 1 signifie que les règles s'appliqueront à tous les éléments h 1 des résultats. Les accolades d'ouverture et de fermeture établissent la section où vont les déclarations. À l'intérieur des accolades vient une ou plusieurs déclarations. Une déclaration est une chose que vous souhaitez modifier sur les éléments sélectionnés. La propriété de chaque déclaration vient avant le deux-points et c'est la chose à propos de l'élément que vous voulez changer. Dans ce cas, nous voulons changer la taille de police de tous les éléments h 1. La valeur de la propriété vient après le deux-points. Il s'agit de l'apparence que vous souhaitez attribuer à la propriété. Dans ce cas, nous voulons que la police de nos éléments h 1 soit quatre fois la taille de notre police de corps. L' unité REM signifie que nous multiplions la taille de police racine par un nombre donné dans ce cas, quatre. Enfin, c'est une bonne pratique de toujours mettre fin à une déclaration par un point-virgule. Techniquement parlant, vous n'avez pas toujours à faire une habitude et vous serez couvert. Maintenant, définissons la taille de police de nos autres en-têtes après l'ensemble de règles h 1, ajoutez un sélecteur h 2. Nous ajoutons h 2, ouvrant accolade sur une nouvelle ligne. Nous utiliserons à nouveau la taille de la police. Donc c'est la taille du tiret de police, les deux-points, l'espace. Cette fois, nous allons attribuer 2 rem comme valeur. Cela signifie faire deux fois la taille de la police du corps, et notez ici notre sous-titre vient d'être plus grand en fonction de notre code CSS. Enfin, faisons la même chose pour nos éléments h 3. Ce sera le même code, mais cette fois nous allons changer l'apparence de trois éléments à la fois. Après notre sélecteur h 2, nous allons ajouter un sélecteur h 3, nous aurons nos accolades. Nous allons écrire à nouveau la propriété font-size pour la valeur font-size. Faisons 1.75 rem. Vous pouvez jouer avec des tailles si vous le souhaitez, ce sont vos projets. J'utilise 1,75. Notez alors que nos en-têtes ici sur la droite sont légèrement plus petits que le sous-titre de la page. Ils ont tous changé de valeur parce que notre jeu de règles h 3 sélectionné les trois éléments h 3 dans notre code HTML. Cela conclut notre leçon sur le dimensionnement des polices avec CSS. Si vous voulez obtenir beaucoup plus de précision avec le dimensionnement des polices, je recommande ce tutoriel sur différentes façons de dimensionner les choses en CSS. 7. Les bases de la police Web: Dans cette leçon, nous abordons ce que sont les polices Web et comment les utiliser dans votre projet. Une police Web est une police que le navigateur télécharge depuis Internet lorsqu'il charge une page Web qui utilise cette police. Cela diffère des polices natives, qui sont déjà installées sur l'ordinateur de l'utilisateur avant que le navigateur ne charge la page. Je suppose que vous savez déjà ce qu'est une police de caractères et une police. Si ce n'est pas le cas, consultez cet article de Wikipédia sur le sujet avant de poursuivre cette leçon. L' une des façons les plus simples d'incorporer une police web gratuite dans votre projet web est Google Fonts. Si vous voulez suivre avec moi, accédez à fonts.google.com. Google Fonts propose des centaines de polices Web gratuites qui catégorisent des dizaines de façons différentes. Je vous encourage à explorer ce site par vous-même. Pour ce cours, nous allons trouver et utiliser la famille de polices Lobster Two. Donc, dans la zone de recherche, tapez Homard, et vous remarquerez qu'il arrive avec deux résultats. Nous allons utiliser la police Lobster Two, et nous allons donc ajouter cette icône Plus à côté du nom de la police. Ce panneau de réduction vers le bas nous permet de savoir que nous avons sélectionné la police. Cliquez ici sur ce petit panneau pour l'agrandir. Le panneau nous donne les contrôles pour personnaliser une importation notre police sélectionnée pour notre projet. Tout d'abord, regardons cet onglet de personnalisation ici. Cela nous donne la police dans différents styles, quatre d'entre eux. Normal et gras se réfèrent au poids de la police, soit 400 et 700 respectivement, et chaque poids est livré dans un style italique et non italique. Dans ce projet, nous n'utiliserons que la face de police en gras non italique. J' ai donc choisi ces options. En revenant à l'onglet Intégrer, Google nous dit comment intégrer nos polices sélectionnées dans notre projet. Pour garder les choses simples cependant, nous allons faire les choses juste un peu différemment de ce que Google suggère. Passons à la technique d'importation, puis sélectionnez le code entre les balises de style ici. Veillez à exclure les balises de style de ce que vous sélectionnez, puis copiez-les. Revenons maintenant à notre projet. En haut de cette boîte CSS, juste après ce commentaire sur les instructions d'importation, Collez le code que nous avons copié à partir de Google. Maintenant, la face de police en gras et non en italique de Lobster Two est prête à être utilisée dans notre projet. Notre prochaine étape consiste à attribuer la police Lobster Two aux en-têtes avec la propriété de famille de polices. Regardons un ensemble de règles CSS un peu plus complexe. Notez qu'il y a deux sélecteurs, pas un. Ils sont chacun sur leur propre ligne séparée par une virgule. Cela signifie que les déclarations ici s'appliqueront à chacun des éléments spécifiés. Dans ce cas, la décoration de la famille de caractères s'appliquera à tous les éléments h1 et h3. La différence suivante est dans la valeur de la propriété. Ici, nous avons deux valeurs séparées par une virgule. La première valeur est entre guillemets doubles. La propriété font-family nous permet de spécifier une valeur primaire suivie d'une série de sauvegardes. Si le navigateur ne trouve pas la première famille de polices que nous avons demandée, il utilisera la seconde. Ici, nous demandons au navigateur d'utiliser la police Lobster Two s'il peut la trouver. Si le navigateur ne peut pas le faire, il doit utiliser les polices cursives par défaut de l'ordinateur de l'utilisateur, quelle que soit la police. Spécifier des familles de polices de sauvegarde comme celle-ci est une bonne pratique, car vous ne savez jamais quel type de problèmes peut survenir lorsqu'un utilisateur charge la police Web spécifiée. Enfin, puisque le même homard deux a un espace avec un nom, nous devons l'envelopper entre guillemets. Les guillemets indiquent au navigateur que Lobster Two est un nom de police unique et non deux noms de police. Les devis sont obligatoires ici. Implémentons cette même règle définie dans notre code CSS. Dans notre code CSS, nous allons faire défiler vers le bas. Juste en face de l'ensemble de règles h1 que nous avons déjà écrit, nous allons en écrire un nouveau. Nous allons écrire h1, puis h3, et ensuite nous aurons nos crochets bouclés, et ensuite nous allons utiliser la propriété font-family. Donc c'est la famille de polices, puis un deux-points. On va écrire Lobster 2 dans nos doubles citations, et ensuite on va lister cursive comme sauvegarde, puis un deux-points. Maintenant, notez que nous venons d'appliquer cette belle police à notre titre de page et à nos en-têtes de section. 8. Visages de polices personnalisés: Cette leçon vous apprendra comment implémenter une police personnalisée. Dans la dernière session, nous avons téléchargé une police web à partir des polices Google. Même si nous ne l'avons pas vu dans le code, Google nous a fourni une définition de font-face pour le homard deux gras, police non-italique lorsque notre navigateur l'a téléchargé à partir des serveurs de Google. On n'a pas toujours ce luxe. Parfois, nous n'avons accès qu'aux fichiers de polices brutes eux-mêmes. Dans ces cas, nous devons écrire nos propres définitions de polices. Je ne vais pas passer en revue les différents formats de fichiers de polices car beaucoup de passionnés de topographie les connaissent déjà. Si vous ne l'êtes pas, n'hésitez pas à consulter cet article. Lire comme facultatif à nos fins dans le cours. Je signale cependant que lorsque j'enregistre cette vidéo, le format de fichier le plus fiable à utiliser sur le web est le format WOFF W-O-F-F. Je vais vous montrer comment l'utiliser plus tard dans cette leçon. Pour notre projet, nous devons définir trois polices personnalisées, Roboto regular, Roboto regular Italic et Roboto bold. règles de font-face peuvent inclure plusieurs propriétés. Dans ce projet, nous n'en utiliserons que quatre. Nous avons déjà couvert la propriété de la famille de police avant. Une différence ici est que dans une règle de font-face, nous ne spécifions pas de repli. Les familles de polices de secours sont mieux spécifiées dans les jeux de règles quels éléments de style tels que le jeu de règles d'en-tête que nous avons écrit précédemment. Les déclarations de style de police définissent si une police doit être stylée avec une face italique normale ou oblique de sa famille de polices. Dans ce projet, nous utilisons des visages normaux et italiques. La déclaration de poids de police spécifie le poids ou l'audace. Pour que notre projet soit simple, nous utilisons simplement les valeurs normales et audacieuses, mais nous pourrions être beaucoup plus précis si nous le voulions. Enfin, le SRC, ou déclaration source, indique au navigateur où trouver la ressource qui contient les données de police, comme toutes les falaises qui composent la police. Dans de nombreux cas, comme le nôtre, la valeur source sera l'emplacement d'un fichier de polices. Dans ce projet, nous allons utiliser la valeur de format de parenthèse URL, qui fournit au navigateur un emplacement de fichier spécifique. Enfin, ce format entre parenthèses valeur après l'emplacement de la ressource aide les navigateurs à comprendre le type de ressource que nous fournissons. Implémentons quelques polices personnalisées dans notre code CSS. Dans notre boîte CSS, juste sous cette importation à la règle, vous remarquerez ce commentaire que j'ai mis là à propos de Roboto font-faces. Cela vous sera utile en seulement une minute. Au fait, nous appelons ceci une règle à, pas une règle définie à cause du symbole d'esperluette en face. Juste en dessous de notre commentaire sur nos font-faces, commençons à écrire polit-face aux règles. Commençons par Roboto-regular. On va utiliser la police. Nous allons utiliser nos accolades, nous spécifions la famille de polices. Nous assignons la famille de polices Roboto. Nous allons utiliser la propriété de style police. Nous n'utilisons pas l'italique pour ce visage particulier, donc notre valeur ici sera normale. Nous écrivons la propriété de poids de police. Laissez-moi l'épeler correctement W-E-I-G-H-T. On y va. Nous n'utilisons pas de polices audacieuses. Dans ce cas, le poids de la police est normal. Enfin, nous allons utiliser cette propriété source pour trouver la ressource de données. Voici où ces trois commentaires entrent en jeu. En haut, je vous ai donné un emplacement de fichiers pour nos trois faces de police différentes puisque nous sommes là pour trouver la police régulière Roboto, je vais copier et coller l'emplacement du fichier Roboto-Regular. Nous devons inclure les guillemets dans la partie que nous copions. Nous utilisons l'URL, puis les parenthèses. Nous allons coller cet emplacement de fichier à l'intérieur de l'URL. Nous allons ajouter l'aide de formats avec des parenthèses puisque c'est un fichier WOFF, nous allons mettre en WOFF comme notre assistant et fermer la déclaration comme toujours avec un point-virgule. Maintenant que nous avons défini notre robot ou notre police régulière, il est temps de l'appliquer au contenu de notre page. Même si vous ne le voyez pas dans notre boîte HTML ici, tous nos résultats ont un élément body. Toutes les pages Web ont un élément de corps. Dans ce cas, Code Pen cache l'élément body de notre boîte HTML pour rendre nos vies un peu plus simples. Mais imaginez simplement que tout le code HTML et notre boîte HTML vit à l'intérieur d'un élément body. Nous pouvons toujours styliser notre élément de corps de pages Web cependant. Ici, dans notre boîte CSS, nous faisons défiler un peu vers le bas et vous verrez ce commentaire que j'ai écrit sur l'élément body. Juste en dessous de ce commentaire, écrivons un nouvel ensemble de règles. Nous allons sélectionner l'élément de corps, accolades, la propriété font-family. Nous allons utiliser Roboto comme première valeur, puis virgule. Ensuite, nous allons nous donner le sans- serif de secours par défaut au cas où le navigateur ne peut pas trouver Roboto et alors c'est tout. Notez dans les résultats ici que la plupart du texte utilisent désormais la police Roboto. Vous voyez le résultat de l'héritage en CSS. Dans ce cas, à l'exception des éléments d'en-tête qui ont déjà la police homard deux qui leur est assignée. Tous les éléments de texte de la page ont hérité de leur propriété font-family de l'élément body. En règle générale, à moins que les règles CSS n'aient spécifié autrement, chaque élément HTML imposera plupart des propriétés de style de l'élément qui les contient. Cela peut établir une chaîne de propriétés héritées jusqu'aux éléments HTML racine. Maintenant, je sais que c'était beaucoup à prendre, mais vous n'avez pas besoin de vous soucier trop de ces détails pour réussir dans ce cours. Considérez qu'un aperçu d'un sujet plus avancé. Maintenant, voici un exercice que vous allez faire vous-même. Votre tâche consiste à définir les deux autres polices Roboto, Roboto-regular Italic et Ruboto-bold. Juste en dessous de cette première face de police à la règle, vous allez écrire deux autres polices à des règles, une pour chaque face-police. Utilisez les valeurs d'URL que je fournis ici dans le commentaire ci-dessus. Si vous avez besoin d'un indice sur la façon de le faire, arrière et passez en revue les propriétés du poids de la police et du style de police antérieures à la leçon. Vous pouvez également utiliser mon projet terminé a une référence. Encore une fois, j'ai posté le lien vers ce projet terminé dans les notes de cours. Vous ne verrez aucun changement dans les résultats lorsque vous implémentez ces nouvelles polices, nous les appliquerons plus tard dans le cours. Si vous êtes intéressé, il y a beaucoup d'autres choses à apprendre sur les polices sur le Web. Voici quelques ressources pour vous aider à démarrer. 9. Créer une colonne de texte: Cette leçon se concentre sur la contrainte de la largeur de TextContent dans une colonne verticale. Remarquez comment nos éléments de texte plus longs, tels que les paragraphes et les éléments de liste, couvrent toute la page Web, puis sont enveloppés sous les lignes suivantes. Comme une astuce soignée, nous pouvons redimensionner notre section de résultats ici simplement en saisissant le diviseur central et en le faisant glisser vers nos résultats. Peut-être que c'est à quoi ressemblera notre contenu sur un smartphone, et vous pouvez restaurer la taille simplement en faisant glisser ce séparateur central vers le centre. En ce moment, ces lignes de texte sont assez longues. Pour améliorer la lisibilité, la plupart des concepteurs recommandent des longueurs de ligne comprises entre 40 et 80 caractères. Notre première tâche consiste à limiter la largeur de nos éléments de texte de sorte que les lignes ne soient pas plus longues que la largeur spécifiée, comme 60 caractères. Pour créer une colonne de TextContent sur une page Web, nous avons d'abord placé ce contenu dans un élément HTML contenant. J' ai déjà fait ça pour toi. Dans notre boîte HTML, notez cet élément div, qui enveloppe tous les autres morues HTML. Notez que c'est la balise d'ouverture ici car la balise de fermeture est en bas, à la fin de tous nos autres contenus. On peut dire qu'il contient tous les autres éléments HTML du projet. Un div en soi est un élément HTML assez générique. Il ne fournit pas de style seul, mais les développeurs l'utilisent souvent pour accrocher leur propre code de style à un endroit spécifique dans le HTML, qui est exactement ce que nous allons faire ici. En passant à notre boîte de code CSS, j'ai placé un commentaire et un ensemble de lignes pour la colonne juste en dessous de notre ensemble de lignes corporelles. Comme mon commentaire l'indique ici, j'ai déjà fourni à l'élément div un peu de style, que je ne couvrirai pas dans ce cours, car ils n'ont vraiment pas à voir avec le texte de style. Maintenant, pour restreindre la largeur de cette colonne, nous allons utiliser la propriété max width. Comme vous pouvez le voir, il existe plusieurs types de valeurs différents que nous pouvons attribuer à une propriété de largeur maximale. Heureusement, nous n'allons pas tous les utiliser dans ce cours. Puisque nous voulons que nos lignes ne soient pas plus de 60 caractères, nous irons avec cette unité de mesure ch. L' unité ch représente la largeur du caractère 0 de la police associée à l'élément. Comme note de côté que le tutoriel sur l'écran, il vous emmènera dans beaucoup plus de détails sur la façon d'utiliser différentes unités en CSS, alors explorez cette ressource à votre guise. Finissons notre déclaration en définissant une valeur de 60ch. Dans notre div, nous ajoutons la propriété max-width et nous lui donnons une valeur de 60ch ; et maintenant remarquer la largeur telle que enveloppée jusqu'à environ 60 caractères au maximum, est maintenant contenue dans une belle colonne simple. Je veux fermer cette leçon en mentionnant deux autres propriétés CSS que vous pourriez trouver utiles. Si vos textes contiennent un mot super long qui est plus long que la largeur maximale de cet élément, vous pouvez spécifier comment vous voulez que le navigateur traite ce mot super long. Utilisez la propriété mot de rupture pour indiquer au navigateur de diviser le mot en morceaux et de les séparer sur plusieurs lignes, ou de laisser le mot d'origine déborder la largeur maximale sur une seule ligne. Lorsque cette rupture de mot se produit, vous pouvez utiliser la propriété tirets pour indiquer au navigateur s'il faut insérer un symbole de trait d'union entre ces morceaux de mots brisés. Je ne vais pas démontrer ces propriétés, mais n'hésitez pas à plonger dans ce tutoriel pour en savoir plus. 10. Alignement horizontal: Dans cette leçon, nous allons apprendre à aligner horizontalement notre texte. Nous commençons par la propriété d'alignement de texte. En bref, l'alignement du texte fonctionne comme les options d'alignement des traitements de texte, qui vous permet d'aligner le texte le long du bord gauche, le long d'un bord droit, le long du centre ou justifié sur les deux bords. Appliquons la propriété d'alignement de texte à notre titre et sous-titre de page. Pour rendre notre code un peu plus efficace, nous allons appliquer la règle de style à l'élément d'en-tête plutôt qu'à chacun des éléments H1 et H2. Nous pouvons voir dans la boîte HTML que notre élément d'en-tête enveloppe les deux éléments H1 et H2. plaçant la règle sur l'en-tête, les éléments H1 et H2 hériteront de la règle de notre élément d'en-tête. Dans notre boîte CSS en dessous de l'ensemble de règles que nous avons écrit pour notre développement, nous allons ajouter un autre ensemble de règles. Nous allons sélectionner l'élément d'en-tête, puis ajouter des accolades comme ça. Nous allons ajouter la propriété text align comme ça. Maintenant, si nous ajoutons la bonne valeur à cette propriété, nous allons voir, regarder, titre et le sous-titre de notre page se sont alignés vers le bord droit de notre colonne centrale. Je vais utiliser le centre dans mon projet. Nous voyons donc que le titre et le sous-titre de la page sont maintenant alignés au centre de notre colonne. Assez simple, non ? Eh bien, ça a l'air comme ça. Une mise en garde ici est que l'alignement du texte ne fonctionne que sur les éléments de niveau bloc et les cellules de tableau. Un élément de niveau bloc apparaît automatiquement sur une nouvelle ligne. Avec un élément en ligne, cependant, vous pouvez placer plusieurs éléments en ligne l'un à côté de l' autre et ils apparaîtront tous sur la même ligne. Nous pouvons voir des exemples des deux types d'éléments ici dans notre projet. En regardant ce premier paragraphe du texte. Rappelez-vous ces balises fortes qui rendent leur commentaire gras, nous utilisons les balises fortes ici dans notre HTML. Ce sont des éléments en ligne. Remarquez comment ils ne se cassent pas, ils ne provoquent pas de sauts de ligne dans les résultats, c'est ce qui les rend en ligne. En revanche, regardons vers le bas notre liste d'articles. Notez comment chaque élément de liste démarre automatiquement sur une nouvelle ligne, ce sont des éléments de bloc. La chose clé à retenir est que la propriété d'alignement de texte ne fonctionne que lorsque vous l'utilisez sur des éléments de bloc. L' objectif de cette règle est de faire en sorte que tous les textes contenus dans un seul bloc, comme un paragraphe, aient le même alignement. Cette technique permet de centrer le contenu du texte dans un élément de bloc. Mais que faire si nous voulons centrer l'élément de bloc lui-même ? Prenons notre colonne, par exemple, ne serait-il pas plus agréable si cette colonne de texte entière était centrée dans la page ? La façon la plus simple de centrer un élément de bloc qui est plus mince que son conteneur, est de définir sa propriété de marge sur auto. Les marges des éléments ont aidé à déterminer la quantité et type d'espace négatif autour de l'élément. Revenons à l'ensemble de règles pour la div, qui forme notre colonne ici. Nous allons ajouter une nouvelle déclaration avec une propriété de marge, donc nous faisons marge et ensuite nous allons ajouter la valeur automatique, et nous y allons. Regardez, la colonne est maintenant centrée sur la page. Rappelez-vous simplement que cette technique ne fonctionne que lorsque l'élément bloc est plus mince que l'élément qui le contient. Si l'élément central est le même que son élément contenant, cette technique n'accomplira rien. Pour ceux d'entre vous intéressés à en savoir plus sur le réglage de l'espace négatif autour des éléments, n'hésitez pas à consulter ce tutoriel. 11. Espacer pour les lettres, les lignes et les mots: Cette leçon est tout sur l'espacement, nous allons voir comment définir précisément l'espacement entre les lettres, entre les mots, entre les lignes d'un élément bloc, puis entre les éléments de bloc eux-mêmes. Allons d'abord s'attaquer à l'espacement des lettres. Cela changera la quantité d'espace entre les lettres individuelles, ou ce que les concepteurs appellent souvent le crénage. Regardons notre ensemble de règles H2 dans notre boîte CSS. Ajoutez une deuxième déclaration avec une propriété d'espacement des lettres. Donc l'espacement des lettres est l'espacement des lettres. Vous pouvez utiliser une valeur négative pour diminuer la quantité d'espace lettre par défaut. Essayons donc négatif 0.2 REM, négatif 0.2 REM, puis un point-virgule, puis remarquez les lettres de notre sous-titre vient de se rapprocher un peu. Personnellement, je pense que c'est un peu difficile à lire. Alors donnons-lui une valeur positive de 0,1 REM, je me débarrasse du négatif, change les deux en un, et maintenant nous avons un peu plus d'espace. La propriété d'espacement des mots fonctionne un peu comme l'espacement des lettres, mais elle ajuste l'espace entre les mots au lieu d'entre les lettres dans le même jeu de règles H2, nous allons copier et coller la déclaration d'espacement des lettres. Je le copie, puis je le colle et je l'aligne. Maintenant, changeons cette lettre. Maintenant, nous avons la propriété d'espacement des mots. Aussi juste pour rendre cela vraiment évident, fixons la valeur à un REM et remarquez maintenant comment nous avons un grand écart entre nos mots. Personnellement, je n'aime pas l'espace supplémentaire. Tu peux le garder si tu veux. Je vais l'enlever. J' ai donc supprimé la déclaration d'espacement des mots dans notre CSS et maintenant nous avons un alignement des mots un peu plus serré là. Pour le dernier des trois simples propriétés basées sur le texte, nous pouvons ajuster la hauteur de ligne des éléments de texte avec une propriété de hauteur de ligne. Cette propriété spécifie la hauteur de chaque ligne de texte sur la page. Dans notre projet de bibliothèque LetterVille, nous voulons que tous les paragraphes et les éléments de liste aient la même hauteur de ligne et que cette hauteur soit un peu plus grande que l'espacement par défaut. Donc, en bas de notre boîte CSS, ajoutons un nouvel ensemble de lignes. Nous allons sélectionner tous les éléments p et ensuite nous voulons également sélectionner tous les éléments LI. Faites nos accolades. Nous allons ajouter la propriété line-height, donc c'est line-height. Nous allons lui donner une valeur de 1,5 et ce que cela fait, c'est que toutes nos lignes de nos paragraphes et lignes de nos hauteurs de lignes à une fois et demie leur taille de police. Donc remarquez ici dans nos résultats et nous avons maintenant espaces plus grands entre nos lignes de texte enveloppées. Pour la technique finale d'espacement du texte sur le web, nous allons couvrir les marges. Jetez un oeil à notre liste d'articles. Bien que chaque nouvel élément de liste commence par une puce à l'avant, il peut être difficile de dire d'un coup d'œil où chaque élément de liste commence et se termine. Je pense que la liste serait plus facile à lire si nous avions plus d'espace entre les éléments. Malheureusement, nous ne pouvons pas utiliser la propriété line-height ici car cela ajouterait de l'espace à toutes les lignes de texte. Nous allons donc utiliser la propriété bottom de marge pour ajouter des espaces supplémentaires au bas de chaque élément de liste. Donc, au bas de notre boîte CSS, ajoutez un nouvel ensemble de règles pour ajuster les éléments LI. Nous allons utiliser la propriété margin-bottom et je pense que 0,5 RAM fait le travail bien. Donc, faites 0,5 points REM et remarquez maintenant que nous avons un peu d'espace supplémentaire entre nos articles de liste, ce qui le rend juste un peu plus facile à lire. C' est tout pour notre leçon sur l'espacement du texte pour le web. Dans vos propres projets, n'hésitez pas à expérimenter ces propriétés et les différentes unités de mesure en CSS. Découvrez quel genre de conceptions créatives vous pouvez trouver. 12. Décorer des personnages et des mots: Cette leçon couvrira une gamme de propriétés CSS qui décorent des caractères et des mots avec Visual Flair. Commençons par la couleur. Je suppose que vous connaissez déjà les différentes façons de spécifier une couleur. Si vous ne le faites pas, je recommande fortement de lire ce tutoriel gratuit Mozilla avant de continuer. Une fois que vous comprenez les valeurs de couleur, la modification de la couleur des éléments de texte est assez simple. C' est ennuyeux que tout le texte sur notre page soit noir. Nous pouvons faire ressortir l'en-tête avec un peu de couleur. Donc, dans notre boîte CSS, dans l'ensemble de lignes h1 et h3, nous avons déjà écrit, ajoutons une autre déclaration. La propriété est simplement couleur. Pour cette valeur, nous allons utiliser un vert forestier. J' ai fourni quelques valeurs de couleur en haut de la boîte CSS ici dans ce commentaire. Donc, je vais juste couper et coller cette valeur vert clair , puis revenir à notre propriété de couleur et la coller dans. Maintenant, tous nos en-têtes, les en-têtes h1 et h3 ont maintenant cette couleur vert forêt et la palette de couleurs a un peu plus de variété. Si nous faisons défiler vers le bas, nous remarquerons que nos hyperliens ont la couleur bleue par défaut que la plupart des navigateurs assignés aux liens. Puisque nous allons avec la palette de couleurs vert et noir, nous devons changer ces liens en vert. En bas de notre boîte CSS, ajoutez un nouvel ensemble rural qui sélectionne un élément. Ce sont des éléments de lien hypertexte, accolades, puis la propriété color. Malheureusement, le vert que nous utilisons pour nos en-têtes est trop tard pour être utilisé sur le corps du texte. Il ne fournit pas assez de contraste de couleur et ne répondrait pas aux normes d'accessibilité, donc nous utiliserons un vert plus foncé. Je vais faire défiler jusqu'à notre commentaire sur les valeurs de couleur, puis je vais copier cette valeur pour le vert foncé pour les liens. Ensuite, je reviendrai au styler a tag et j'ajouterai la valeur de couleur. Maintenant, j'ai remarqué que nos liens ont changé pour ce texte vert foncé. Une autre propriété de couleur que nous pouvons changer est la couleur de fond. Remarquez cette phrase en surbrillance qui commence par « comment nous », si nous regardons dans notre HTML ici, nous remarquons que la phrase est enveloppée dans une balise de marque. Cette balise fournit une couleur d'arrière-plan par défaut derrière le contenu du texte qu'elle contient. Je ne sais pas pour toi, mais ce jaune, c'est un peu brillant et distrayant. J' aimerais le tonifier un peu. En bas de notre boîte CSS, je vais ajouter un autre jeu de lignes. Cette fois, nous utilisons le sélecteur de marque pour les éléments Mark, accolades. Nous allons utiliser la propriété de couleur d'arrière-plan, donc la couleur d'arrière-plan, puis un espace. Maintenant, nous allons revenir ici à nos commentaires de couleur et je vais copier la couleur jaune pâle pour nos étiquettes de marque. Je reviens et je colle cette valeur. Maintenant, on y va. Maintenant beaucoup plus facile sur les yeux et il met toujours en évidence le texte, mais maintenant ce n'est pas presque aussi distrayant. Pour la propriété de style finale de la leçon, transformation de texte modifie l'enveloppe du texte Content. C' est assez simple. Il change les textes en majuscules ou minuscules, ou majuscules, ce qui indique la première lettre de chaque mot en majuscules et toutes les autres lettres en minuscules. Définissons le sous-titre de la page sur toutes les lettres minuscules. Alors faites défiler ici, nous avons notre sous-titre et une balise h2. C' est donc ce que nous allons changer dans notre boîte CSS. On va monter, trouver le jeu de rangées H2. Nous allons ajouter une nouvelle déclaration. Cette fois, il s'agit de la propriété de transformation de texte. Nous allons utiliser la valeur en minuscules. Maintenant, notez que le sous-titre est maintenant tout en minuscules. 13. Ombres de texte: Notre dernière leçon du cours est, pour moi, la plus amusante. Vous pouvez devenir vraiment fou avec les ombres de texte et créer des effets de style qui ressemblent à Word Art. La touche finale de notre projet de bibliothèque de Letterville est d'ajouter de l'ombre de texte à notre titre de page, pour en rendre un souvenir saisissant et mémorable. La propriété text-shadow prend trois ou quatre composants pour sa valeur. Le premier composant, le décalage x, est requis et spécifie la distance pour déplacer l'ombre vers la gauche ou vers la droite avec zéro placer l'ombre directement derrière le texte. Une valeur négative déplace l'ombre vers la gauche du texte. Le deuxième composant, le décalage y, est également requis et spécifie la distance pour déplacer l' ombre vers le haut ou vers le bas avec zéro placer l'ombre directement derrière le texte. Une valeur négative déplace l'ombre au-dessus du texte. Le troisième composant, le rayon de flou, est facultatif et spécifie la largeur et la lumière de l'ombre. S' il n'est pas spécifié, la valeur par défaut est zéro. Le quatrième composant, la couleur, est requis et il définit la couleur de l'ombre. Mettons cela en pratique. Dans notre boîte CSS, revenez à l'ensemble de lignes H1. Nous allons ajouter une nouvelle déclaration avec une propriété d'ombre de texte. Donc, c'est text-shadow pour la propriété. Nous allons utiliser un décalage x de 4px négatif, représentant quatre pixels négatifs, pour tirer l'ombre à gauche de son texte. Pour le décalage y, nous utiliserons quatre pixels pour déplacer l'ombre sous son texte. Nous allons sauter le rayon de flou et pour la couleur, permet de saisir une nuance plus claire de ce vert forêt en haut de notre commentaire de couleur. Ici, nous voyons le vert clair pour l'ombre du texte. Je vais prendre ça, le copier, revenir vers le bas, et ensuite utiliser ça pour finir notre propriété de texte. Nous sommes là, vous pouvez voir une ombre plus claire du texte original juste à gauche et au-dessous du texte. Une chose intéressante à propos de l'ombre de texte est que vous pouvez superposer plusieurs ombres les unes sur les autres pour un effet visuel plus complexe. Lorsque vous spécifiez plusieurs valeurs pour une propriété d'ombre de texte, le navigateur applique les ombres de l'avant à l'arrière avec la première ombre en haut. Ajoutons une autre ombre à notre élément H1. Devant la valeur d'ombre d'origine, ajoutez une virgule, nous allons utiliser la virgule pour séparer les deux valeurs. Ajoutez un décalage x de deux pixels négatifs pour tirer légèrement l'ombre à gauche de ses textes. Nous allons ajouter une valeur de décalage y de deux pixels pour tirer l'ombre légèrement en dessous de son texte. Nous sauterons à nouveau le rayon de flou, et nous donnerons la valeur de couleur blanche. Maintenant, nous pouvons voir la deuxième ombre blanche, juste au-dessus de la première ombre vert clair, mais au-dessous du texte, créant un effet de contour. Comme je l'ai mentionné précédemment, il y a beaucoup plus d'effets créatifs visuels que vous pouvez obtenir avec des ombres de texte pour ceux qui sont intéressés, consultez cet outil gratuit pour explorer les démos et expérimenter avec différentes valeurs d'ombre de texte. 14. Conclusion: Félicitations pour avoir atteint la fin du cours, vous l'avez fait. Dans ce cours, nous avons couvert une tonne de techniques pour styliser le texte sur le web. Tout, de la modification de la taille de la police à la couleur, mise en œuvre d'une police Google, de la définition d'une police personnalisée, des ombres techniques et bien plus encore. Si vous avez des questions sur tout ce que nous avons abordé dans le cours, veuillez envisager d'afficher ces questions ici dans le cours. Je leur répondrai du mieux que je peux. Aussi, je vous encourage vivement à poster des projets ici dans le cours, que vous ayez suivi mon exemple de bibliothèque de Letterville ou que vous ayez fait votre propre chose. D' autres étudiants et moi sommes intéressés à voir votre travail. C' est ton moment de briller. De plus, si vous avez eu du mal à faire quelque chose dans ce cours, pensez à poster votre travail en cours comme vos projets et demandez des commentaires. Je vais passer en revue. Je vais donner vos conseils. Vous pouvez toujours supprimer votre travail en cours et publier votre projet terminé plus tard. Où allons-nous d'ici ? J' ai quatre suggestions pour ce qu'il faut faire quand vous aurez fini. abord, si vous avez apprécié ce cours, s'il vous plaît envisager de laisser un commentaire positif ici dans ce cours, d'autres étudiants voudront savoir que vous avez apprécié ce cours et que vous l'avez trouvé utile. Deux, envisagez de me suivre ici sur Skillshare. Il devrait y avoir un bouton pour cela en dessous de la vidéo. Je prévois d'enseigner plus de cours, et HTML et CSS dans un proche avenir. J' aimerais vous tenir au courant lorsque je poste ce contenu. Troisièmement, visitez mon site Web. Je publie un tour d'horizon hebdomadaire des tutoriels et des démos pour HTML, CSS et Web Graphics. Quatrièmement, je partage une tonne de ressources gratuites pour apprendre le développement web sur Twitter et LinkedIn. Alors connectez-vous avec moi là-bas. J' adore enseigner ce cours, et j'espère que vous l'avez apprécié autant que moi. Merci beaucoup de vous joindre à moi ici, et j'ai hâte de vous voir dans mon prochain cours.