{"id":5349,"date":"2024-08-27T16:29:22","date_gmt":"2024-08-27T16:29:22","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\/"},"modified":"2024-08-27T16:29:25","modified_gmt":"2024-08-27T16:29:25","slug":"utiliser-div-span-css-guide-complet","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\/","title":{"rendered":"3.7 Utiliser div et span en CSS : Guide Complet"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>\u00c9l\u00e9ments HTML div et span en CSS<\/strong> est fondamental pour structurer et styliser vos pages web. Ces deux balises HTML sont couramment utilis\u00e9es pour cr\u00e9er des mises en page sophistiqu\u00e9es et interactives gr\u00e2ce \u00e0 CSS. Apprenons \u00e0 utiliser correctement les <strong>div et span en CSS<\/strong> avec des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>balises div et span<\/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\/586295946?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\/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 balises <code>div<\/code> et <code>span<\/code> sont essentielles pour structurer et manipuler le style des \u00e9l\u00e9ments HTML avec CSS. Tandis que la balise <code>div<\/code> est souvent utilis\u00e9e pour regrouper de larges sections de contenu, la balise <code>span<\/code> cible des parties sp\u00e9cifiques d&rsquo;un texte ou d&rsquo;une zone. Comprendre la diff\u00e9rence entre les deux et savoir quand utiliser chaque balise est crucial pour un d\u00e9veloppement web efficace. Pour en savoir plus, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">le fonctionnement d&rsquo;un navigateur web<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre la Balise <code>div<\/code><\/h3>\n\n\n\n<p>La balise <code>div<\/code> est un \u00e9l\u00e9ment de bloc, souvent utilis\u00e9 comme conteneur pour d&rsquo;autres \u00e9l\u00e9ments HTML. Elle commence sur une nouvelle ligne et s&rsquo;\u00e9tend sur toute la largeur disponible. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n  &lt;h1&gt;Bienvenue&lt;\/h1&gt;\n  &lt;p&gt;Voici un paragraphe \u00e0 l'int\u00e9rieur d'une div.&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre la Balise <code>span<\/code><\/h3>\n\n\n\n<p>La balise <code>span<\/code> est un \u00e9l\u00e9ment en ligne utilis\u00e9 pour styliser des parties sp\u00e9cifiques de texte sans forcer un saut de ligne. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;p&gt;Ce texte contient un &lt;span class=\"highlight\"&gt;mot en surbrillance&lt;\/span&gt;.&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styler les Balises avec CSS<\/h3>\n\n\n\n<p>Pour personnaliser l&rsquo;apparence des balises <code>div<\/code> et <code>span<\/code>, utilisez du CSS. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  background-color: #f4f4f4;\n  padding: 20px;\n  border: 1px solid #ccc;\n}\n\n.highlight {\n  color: red;\n  font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>div<\/code> pour Cr\u00e9er des Mises en Page<\/h3>\n\n\n\n<p>Une utilisation courante de la balise <code>div<\/code> est de cr\u00e9er des mises en page. Voici un exemple de mise en page \u00e0 trois colonnes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"row\"&gt;\n  &lt;div class=\"column\"&gt;Colonne 1&lt;\/div&gt;\n  &lt;div class=\"column\"&gt;Colonne 2&lt;\/div&gt;\n  &lt;div class=\"column\"&gt;Colonne 3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.row {\n  display: flex;\n}\n\n.column {\n  flex: 1;\n  padding: 10px;\n  border: 1px solid #ddd;\n  margin: 5px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>span<\/code> pour Styliser du Texte<\/h3>\n\n\n\n<p>La balise <code>span<\/code> est id\u00e9ale pour styliser des segments pr\u00e9cis de texte. Par exemple, pour mettre en \u00e9vidence du contenu sp\u00e9cial :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;p&gt;Apprenez \u00e0 &lt;span class=\"emphasis\"&gt;programmer&lt;\/span&gt; avec des tutoriels faciles \u00e0 suivre.&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.emphasis {\n  font-style: italic;\n  color: blue;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner <code>div<\/code> et <code>span<\/code> pour un Contr\u00f4le Granulaire<\/h3>\n\n\n\n<p>Combiner les balises <code>div<\/code> et <code>span<\/code> permet un contr\u00f4le granulaire sur la mise en page et le style. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"box\"&gt;\n  &lt;p&gt;Ce texte est \u00e0 l'int\u00e9rieur d'un &lt;span class=\"highlight\"&gt;div&lt;\/span&gt;. &lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.box {\n  background-color: #e0f7fa;\n  padding: 15px;\n  border-radius: 5px;\n}\n\n.highlight {\n  background-color: #ffeb3b;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation<\/h3>\n\n\n\n<p>Prenons des exemples plus complexes pour montrer la flexibilit\u00e9 des balises <code>div<\/code> et <code>span<\/code> lorsqu&rsquo;elles sont utilis\u00e9es ensemble :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation de Cartes de Profil<\/h4>\n\n\n\n<p>Voici un exemple de carte de profil utilisant des <code>div<\/code> et <code>span<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"profile-card\"&gt;\n  &lt;div class=\"profile-image\"&gt;\n    &lt;img src=\"profile.jpg\" alt=\"Profile\"&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"profile-info\"&gt;\n    &lt;h2&gt;John Doe&lt;\/h2&gt;\n    &lt;p&gt;D\u00e9veloppeur Web &amp; Designer graphique&lt;\/p&gt;\n    &lt;p&gt;&lt;span class=\"highlight\"&gt;Contact :&lt;\/span&gt; john.doe@example.com&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.profile-card {\n  display: flex;\n  border: 1px solid #ccc;\n  padding: 20px;\n  border-radius: 10px;\n}\n\n.profile-image img {\n  border-radius: 50%;\n  width: 100px;\n  height: 100px;\n}\n\n.profile-info {\n  margin-left: 20px;\n}\n\n.highlight {\n  font-weight: bold;\n  color: #0d47a1;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Dialogues de Confirmation<\/h4>\n\n\n\n<p>Utilisez <code>div<\/code> pour cr\u00e9er des dialogues de confirmation avec des boutons stylis\u00e9s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"dialog\"&gt;\n  &lt;p&gt;\u00cates-vous s\u00fbr de vouloir supprimer cet \u00e9l\u00e9ment ?&lt;\/p&gt;\n  &lt;div class=\"buttons\"&gt;\n    &lt;button class=\"confirm\"&gt;Oui&lt;\/button&gt;\n    &lt;button class=\"cancel\"&gt;Non&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.dialog {\n  border: 1px solid #ef5350;\n  padding: 20px;\n  border-radius: 5px;\n  background-color: #ffebee;\n}\n\n.buttons {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.confirm {\n  background-color: #4caf50;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  margin-right: 10px;\n  cursor: pointer;\n}\n\n.cancel {\n  background-color: #f44336;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  cursor: pointer;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;utilisation des balises <strong>div et span en CSS<\/strong> est essentielle pour structurer et styliser votre contenu de mani\u00e8re efficace et flexible. Les <code>div<\/code> cr\u00e9ent des sections de contenu tandis que les <code>span<\/code> permettent de styliser des parties sp\u00e9cifiques. En combinant ces balises avec les puissantes capacit\u00e9s de stylisation de CSS, vous pouvez cr\u00e9er des mises en page responsives et des interfaces utilisateur attrayantes. Pour en savoir plus sur la mise en page avanc\u00e9e et les techniques CSS, consultez nos autres tutoriels sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">comment cr\u00e9er votre premi\u00e8re page HTML<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\" target=\"_blank\" rel=\"noopener\">les bases de la syntaxe CSS<\/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-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML &#038; CSS Offre\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html \u00c9l\u00e9ments HTML div et span en CSS est fondamental pour structurer et styliser vos pages web. Ces deux balises HTML sont couramment utilis\u00e9es pour&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2787,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5349","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\/5349","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=5349"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5349\/revisions"}],"predecessor-version":[{"id":5350,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5349\/revisions\/5350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2787"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}