{"id":5337,"date":"2024-08-27T16:05:35","date_gmt":"2024-08-27T16:05:35","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\/"},"modified":"2024-11-08T19:25:56","modified_gmt":"2024-11-08T19:25:56","slug":"syntaxe-css-bases-connaitre","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\/","title":{"rendered":"3.1 Syntaxe du CSS : Les Bases \u00e0 Conna\u00eetre"},"content":{"rendered":"\n<p><strong>3.1 Syntaxe du CSS : Les Bases \u00e0 Conna\u00eetre<\/strong> est un sujet essentiel pour tout d\u00e9veloppeur web en d\u00e9but de parcours. La ma\u00eetrise des bases du CSS (Cascading Style Sheets) est cruciale pour cr\u00e9er des sites web esth\u00e9tiques et fonctionnels. Plongeons dans les fondements de la syntaxe CSS pour am\u00e9liorer vos comp\u00e9tences en web design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Syntaxe CSS<\/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\/586287439?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('.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>La syntaxe CSS consiste principalement \u00e0 s\u00e9lectionner des \u00e9l\u00e9ments HTML sp\u00e9cifiques et \u00e0 leur appliquer des styles. Le CSS se compose de s\u00e9lecteurs, de propri\u00e9t\u00e9s et de valeurs, formant ainsi une d\u00e9claration. Voyons comment cr\u00e9er une d\u00e9claration CSS de base.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de Base<\/h3>\n\n\n\n<p>La syntaxe de base d&rsquo;une r\u00e8gle CSS est simple : elle se compose d&rsquo;un s\u00e9lecteur suivi d&rsquo;un bloc de d\u00e9clarations. Un s\u00e9lecteur pointe vers l&rsquo;\u00e9l\u00e9ment HTML que vous souhaitez styliser. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* S\u00e9lectionne tous les \u00e9l\u00e9ments de titre h1 et leur applique des styles *\/\nh1 {\n    color: blue; \/* propri\u00e9t\u00e9 de couleur *\/\n    font-size: 24px; \/* propri\u00e9t\u00e9 de taille de police *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les S\u00e9lecteurs CSS<\/h3>\n\n\n\n<p>Les s\u00e9lecteurs jouent un r\u00f4le crucial dans la s\u00e9lection des \u00e9l\u00e9ments HTML que vous souhaitez styliser. Voici quelques-uns des types de s\u00e9lecteurs les plus courants :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteur de Type<\/h4>\n\n\n\n<p>Le s\u00e9lecteur de type cible tous les \u00e9l\u00e9ments d\u2019un type sp\u00e9cifique, par exemple, tous les paragraphes <code>&lt;p&gt;<\/code> ou tous les en-t\u00eates <code>&lt;h1&gt;<\/code> d&rsquo;une page.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n    color: red;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteur de Classe<\/h4>\n\n\n\n<p>Le s\u00e9lecteur de classe cible les \u00e9l\u00e9ments qui ont un attribut de classe sp\u00e9cifique. Il s&rsquo;utilise avec un point suivi du nom de la classe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.nom_de_classe {\n    background-color: yellow;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9lecteur d&rsquo;ID<\/h4>\n\n\n\n<p>Le s\u00e9lecteur d&rsquo;ID cible un \u00e9l\u00e9ment unique avec un attribut <code>id<\/code> sp\u00e9cifique. Il s&rsquo;utilise avec un di\u00e8se suivi de l&rsquo;identifiant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>#identifiant {\n    font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Propri\u00e9t\u00e9s et Valeurs<\/h3>\n\n\n\n<p>Le c\u0153ur du CSS se trouve dans ses propri\u00e9t\u00e9s et les valeurs qui leur sont attribu\u00e9es. Voici quelques-unes des propri\u00e9t\u00e9s les plus courantes que vous utiliserez souvent :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">color<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>color<\/code> d\u00e9finit la couleur du texte d&rsquo;un \u00e9l\u00e9ment.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n    color: green; \/* d\u00e9finit le texte en vert *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">font-size<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>font-size<\/code> ajuste la taille du texte dans un \u00e9l\u00e9ment.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n    font-size: 28px; \/* d\u00e9finit la taille de la police \u00e0 28 pixels *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">background-color<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>background-color<\/code> d\u00e9finit la couleur de fond d&rsquo;un \u00e9l\u00e9ment.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>div {\n    background-color: lightblue; \/* d\u00e9finit le fond en bleu clair *\/\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">margin<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>margin<\/code> d\u00e9finit l&rsquo;espace ext\u00e9rieur autour d&rsquo;un \u00e9l\u00e9ment.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h2 {\n    margin: 20px; \/* ajoute une marge de 20 pixels autour du titre h2 *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les S\u00e9lecteurs et les Propri\u00e9t\u00e9s<\/h3>\n\n\n\n<p>En combinant des s\u00e9lecteurs et des propri\u00e9t\u00e9s, vous pouvez cr\u00e9er des styles complexes pour votre site web. Voici un exemple o\u00f9 nous stylisons diff\u00e9rentes parties d&rsquo;une page:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    font-family: Arial, sans-serif; \/* Propri\u00e9t\u00e9 de police *\/\n    margin: 0; \/* Suppression de la marge par d\u00e9faut *\/\n    padding: 0; \/* Suppression de la marge par d\u00e9faut *\/\n}\n\nheader {\n    background-color: #333;\n    color: white;\n    padding: 10px 0;\n}\n\nheader h1 {\n    text-align: center;\n    margin: 0;\n}\n\np {\n    font-size: 18px;\n    line-height: 1.6;\n}\n\na {\n    color: #0066cc;\n    text-decoration: none;\n}\n\na:hover {\n    text-decoration: underline;\n}\n<\/code><\/pre>\n\n\n\n<p>En continuant \u00e0 explorer et \u00e0 exp\u00e9rimenter avec le CSS, vous pouvez am\u00e9liorer votre ma\u00eetrise des concepts de base et avancer vers des conceptions de pages web plus complexes. Apr\u00e8s avoir lu et appliqu\u00e9 ces bases, vous pouvez consulter des ressources suppl\u00e9mentaires telles que <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> pour en savoir plus sur les propri\u00e9t\u00e9s CSS et leurs applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur la Syntaxe du CSS<\/h2>\n\n\n\n<p>Les bases de la <strong>Syntaxe CSS<\/strong> sont fondamentales pour tout d\u00e9veloppeur web. Une bonne compr\u00e9hension des s\u00e9lecteurs, des propri\u00e9t\u00e9s et des valeurs vous permettra de cr\u00e9er des sites web attrayants et fonctionnels. Continuez \u00e0 pratiquer et \u00e0 explorer les nombreuses possibilit\u00e9s offertes par le CSS. Pour des exemples plus avanc\u00e9s et des projets pratiques, explorez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">CSS avanc\u00e9 et les meilleures pratiques<\/a>.<\/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-CSS.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML CSS Offre\" title=\"\"><\/a>\n\n\n<!-- Add 6 Internal Links below -->\n\n<p>Pour approfondir vos connaissances en HTML et CSS, vous pouvez consulter les articles suivants:<\/p>\n\n<ul>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">Fonctionnement d&rsquo;un navigateur web<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">Les bases du langage HTML<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">Cr\u00e9er votre premi\u00e8re page HTML<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">\u00c9l\u00e9ment HTML Head<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\">R\u00e9diger du CSS pour vos pages HTML<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/feuilles-style-cascade-heritage-css\">Les feuilles de style en cascade et l&rsquo;h\u00e9ritage<\/a><\/li>\n<\/ul>\n\n\n<!-- Add 4 External Links below -->\n\n<p>Pour des ressources externes, voici quelques lectures recommand\u00e9es:<\/p>\n\n<ul>\n  <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">Guide CSS sur MDN<\/a><\/li>\n  <li><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noopener\">Tutoriels CSS sur W3Schools<\/a><\/li>\n  <li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"noopener\">Guide Flexbox sur CSS-Tricks<\/a><\/li>\n  <li><a href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\" target=\"_blank\" rel=\"noopener\">CSS Reset par Eric Meyer<\/a><\/li>\n<\/ul>\n\n\n<!-- Add Banner Link Below -->\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 CSS Offre\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>3.1 Syntaxe du CSS : Les Bases \u00e0 Conna\u00eetre est un sujet essentiel pour tout d\u00e9veloppeur web en d\u00e9but de parcours. La ma\u00eetrise des bases&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2776,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5337","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\/5337","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=5337"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5337\/revisions"}],"predecessor-version":[{"id":5338,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5337\/revisions\/5338"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2776"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}