{"id":5347,"date":"2024-08-27T16:25:05","date_gmt":"2024-08-27T16:25:05","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/feuilles-style-cascade-heritage-css\/"},"modified":"2024-11-08T19:39:28","modified_gmt":"2024-11-08T19:39:28","slug":"feuilles-style-cascade-heritage-css","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/feuilles-style-cascade-heritage-css\/","title":{"rendered":"3.6 Feuilles de Style en Cascade et H\u00e9ritage en CSS"},"content":{"rendered":"\n\n\n<p><strong>Les Feuilles de Style en Cascade (CSS)<\/strong> jouent un r\u00f4le essentiel dans la cr\u00e9ation de sites web attrayants et fonctionnels. Comprendre l&rsquo;h\u00e9ritage en CSS et comment les propri\u00e9t\u00e9s CSS sont appliqu\u00e9es aux \u00e9l\u00e9ments peut r\u00e9volutionner la mani\u00e8re dont vous concevez vos designs. Apprenons ensemble les bases de l&rsquo;h\u00e9ritage en CSS et voyons comment les exploiter \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Feuilles de Style en Cascade (CSS)<\/strong> et H\u00e9ritage<\/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\/586295012?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) { \/\/ 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\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141')\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('#price');\n                var originalPriceElement = fetchedDoc.querySelector('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>L&rsquo;h\u00e9ritage dans CSS permet aux propri\u00e9t\u00e9s d\u00e9finies sur un \u00e9l\u00e9ment parent d&rsquo;\u00eatre transmises \u00e0 ses descendants. Cela permet de maintenir un style coh\u00e9rent sans la n\u00e9cessit\u00e9 de red\u00e9finir les m\u00eames propri\u00e9t\u00e9s pour chaque \u00e9l\u00e9ment individuel. Voici comment cela fonctionne avec des exemples pratiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Propri\u00e9t\u00e9s CSS h\u00e9ritables<\/h3>\n\n\n\n<p>En CSS, certaines propri\u00e9t\u00e9s sont h\u00e9ritables par d\u00e9faut, tandis que d&rsquo;autres ne le sont pas. Voici une illustration de certaines propri\u00e9t\u00e9s h\u00e9ritables :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Propri\u00e9t\u00e9s h\u00e9ritables *\/\nbody {\n  color: #333333; \/* Cette couleur sera h\u00e9rit\u00e9e par tous les \u00e9l\u00e9ments descendants *\/\n  font-family: 'Arial, sans-serif'; \/* La police sera h\u00e9rit\u00e9e par tous les \u00e9l\u00e9ments descendants *\/\n}\np {\n  font-size: 16px; \/* Cette taille de police sera h\u00e9rit\u00e9e par les \u00e9l\u00e9ments de paragraphes *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Propri\u00e9t\u00e9s non h\u00e9ritables<\/h3>\n\n\n\n<p>Contrairement aux propri\u00e9t\u00e9s h\u00e9ritables, certaines propri\u00e9t\u00e9s ne sont pas automatiquement transmises aux \u00e9l\u00e9ments descendants. Par exemple, les propri\u00e9t\u00e9s de mise en page comme <code>margin<\/code> et <code>padding<\/code> ne sont pas h\u00e9ritables:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Propri\u00e9t\u00e9s non h\u00e9ritables *\/\ndiv {\n  margin: 20px; \/* Cette marge ne sera pas h\u00e9rit\u00e9e par les \u00e9l\u00e9ments enfants *\/\n  padding: 10px; \/* Ce padding ne sera pas h\u00e9rit\u00e9 par les \u00e9l\u00e9ments enfants *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser l&rsquo;h\u00e9ritage CSS pour des Styles Uniformes<\/h3>\n\n\n\n<p>Utiliser l&rsquo;h\u00e9ritage CSS \u00e0 votre avantage peut grandement simplifier la gestion de vos styles et maintenir une coh\u00e9rence dans tout votre projet. Par exemple, d\u00e9finir une couleur de texte sur le <code>body<\/code> garantit que tous les textes h\u00e9ritent de cette couleur, sauf sp\u00e9cification contraire:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  color: #444444; \/* Couleur de texte par d\u00e9faut pour tous les \u00e9l\u00e9ments *\/\n  font-family: 'Helvetica, sans-serif'; \/* Police par d\u00e9faut pour tous les \u00e9l\u00e9ments *\/\n}\nh1 {\n  font-size: 2em; \/* Taille sp\u00e9cifique pour les titres H1 *\/\n}\np {\n  font-size: 1em; \/* Taille sp\u00e9cifique pour les paragraphes *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la propri\u00e9t\u00e9 &lsquo;inherit&rsquo; en CSS<\/h3>\n\n\n\n<p>La valeur <code>inherit<\/code> peut \u00eatre utilis\u00e9e pour sp\u00e9cifier qu&rsquo;une propri\u00e9t\u00e9 doit h\u00e9riter sa valeur de son \u00e9l\u00e9ment parent, m\u00eame pour des propri\u00e9t\u00e9s normalement non h\u00e9ritables:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Utilisation de 'inherit' *\/\n.parent-element {\n  background-color: lightblue; \/* La couleur de fond d\u00e9finie sur l'\u00e9l\u00e9ment parent *\/\n}\n.child-element {\n  background-color: inherit; \/* H\u00e9rite de la couleur de fond du parent *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples avanc\u00e9s de l&rsquo;h\u00e9ritage CSS<\/h3>\n\n\n\n<p>L&rsquo;utilisation avanc\u00e9e de l&rsquo;h\u00e9ritage en CSS permet de cr\u00e9er des styles complexes tout en maintenant une feuille de style propre et modulaire. Voici quelques exemples avanc\u00e9s.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">H\u00e9ritage de Style Global<\/h4>\n\n\n\n<p>D\u00e9finir des styles globaux sur le <code>body<\/code> ou un autre \u00e9l\u00e9ment parent permet de maintenir une apparence uniforme sur toutes les pages:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  font-family: 'Open Sans', sans-serif;\n  color: #222222;\n}\na {\n  color: inherit; \/* Tous les liens h\u00e9riteront de la couleur du texte *\/\n  text-decoration: none; \/* Style par d\u00e9faut pour tous les liens *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Th\u00e9matisation de Composants<\/h4>\n\n\n\n<p>Pour rendre la gestion des th\u00e8mes plus flexible, vous pouvez utiliser l&rsquo;h\u00e9ritage CSS combin\u00e9 avec des variables CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>:root {\n  --primary-color: #FF5722;\n  --font-family-base: 'Roboto', sans-serif;\n}\n\nbody {\n  font-family: var(--font-family-base);\n  color: var(--primary-color);\n}\nbutton {\n  background-color: var(--primary-color);\n  color: #ffffff;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Combinaison d&rsquo;H\u00e9ritage et de Flexbox<\/h4>\n\n\n\n<p>En combinant l&rsquo;h\u00e9ritage et Flexbox, vous pouvez cr\u00e9er des mises en pages robustes et maintenables:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  font-family: inherit; \/* Inherit font from body *\/\n  color: inherit; \/* Inherit color from body *\/\n}\n.child {\n  padding: 20px;\n  background-color: rgba(0, 0, 0, 0.1);\n}\n<\/code><\/pre>\n\n\n\n<p><p>Continuer \u00e0 explorer CSS et ses subtilit\u00e9s peut grandement am\u00e9liorer vos capacit\u00e9s de d\u00e9veloppement. Vous pouvez aussi vous r\u00e9f\u00e9rer \u00e0 des ressources externes comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">la documentation de Mozilla<\/a> pour une compr\u00e9hension plus approfondie d&rsquo;autres concepts avanc\u00e9s en CSS. Des cours en ligne sur des plateformes comme <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> peuvent \u00e9galement vous offrir un apprentissage structur\u00e9.<\/p>\n\n<!-- Ajout de liens internes -->\n<p>Pour approfondir vos connaissances en CSS et HTML, n&rsquo;h\u00e9sitez pas \u00e0 explorer d&rsquo;autres articles tels que <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">Fonctionnement du navigateur web<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er votre premi\u00e8re page HTML<\/a>, ou <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">Tout savoir sur l\u2019\u00e9l\u00e9ment HTML head<\/a>. Vous pouvez \u00e9galement apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/envoyer-courrier-electronique-html\" target=\"_blank\" rel=\"noopener\">envoyer un courrier \u00e9lectronique en HTML<\/a> et d\u00e9couvrir des <a href=\"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\" target=\"_blank\" rel=\"noopener\">guides sur l\u2019int\u00e9gration des m\u00e9dias comme le vid\u00e9o et l\u2019audio en HTML<\/a>.<\/p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Comprendre et ma\u00eetriser les <strong>Feuilles de Style en Cascade (CSS)<\/strong> et l&rsquo;h\u00e9ritage des propri\u00e9t\u00e9s CSS est essentiel pour tout d\u00e9veloppeur web. Cela permet de cr\u00e9er des sites web maintenables, performants et esth\u00e9tiquement plaisants. continuez \u00e0 pratiquer ces concepts et \u00e0 explorer les multiples techniques avanc\u00e9es de CSS pour devenir un expert dans le domaine. Pour d\u00e9couvrir plus de tutoriels sur CSS, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc\u00e9\/200\" target=\"_blank\" rel=\"noopener\">les techniques avanc\u00e9es en CSS<\/a>, et apprenez \u00e0 concevoir des interfaces utilisateurs modernes et dynamiques.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML ET CSS Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Les Feuilles de Style en Cascade (CSS) jouent un r\u00f4le essentiel dans la cr\u00e9ation de sites web attrayants et fonctionnels. Comprendre l&rsquo;h\u00e9ritage en CSS et&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2737,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5347","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\/5347","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=5347"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5347\/revisions"}],"predecessor-version":[{"id":6033,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5347\/revisions\/6033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2737"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}