{"id":5353,"date":"2024-08-27T16:37:19","date_gmt":"2024-08-27T16:37:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/proprietes-css-police-guide-essentiel\/"},"modified":"2024-11-11T15:21:47","modified_gmt":"2024-11-11T15:21:47","slug":"proprietes-css-police-guide-essentiel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/proprietes-css-police-guide-essentiel\/","title":{"rendered":"4.2 Propri\u00e9t\u00e9s CSS de Police : Guide Essentiel"},"content":{"rendered":"\n\n\n<p><strong>Les propri\u00e9t\u00e9s CSS de police<\/strong> sont essentielles pour contr\u00f4ler l\u2019apparence de votre texte sur le web. Une bonne ma\u00eetrise de ces propri\u00e9t\u00e9s permet une meilleure lisibilit\u00e9 et une harmonisation de votre design global. Dans ce guide, nous allons explorer les principales propri\u00e9t\u00e9s CSS li\u00e9es \u00e0 la typographie, leur utilit\u00e9 et comment les impl\u00e9menter efficacement gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Propri\u00e9t\u00e9s CSS de Police<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586307460?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d\u00e9butant-\u00e0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d\u00e9butant-\u00e0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les propri\u00e9t\u00e9s de police en CSS couvrent un large \u00e9ventail de fonctionnalit\u00e9s, allant du choix de la police de caract\u00e8res \u00e0 la gestion avanc\u00e9e de la taille, de l&rsquo;\u00e9paisseur, de l&rsquo;espacement et d&rsquo;autres aspects stylistiques. Comprenons ces concepts en profondeur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Choisir la Police avec <code>font-family<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-family<\/code> permet de d\u00e9finir la liste des polices \u00e0 utiliser pour un \u00e9l\u00e9ment. Vous pouvez sp\u00e9cifier plusieurs polices en guise de sauvegarde si la premi\u00e8re n\u2019est pas disponible :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  font-family: \"Arial\", \"Helvetica\", sans-serif;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir la Taille de la Police avec <code>font-size<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-size<\/code> est utilis\u00e9e pour d\u00e9finir la taille de la police. On peut utiliser des unit\u00e9s absolues (pixels, points) ou relatives (em, rem) :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n  font-size: 16px; \/* Unit\u00e9 absolue *\/\n}\n\nh1 {\n  font-size: 2em; \/* Unit\u00e9 relative *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Contr\u00f4ler l&rsquo;\u00c9paisseur de la Police avec <code>font-weight<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-weight<\/code> permet de r\u00e9gler l&rsquo;\u00e9paisseur (ou la graisse) de la police. Valeurs possibles : normal, bold, ou des nombres de 100 \u00e0 900 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n  font-weight: bold; \/* Valeur de mot-cl\u00e9 *\/\n}\n\np {\n  font-weight: 300; \/* Valeur num\u00e9rique pour police plus l\u00e9g\u00e8re que normal *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajuster le Style de la Police avec <code>font-style<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-style<\/code> est utilis\u00e9e pour appliquer des styles comme italique ou oblique \u00e0 la police de caract\u00e8res :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>em {\n  font-style: italic;\n}\n\n.address {\n  font-style: oblique;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Contr\u00f4ler l&rsquo;Espace entre les Lettres avec <code>letter-spacing<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>letter-spacing<\/code> permet d&rsquo;ajuster l&rsquo;espace entre les caract\u00e8res :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n  letter-spacing: 3px; \/* Espace de 3 pixels entre chaque caract\u00e8re *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>line-height<\/code> pour le Contr\u00f4le de l&rsquo;Interligne<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>line-height<\/code> d\u00e9finit la hauteur de ligne, permettant d&rsquo;ajuster l&rsquo;espace vertical entre les lignes de texte :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n  line-height: 1.5; \/* 1.5 fois la taille de la police *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les Propri\u00e9t\u00e9s avec <code>font<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font<\/code> permet de combiner plusieurs aspects de la police en une seule d\u00e9claration :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n  font: italic bold 16px\/1.5 'Arial', sans-serif;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Manipulation de Polices en CSS<\/h3>\n\n\n\n<p>Poussons plus loin l&rsquo;utilisation des propri\u00e9t\u00e9s de police pour voir comment elles peuvent \u00eatre utilis\u00e9es dans des sc\u00e9narios r\u00e9els.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Styliser les Titres pour une Meilleure Hi\u00e9rarchisation<\/h4>\n\n\n\n<p>Utilisez diff\u00e9rentes tailles et graisses de police pour renforcer la hi\u00e9rarchie des titres :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n  font-size: 2.5em;\n  font-weight: 700;\n}\n\nh2 {\n  font-size: 2em;\n  font-weight: 600;\n}\n\nh3 {\n  font-size: 1.75em;\n  font-weight: 500;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Personnaliser les Polices pour les Diff\u00e9rents \u00c9crans<\/h4>\n\n\n\n<p>Utilisez des media queries pour adapter les styles de police selon les tailles d&rsquo;\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n  p {\n    font-size: 14px;\n  }\n\n  h1 {\n    font-size: 1.5em;\n  }\n}\n\n@media (min-width: 601px) {\n  p {\n    font-size: 18px;\n  }\n\n  h1 {\n    font-size: 2.5em;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation des Polices Web<\/h4>\n\n\n\n<p>Inclure une police web dans votre projet pour des styles de police uniques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&amp;display=swap');\n\nbody {\n  font-family: 'Roboto', sans-serif;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Autres Propri\u00e9t\u00e9s CSS Importantes pour la Typographie<\/h3>\n\n\n\n<p>En plus des propri\u00e9t\u00e9s de base comme <code>font-family<\/code>, <code>font-size<\/code>, et <code>font-weight<\/code>, il existe d\u2019autres propri\u00e9t\u00e9s CSS cruciales pour un bon design typographique, que nous allons explorer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>text-transform<\/code> pour la Transformation de Texte<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>text-transform<\/code> permet de contr\u00f4ler la capitalisation d\u2019un texte :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n  text-transform: uppercase; \/* Transforme le texte en majuscules *\/\n}\n\np {\n  text-transform: capitalize; \/* Met la premi\u00e8re lettre de chaque mot en majuscule *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Ajouter des Ombres de Texte avec <code>text-shadow<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>text-shadow<\/code> ajoute des ombres port\u00e9es aux textes pour un effet visuel renforc\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); \/* Ombre avec d\u00e9calage et flou *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>font-variant<\/code> pour les Petites Capitale<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-variant<\/code> permet de manipuler des variantes de texte comme les petites capitales :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n  font-variant: small-caps; \/* Texte en petites capitales *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Aligner le Texte avec <code>text-align<\/code><\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>text-align<\/code> est utilis\u00e9e pour d\u00e9finir l&rsquo;alignement d\u2019un texte \u00e0 l&rsquo;int\u00e9rieur de son contenant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n  text-align: center; \/* Aligne le texte au centre *\/\n}\n<\/code><\/pre>\n\n\n\n<p>Pour approfondir vos connaissances sur les propri\u00e9t\u00e9s CSS de police, vous pouvez explorer des ressources suppl\u00e9mentaires comme le site <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> qui offre une documentation exhaustive et des explications d\u00e9taill\u00e9es. Des cours en ligne sur des plateformes \u00e9ducatives comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> peuvent \u00e9galement fournir un apprentissage structur\u00e9 et des projets pratiques pour mettre en application ces concepts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>propri\u00e9t\u00e9s CSS de police<\/strong> sont des outils puissants permettant d\u2019am\u00e9liorer l\u2019apparence et la lisibilit\u00e9 de votre texte. De \u00ab <code>font-family<\/code> \u00bb \u00e0 \u00ab <code>font-weight<\/code> \u00bb en passant par \u00ab <code>line-height<\/code> \u00bb, chaque propri\u00e9t\u00e9 joue un r\u00f4le crucial dans le design web. En\n","protected":false},"excerpt":{"rendered":"<p>Les propri\u00e9t\u00e9s CSS de police sont essentielles pour contr\u00f4ler l\u2019apparence de votre texte sur le web. Une bonne ma\u00eetrise de ces propri\u00e9t\u00e9s permet une meilleure&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2763,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5353"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5353\/revisions"}],"predecessor-version":[{"id":6036,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5353\/revisions\/6036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2763"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}