{"id":5355,"date":"2024-08-27T16:41:25","date_gmt":"2024-08-27T16:41:25","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre\/"},"modified":"2024-08-27T16:41:28","modified_gmt":"2024-08-27T16:41:28","slug":"proprietes-css-texte-tout-comprendre","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre\/","title":{"rendered":"4.3 Propri\u00e9t\u00e9s CSS de Texte : Tout Comprendre"},"content":{"rendered":"\n<p><strong>Les propri\u00e9t\u00e9s CSS de Texte<\/strong> sont essentielles pour styliser le contenu textuel sur une page Web. Maitriser ces propri\u00e9t\u00e9s vous permet d&rsquo;am\u00e9liorer la lisibilit\u00e9 et l&rsquo;esth\u00e9tique de votre site. Apprenons ensemble les diff\u00e9rentes propri\u00e9t\u00e9s CSS de texte, comment les utiliser et leur impact sur la mise en page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Propri\u00e9t\u00e9s CSS de Texte<\/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\/586310019?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%C3%A9butant-%C3%A0-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%C3%A9butant-%C3%A0-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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>Voyons maintenant les diff\u00e9rentes propri\u00e9t\u00e9s de texte en CSS, leur syntaxe et comment les utiliser pour tirer parti au maximum de leurs avantages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Propri\u00e9t\u00e9s de Texte Principal en CSS<\/h3>\n\n\n\n<p>Les principales propri\u00e9t\u00e9s de texte en CSS incluent <code>color<\/code>, <code>font-family<\/code>, <code>font-size<\/code>, <code>font-weight<\/code>, <code>text-align<\/code>, <code>line-height<\/code>, <code>text-transform<\/code>, et <code>text-shadow<\/code>. Elles vous permettent de contr\u00f4ler l&rsquo;apparence visuelle du texte sur votre site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Colorer le Texte avec la Propri\u00e9t\u00e9 <code>color<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>color<\/code> d\u00e9termine la couleur du texte. Vous pouvez utiliser plusieurs formats pour sp\u00e9cifier la couleur : nom de la couleur, valeur hexad\u00e9cimale, RGB, etc. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p { \n    color: #ff5733; \/* Couleur hexad\u00e9cimale *\/\n    color: rgb(255, 87, 51); \/* Couleur RGB *\/\n    color: red; \/* Nom de la couleur *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Choisir la Police avec la Propri\u00e9t\u00e9 <code>font-family<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-family<\/code> permet de d\u00e9finir la police de caract\u00e8res utilis\u00e9e. Vous pouvez sp\u00e9cifier plusieurs polices, en commen\u00e7ant par la police pr\u00e9f\u00e9r\u00e9e et en fournissant des polices de secours \u00e0 la fin. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body { \n    font-family: 'Roboto', Arial, sans-serif;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir la Taille du Texte avec la Propri\u00e9t\u00e9 <code>font-size<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-size<\/code> ajuste la taille du texte. Elle accepte diff\u00e9rentes unit\u00e9s comme pixels (px), ems (em), rems (rem), et pourcentages (%). Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 { \n    font-size: 2em; \/* 2 fois la taille de la fonte par d\u00e9faut *\/\n    font-size: 24px; \/* Taille en pixels *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajuster l&rsquo;\u00c9paisseur du Texte avec la Propri\u00e9t\u00e9 <code>font-weight<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-weight<\/code> sp\u00e9cifie l&rsquo;\u00e9paisseur du texte, avec des valeurs allant de 100 (tr\u00e8s l\u00e9ger) \u00e0 900 (tr\u00e8s gras). Voici des exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p.thin { \n    font-weight: 100; \n}\n\np.bold { \n    font-weight: bold; \/* \u00c9quivaut \u00e0 700 *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Aligner Votre Texte avec la Propri\u00e9t\u00e9 <code>text-align<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>text-align<\/code> contr\u00f4le l&rsquo;alignement horizontal du texte \u00e0 l&rsquo;int\u00e9rieur de son conteneur. Les valeurs accept\u00e9es incluent <code>left<\/code>, <code>right<\/code>, <code>center<\/code>, et <code>justify<\/code>. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h2 { \n    text-align: center; \/* Texte centr\u00e9 *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Contr\u00f4ler l&rsquo;Espace Entre les Lignes avec la Propri\u00e9t\u00e9 <code>line-height<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>line-height<\/code> modifie l&rsquo;espacement des lignes de texte. Elle accepte des unit\u00e9s telles que pixels (px), em (em), et des nombres relatifs \u00e0 la taille de la police. Voici comment l&rsquo;utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p { \n    line-height: 1.5; \/* 1.5 fois la hauteur de la ligne *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Transformer le Texte avec la Propri\u00e9t\u00e9 <code>text-transform<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>text-transform<\/code> vous permet de changer la casse du texte automatiquement. Les valeurs possibles sont <code>uppercase<\/code> (majuscule), <code>lowercase<\/code> (minuscule), et <code>capitalize<\/code> (capitale). Voici des exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h3 { \n    text-transform: uppercase; \/* Transforme tout en majuscule *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Ombres de Texte avec la Propri\u00e9t\u00e9 <code>text-shadow<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>text-shadow<\/code> ajoute des ombres au texte pour un effet stylis\u00e9. Elle accepte plusieurs param\u00e8tres : d\u00e9calage horizontal, d\u00e9calage vertical, flou, et couleur. Voici un exemple :<\/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 douce *\/\n}\n<\/code><\/pre>\n\n\n\n<p>En explorant ces propri\u00e9t\u00e9s, vous pouvez cr\u00e9er des styles de texte attrayants et fonctionnels. Que vous travailliez sur une page personnelle ou un site professionnel, ces techniques sont indispensables pour produire un contenu lisible et visuellement plaisant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Cod\u00e9s : Mettre en Pratique les Propri\u00e9t\u00e9s de Texte CSS<\/h3>\n\n\n\n<p>Pour illustrer l&rsquo;application des propri\u00e9t\u00e9s CSS de texte, voici quelques exemples concrets.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Titre Stylis\u00e9<\/h4>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;style&gt;\n  h1.stylized {\n      color: #4ECDC4;\n      font-family: 'Georgia', sans-serif;\n      font-size: 2.5em;\n      font-weight: 700;\n      text-align: center;\n      line-height: 1.2;\n      text-transform: uppercase;\n      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);\n  }\n&lt;\/style&gt;\n\n&lt;h1 class=\"stylized\"&gt;Hello World!&lt;\/h1&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Paragraphe Lisible<\/h4>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;style&gt;\n  p.readable {\n      color: #333;\n      font-family: 'Arial', sans-serif;\n      font-size: 1em;\n      line-height: 1.6;\n      text-align: justify;\n  }\n&lt;\/style&gt;\n\n&lt;p class=\"readable\"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vitae neque consequat eleifend. Integer bibendum velit ligula, ut convallis orci faucibus et.&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p>Pour plus d\u2019informations sur les bonnes pratiques CSS, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-commentaires-css-guide-pratique\">ajouter des commentaires en CSS<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/selecteurs-css-complexes-combinateurs\">utilisation des s\u00e9lecteurs CSS complexes et combinateurs<\/a>.<\/p>\n\n\n<!-- exemples suppl\u00e9mentaires pour atteindre 1200 mots -->\n\n\n<h3 class=\"wp-block-heading\">Ajuster les Marges Int\u00e9rieures et Ext\u00e9rieures<\/h3>\n\n\n\n<p>L&rsquo;utilisation des propri\u00e9t\u00e9s <code>margin<\/code> et <code>padding<\/code> est essentielle pour espacer correctement vos \u00e9l\u00e9ments textuels. La propri\u00e9t\u00e9 <code>margin<\/code> applique un espace \u00e0 l&rsquo;ext\u00e9rieur de l&rsquo;\u00e9l\u00e9ment, tandis que <code>padding<\/code> applique un espace \u00e0 l&rsquo;int\u00e9rieur. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h2 {\n    margin: 20px 0; \/* Marge externe *\/\n    padding: 10px 15px; \/* Marge interne *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Listes Stylis\u00e9es<\/h3>\n\n\n\n<p>Les propri\u00e9t\u00e9s CSS qui se concentrent sur la stylisation des listes, telle que <code>list-style-type<\/code>, permettent de personnaliser les listes \u00e0 puces et num\u00e9rot\u00e9es. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>ul {\n    list-style-type: disc; \/* Cercle rempli *\/\n}\n\nol {\n    list-style-type: upper-roman; \/* Chiffres romains en majuscules *\/\n}\n<\/code><\/pre>\n\n\n\n<p>En savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/tableaux-html-creer-utiliser\">la cr\u00e9ation et la gestion des tableaux en HTML<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\">l&rsquo;int\u00e9gration des m\u00e9dias dans vos pages HTML<\/a> afin de cr\u00e9er des pages web plus interactives et compl\u00e8tes.<\/p>\n\n\n<!-- ajout","protected":false},"excerpt":{"rendered":"<p>Les propri\u00e9t\u00e9s CSS de Texte sont essentielles pour styliser le contenu textuel sur une page Web. Maitriser ces propri\u00e9t\u00e9s vous permet d&rsquo;am\u00e9liorer la lisibilit\u00e9 et&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5355","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\/5355","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=5355"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5355\/revisions"}],"predecessor-version":[{"id":5356,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5355\/revisions\/5356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2764"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}