{"id":392,"date":"2021-01-26T19:35:37","date_gmt":"2021-01-26T18:35:37","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=392"},"modified":"2021-01-30T16:48:27","modified_gmt":"2021-01-30T15:48:27","slug":"en-mode-projet-ecrire-sa-feuille-avec-style","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2021\/01\/26\/en-mode-projet-ecrire-sa-feuille-avec-style\/","title":{"rendered":"En mode projet, sequel : \u00e9crire sa feuille avec style | \u00c9pisode 1"},"content":{"rendered":"\n<p><strong><em>En mode projet, sequel<span class=\"footnote_referrer\"><a role=\"button\" tabindex=\"0\" onclick=\"footnote_moveToReference_392_1('footnote_plugin_reference_392_1_1');\" onkeypress=\"footnote_moveToReference_392_1('footnote_plugin_reference_392_1_1');\" ><sup id=\"footnote_plugin_tooltip_392_1_1\" class=\"footnote_plugin_tooltip_text\">[1]<\/sup><\/a><span id=\"footnote_plugin_tooltip_text_392_1_1\" class=\"footnote_tooltip\">Si vous n\u2019\u00eates pas adepte du vocabulaire des s\u00e9ries TV: un sequel, c\u2019est la suite d\u2019une s\u00e9rie (et \u00e7a diff\u00e8re d\u2019un spin-off, qui est une nouvelle s\u00e9rie avec un personnage secondaire de&nbsp;&#x2026; <span class=\"footnote_tooltip_continue\"  onclick=\"footnote_moveToReference_392_1('footnote_plugin_reference_392_1_1');\">Continue reading<\/span><\/span><\/span><script type=\"text\/javascript\"> jQuery('#footnote_plugin_tooltip_392_1_1').tooltip({ tip: '#footnote_plugin_tooltip_text_392_1_1', tipClass: 'footnote_tooltip', effect: 'fade', predelay: 0, fadeInSpeed: 200, delay: 400, fadeOutSpeed: 200, position: 'top center', relative: true, offset: [-7, 0], });<\/script> : Ecrire sa feuille <del>de<\/del><\/em> avec style<\/strong><br><em>La s\u00e9rie EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de r\u00e9aliser une des op\u00e9rations dont vous pourrez avoir besoin pour votre projet. Le billet est publi\u00e9 en parall\u00e8le des fichiers HTML et CSS sur la dropbox.<\/em><br><em>Le<\/em> sequel <em>\u00ab \u00c9crire sa feuille avec style \u00bb se destine \u00e0 accompagner votre finalisation ; il correspond au dossier <code>Playground_feuille_de_style<\/code> que vous trouverez dans le dossier <code>PratiqueDuWeb<\/code> sur notre Dropbox.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c9pisode 1 | <em>L&rsquo;Ordre et la Structure<\/em><\/h2>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Ne pas avoir travaill\u00e9 pour rien<\/h2>\n\n\n\n<p>Rappelez-vous : un site web est un projet au long court, qui se construit par \u00e9tape; vous avez d\u00e9j\u00e0 franchi plusieurs de ces \u00e9tapes, en pr\u00e9figurant votre site avec vos <em>wireframes<\/em>, vos planches de tendance, votre <a href=\"https:\/\/iris.univ-tlse2.fr\/moodle-ent\/course\/view.php?id=15737#section-11\">squelette HTML<\/a>.<\/p>\n\n\n\n<p>Au stade de la cr\u00e9ation de votre feuille de style, vous n&rsquo;inventez plus rien : vous ex\u00e9cutez les instructions de votre design, \u00e0 la lettre.<br>Si vous vous demandez par o\u00f9 commencer, reprenez votre <em>wireframe<\/em> et v\u00e9rifier que votre fichier HTML lui correspond exactement.<br>Bien entendu, je consid\u00e8re que le contenu de vos fichiers HTML est complet: vous avez mis tout le texte, toutes les images (celles qui sont int\u00e9gr\u00e9es dans une figure), et, surtout, tous les liens et ancres qui vous permettent de naviguer \u00e0 l&rsquo;int\u00e9rieur de votre page web ou d&rsquo;une page \u00e0 l&rsquo;autre de votre site.<\/p>\n\n\n\n<p>C&rsquo;est ok ? Alors, allons-y pour la feuille de style.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Organiser sa feuille de style<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Pour cr\u00e9er une bonne feuille de style, il faut trois choses : <strong>de la m\u00e9thode, de la m\u00e9thode, et de la m\u00e9thode<\/strong>.<\/p><\/blockquote>\n\n\n\n<p>Ok, je m&rsquo;inspire tr\u00e8s fortement de la c\u00e9l\u00e8bre phrase d&rsquo;<a href=\"https:\/\/fr.wikipedia.org\/wiki\/Henri-Georges_Clouzot#Divers\">Henri-Georges Clouzot<\/a> :<br><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/citation-celebre.leparisien.fr\/images\/citation\/large\/citation-henri-georges-clouzot-14782.png?w=740&#038;ssl=1\" alt=\"citation d'Henri-George Clouzot\"><\/p>\n\n\n\n<p>Mais c&rsquo;est pour mieux vous faire comprendre que l&rsquo;\u00e9laboration de la feuille de style CSS demande d&rsquo;\u00eatre assez m\u00e9thodique, pour ne pas se faire d\u00e9border. Je vais donc d\u00e9tailler une m\u00e9thode qui vous permettra de penser \u00e0 tout sans \u00eatre submerg\u00e9\u00b7e par les d\u00e9tails.<br><strong>Le principe est simple : aller du g\u00e9n\u00e9ral au particulier, des \u00e9l\u00e9ments les plus g\u00e9n\u00e9riques<\/strong> (s&rsquo;appliquant \u00e0 tous les blocs et \u00e0 toutes les pages), <strong>aux plus sp\u00e9cifiques<\/strong> (s&rsquo;appliquant, par exemple, \u00e0 un ID propre \u00e0 une page particuli\u00e8re).<\/p>\n\n\n\n<p>Il est aussi profitable de partager votre feuille de style en section, vous permettant de vite vous rep\u00e9rer visuellement.<br>Les d\u00e9veloppeurs utilisent souvent les commentaires pour cr\u00e9er ces sections, et certains \u00ab\u00a0d\u00e9corent\u00a0\u00bb les titres des sections pour les distinguer des simples commentaires de code.<br>C&rsquo;est ce que je vous ai montr\u00e9 dans les diff\u00e9rentes feuilles de style vues en cours, comme ici:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/**********************\n *** DESIGN G\u00c9N\u00c9RAL ***\n **********************\/\n\nbody {\n    background-color: #383838;\n}\n\nh1,\nh2,\nh3,\nfigcaption {\n    margin: auto;\n    text-align: center;\n} \/* si vous utilisez une m\u00eame r\u00e8gle CSS pour plusieurs balises, ces balises peuvent \u00eatre indiqu\u00e9es les unes \u00e0 la suite des autres, s\u00e9par\u00e9es par une virgule : ici, tous mes titres, mes figcaptions et mes \u00e9l\u00e9ments de menu sont centr\u00e9s *\/<\/pre>\n\n\n\n<p>Les titres de section sont ici en majuscule et entour\u00e9s d&rsquo;ast\u00e9risque, pour les diff\u00e9rencier des commentaires sur le code. Sur des feuilles de style longues, certains d\u00e9veloppeurs num\u00e9rotent carr\u00e9ment leurs sections, pour mieux s&rsquo;y retrouver.<\/p>\n\n\n\n<p>Par convention, je mettrais dans ce tutoriel un code HTML simplifi\u00e9: les balises de niveau 1, 2 ou 3, 4 si vraiment c&rsquo;est n\u00e9cessaire, pour ne pas alourdir la d\u00e9monstration.<br>En ce qui concerne vos pages HTML, si les balises de niveaux inf\u00e9rieures g\u00eanent votre compr\u00e9hension, pensez \u00e0 les fermer.[^1]<\/p>\n\n\n\n<p>[^1]: vous vous rappelez qu&rsquo;on peut le faire, dans Brackets, en cliquant sur le tiret vert \u00e0 gauche d&rsquo;une balise ? Son contenu est alors r\u00e9duit, et on voit un CODE en capitales vertes s&rsquo;afficher \u00e0 la place.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. La feuille de style par d\u00e9faut<\/h3>\n\n\n\n<p>Pour commencer, votre feuille de style n\u00e9cessite peut-\u00eatre que vous ayez modifi\u00e9 quelques \u00e9l\u00e9ments par d\u00e9faut, qui vont s&rsquo;appliquer indiff\u00e9remment \u00e0 toutes les pages de votre design. C&rsquo;est dans cette section que vous mettrez, par exemple,<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>la r\u00e8gle d&rsquo;Ethan Marcotte, gr\u00e2ce \u00e0 laquelle les images deviennent responsive et s&rsquo;adaptent \u00e0 la taille de leur parent ;<\/li><li>un <em>reset<\/em> CSS, c&rsquo;est-\u00e0-dire une remise \u00e0 z\u00e9ro des feuilles de style des navigateurs (ce qui leur donne le m\u00eame comportement avec votre feuille de style, plut\u00f4t que ces diff\u00e9rences aga\u00e7antes, selon le navigateur avec lequel vous acc\u00e9dez \u00e0 votre site);<\/li><li>le fond sombre de votre <code>\u001dbody<\/code>, qui vaudrait pour toutes vos pages.<\/li><\/ul>\n\n\n\n<p>Voici un exemple de ce que \u00e7a peut donner :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/***********************************\n *** FEUILLE DE STYLE PAR D\u00c9FAUT ***\n ***********************************\/\n\n\/* un \"reset\" simpliste *\/ \n\nheader\nh1,\nh2,\nh3,\nnav,\ndiv,\nsection {\n    margin: 0;\n    padding: 0;\n    \/* met les marges des blocs \u00e0 z\u00e9ro, pour que tous les navigateurs aient le m\u00eame comportement *\/\n    box-sizing: border-box; \/* harmonise toutes les largeurs et hauteurs de boites *\/\n}\n\n\/* pour que les images soient responsives et r\u00e9gies par la figure qui est leur bloc parent *\/\nimg {\n    max-width: 100%;\n    height: auto;\n}\n\nbody {\n    background-color: #383838;\n}<\/pre>\n\n\n\n<p>J&rsquo;ai utilis\u00e9 un \u00ab\u00a0reset\u00a0\u00bb ultra-simple, qui \u00e9vite que les blocs de structure de la page soient coll\u00e9s ou \u00e9cart\u00e9s diff\u00e9remment selon le navigateur (quand on cr\u00e9\u00e9 par exemple des blocs de titre qui d\u00e9bordent de leurs contenants, les marges peuvent vite devenir aga\u00e7antes).<br>Vous pouvez ajouter \u00e0 la liste les blocs de votre choix.<\/p>\n\n\n\n<p>Il existe plusieurs <em>CSS Reset<\/em> dont le plus c\u00e9l\u00e8bre est celui d&rsquo;<a href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\">Eric Meyer<\/a>.<br>Mais attention, plus un <em>reset CSS<\/em> est complet, plus vous aurez \u00e0 r\u00e9\u00e9crire les r\u00e8gles qu&rsquo;il aura effac\u00e9.<br>Aussi, si vous en voyez l&rsquo;utilit\u00e9, contentez-vous d&rsquo;un <em>reset<\/em> que vous comprenez et qui vous est enti\u00e8rement utile. <strong>Sinon, n&rsquo;en utilisez pas, ce n&rsquo;est absolument pas n\u00e9cessaire, et ce sera moins compliqu\u00e9 pour vous.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. La structure de la page<\/h3>\n\n\n\n<p>Selon votre fichier HTML, votre page est structur\u00e9 en plusieurs balises : vous pouvez, par exemple, avoir<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>un <code>header<\/code>, un <code>main<\/code> et un <code>footer<\/code> de premier niveau,<\/li><li>puis, dans le <code>header<\/code>, un <code>h1<\/code>, un <code>h2<\/code>et un <code>nav<\/code> de second niveau,<\/li><li>et dans le <code>main<\/code>, plusieurs <code>section<\/code> de second niveau,<\/li><li>et enfin, dans chacune des sections, une ou plusieurs <code>div<\/code> de troisi\u00e8me niveau (avec la class .card, par exemple).<\/li><\/ul>\n\n\n\n<p>En HTML, cela donnera l&rsquo;organisation suivante (avec 4 sections contenant chacune 4 divisions avec la classe <code>.card<\/code>):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body>\n    &lt;header>\n       &lt;h1>Le Titre&lt;\/h1>\n       &lt;h2>le sous-titre&lt;\/h2>\n       &lt;nav>le menu de navigation&lt;\/nav>\n    &lt;\/header>\n    &lt;main>\n        &lt;section>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n        &lt;\/section>\n        &lt;section>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n        &lt;\/section>\n        &lt;section>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n            &lt;div class=\"card\">&lt;\/div>\n        &lt;\/section>\n    &lt;\/main>\n    &lt;footer>&lt;\/footer>\n\n&lt;\/body><\/pre>\n\n\n\n<p>La structure de votre page d\u00e9pend de la fa\u00e7on dont ces balises sont agenc\u00e9es, niveau par niveau. J&rsquo;ai mis trois sections dans cet exemple, mais par la suite je ne d\u00e9taillerai que l&rsquo;int\u00e9rieur d&rsquo;une section.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Le mod\u00e8le des boites<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Les balises de niveau 1<\/h5>\n\n\n\n<p><strong>Au niveau 1<\/strong>, par exemple, vous savez que vos blocs s&rsquo;aligneront les un en dessous des autres, et \u00e7a vous convient. Ok, rien \u00e0 \u00e9crire, dans ce cas.<br>Mais vous pouvez vouloir que votre site ait une taille maximale fixe (par exemple, <em>1440px<\/em>, et une taille en pourcentage pour toutes les valeurs que prendra la fen\u00eatre du navigateur en dessous de la taille maximale (par exemple, <em>80% du body)<\/em>.<\/p>\n\n\n\n<p>En CSS, cela donnera<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/**************************\n *** STRUCTURE G\u00c9N\u00c9RALE ***\n **************************\/\n\n header, main, footer {\n     max-width: 1440px;\n     width: 80%;\n }<\/pre>\n\n\n\n<p>Il y a un autre moyen d&rsquo;obtenir le m\u00eame r\u00e9sultat, c&rsquo;est d&rsquo;avoir un conteneur (ou un parent) englobant pour tout son site: c&rsquo;est alors lui qui va donner les limites ext\u00e9rieures \u00e0 tous ses enfants. Cela donnera alors le r\u00e9sultat suivant:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"> &lt;body>\n    &lt;main id=\"site-content\"> \/* je lui donne un ID pour ne pas le confondre avec le main qui englobe le contenu (divisions, sections, etc.) *\/\n          &lt;header>\n              &lt;h2>&lt;\/h2>\n              &lt;h1>&lt;\/h1>\n              &lt;nav>&lt;\/nav>\n          &lt;\/header>\n          &lt;main>\n              &lt;section>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n              &lt;\/section>\n              &lt;section>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n              &lt;\/section>\n              &lt;section>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n                  &lt;div class=\"card\">&lt;\/div>\n              &lt;\/section>\n          &lt;\/main>\n   &lt;\/body><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#site-content {\n    margin: auto 10%; \/* 10% \u00e0 gauche et \u00e0 droite *\/\n    max-width: 1440px;\n}<\/pre>\n\n\n\n<p>C&rsquo;est un principe \u00e0 bien comprendre : un conteneur parent peut-\u00eatre plus efficace pour positionner plusieurs enfants.<br>Ici la diff\u00e9rence n&rsquo;est pas trop flagrante, mais d\u00e8s que vous avez beaucoup d&rsquo;enfants \u00e0 g\u00e9rer, \u00e7a devient clair.<br>Par exemple, nos sections vont \u00eatre tr\u00e8s utiles pour g\u00e9rer le positionnement des <code>.card<\/code>, \u00e0 l&rsquo;aide de <em>flexbox<\/em>.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Les balises de niveau 2 et 3 : un design fluide<\/h5>\n\n\n\n<p>La largeur variable du <code>header<\/code>, du <code>main<\/code>et du <code>footer<\/code>indique d\u00e9j\u00e0 que vous aller cr\u00e9er un design <em>fluide<\/em>. Les balises de niveau 2 et de niveau 3 vont renforcer cette fluidit\u00e9. On utilisera principalement les possibilit\u00e9s de <code>display:flex<\/code> pour cela, notamment la propri\u00e9t\u00e9 <code>flex-wrap : wrap<\/code>, qui nous permettra de faire passer une balise sous une autre d\u00e8s qu&rsquo;elle n&rsquo;a plus la place de se mettre \u00e0 c\u00f4t\u00e9.<br>Mais nous utiliserons aussi les proportions variables (les pourcentages), si besoin.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Le <code>header<\/code><\/li><\/ol>\n\n\n\n<p><strong>\u00c0 l&rsquo;int\u00e9rieur du <code>header<\/code>, au niveau 2<\/strong>, vous afficherez, l&rsquo;un en dessous de l&rsquo;autre, votre titre, votre sous-titre et votre menu de navigation.<br>L\u00e0 non plus, rien \u00e0 \u00e9crire, les blocs s&rsquo;alignent par d\u00e9faut les uns en dessous des autres.<\/p>\n\n\n\n<p>Par contre, <strong>\u00e0 l&rsquo;int\u00e9rieur de votre menu de navigation (au niveau 3, donc)<\/strong>, vous voudrez que les \u00e9l\u00e9ments s&rsquo;alignent horizontalement; on utilisera <code>display:flex<\/code>pour \u00e7a. Mais si la fen\u00eatre du navigateur est trop petite, se serait bien que les \u00e9l\u00e9ments du menu passent les uns en dessous des autres, au fur et \u00e0 mesure que l&rsquo;on r\u00e9duit la fen\u00eatre. Ok, c&rsquo;est possible avec <code>flex-wrap : wrap<\/code>.<br>Mais le menu a une petite particularit\u00e9 : c&rsquo;est un <code>nav<\/code> (niveau 2) l&rsquo;int\u00e9rieur duquel on cr\u00e9e une liste <code>ul<\/code> (niveau 3), \u00e0 l&rsquo;int\u00e9rieur de laquelle il y a des \u00e9l\u00e9ments de liste <code>li<\/code>(niveau 4); c&rsquo;est donc la liste <code>ul<\/code> qu&rsquo;il faudra passer en <code>display:flex<\/code>, pour que ses enfants <code>li<\/code> soient flexibles. Si vous passez la <code>nav<\/code> en <code>display:flex<\/code>, \u00e7a ne donnera rien, puisqu&rsquo;elle ne contient qu&rsquo;un enfant (la liste <code>ul<\/code>).<\/p>\n\n\n\n<p>En CSS, vous devrez donc \u00e9crire :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">header nav ul {\n     display: flex;\n     flex-wrap: wrap;\n }\/* header nav ul : indique un enchassement: seules les listes ul ench\u00e2ss\u00e9es dans un nav ench\u00e2ss\u00e9 dans un header sont concern\u00e9es par la r\u00e8gle CSS qui suit. *\/<\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Le <code>main<\/code><br>On va aussi r\u00e9utiliser <code>display:flex<\/code> sur le <code>main<\/code>, pour que les sections soient flexibles.<br>Mais pour faire en sorte que les sections passent les unes en dessous des autres \u00e0 partir d&rsquo;une certaine largeur de fen\u00eatres, on va utiliser les <em>medias queries<\/em>.<br>Donc pour l&rsquo;instant, notre CSS compl\u00e8te ressemble \u00e0 \u00e7a:<\/li><\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/***********************************\n *** FEUILLE DE STYLE PAR D\u00c9FAUT ***\n ***********************************\/\n\n\/* un \"reset\" simpliste *\/ \n\nheader\nh1,\nh2,\nh3,\nnav,\ndiv,\nsection {\n    margin: 0;\n    padding: 0;\n    \/* met les marges des blocs \u00e0 z\u00e9ro, pour que tous les navigateurs aient le m\u00eame comportement *\/\n    box-sizing: border-box; \/* harmonise toutes les largeurs et hauteurs de boites *\/\n}\n\n\/* pour que les images soient responsives et r\u00e9gies par la figure qui est leur bloc parent *\/\nimg {\n    max-width: 100%;\n    height: auto;\n}\n\nbody {\n    background-color: #383838;\n}\n\n\/**************************\n *** STRUCTURE G\u00c9N\u00c9RALE ***\n **************************\/\n\n header, main, footer {\n     max-width: 1440px;\n     width: 80%;\n }\n\n#site-content {\n    margin: auto 10%; \/* 10% \u00e0 gauche et \u00e0 droite *\/\n    max-width: 1440px;\n }\n\nheader nav ul {\n     display: flex;\n     flex-wrap: wrap;\n }\/* header nav ul : indique un enchassement: seules les listes ul ench\u00e2ss\u00e9es dans un nav ench\u00e2ss\u00e9 dans un header sont concern\u00e9es par la r\u00e8gle CSS qui suit. *\/\n\nmain {\n    display:flex;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">To be continued<\/h2>\n\n\n\n<p>Et voil\u00e0 : \u00e0 l&rsquo;issue de ce premier \u00e9pisode, vous aurez \u00e9crit une page web fluide, gr\u00e2ce \u00e0 une feuille de style <code>flex<\/code>ible \ud83d\ude42<\/p>\n\n\n\n<p>Dans le prochain \u00e9pisode, nous parlerons des <em>media queries<\/em> pour adapter notre site aux appareils qui le consulte: t\u00e9l\u00e9phone, tablette.<\/p>\n<div class=\"speaker-mute footnotes_reference_container\"> <div class=\"footnote_container_prepare\"><p><span role=\"button\" tabindex=\"0\" class=\"footnote_reference_container_label pointer\" onclick=\"footnote_expand_collapse_reference_container_392_1();\">References<\/span><span role=\"button\" tabindex=\"0\" class=\"footnote_reference_container_collapse_button\" style=\"display: none;\" onclick=\"footnote_expand_collapse_reference_container_392_1();\">[<a id=\"footnote_reference_container_collapse_button_392_1\">+<\/a>]<\/span><\/p><\/div> <div id=\"footnote_references_container_392_1\" style=\"\"><table class=\"footnotes_table footnote-reference-container\"><caption class=\"accessibility\">References<\/caption> <tbody> \r\n\r\n<tr class=\"footnotes_plugin_reference_row\"> <th scope=\"row\" class=\"footnote_plugin_index_combi pointer\"  onclick=\"footnote_moveToAnchor_392_1('footnote_plugin_tooltip_392_1_1');\"><a id=\"footnote_plugin_reference_392_1_1\" class=\"footnote_backlink\"><span class=\"footnote_index_arrow\">&#8593;<\/span>1<\/a><\/th> <td class=\"footnote_plugin_text\">Si vous n\u2019\u00eates pas adepte du vocabulaire des s\u00e9ries TV: un sequel, c\u2019est la suite d\u2019une s\u00e9rie (et \u00e7a diff\u00e8re d\u2019un spin-off, qui est une nouvelle s\u00e9rie avec un personnage secondaire de la premi\u00e8re)\u2026<\/td><\/tr>\r\n\r\n <\/tbody> <\/table> <\/div><\/div><script type=\"text\/javascript\"> function footnote_expand_reference_container_392_1() { jQuery('#footnote_references_container_392_1').show(); jQuery('#footnote_reference_container_collapse_button_392_1').text('\u2212'); } function footnote_collapse_reference_container_392_1() { jQuery('#footnote_references_container_392_1').hide(); jQuery('#footnote_reference_container_collapse_button_392_1').text('+'); } function footnote_expand_collapse_reference_container_392_1() { if (jQuery('#footnote_references_container_392_1').is(':hidden')) { footnote_expand_reference_container_392_1(); } else { footnote_collapse_reference_container_392_1(); } } function footnote_moveToReference_392_1(p_str_TargetID) { footnote_expand_reference_container_392_1(); var l_obj_Target = jQuery('#' + p_str_TargetID); if (l_obj_Target.length) { jQuery( 'html, body' ).delay( 0 ); jQuery('html, body').animate({ scrollTop: l_obj_Target.offset().top - window.innerHeight * 0.2 }, 380); } } function footnote_moveToAnchor_392_1(p_str_TargetID) { footnote_expand_reference_container_392_1(); var l_obj_Target = jQuery('#' + p_str_TargetID); if (l_obj_Target.length) { jQuery( 'html, body' ).delay( 0 ); jQuery('html, body').animate({ scrollTop: l_obj_Target.offset().top - window.innerHeight * 0.2 }, 380); } }<\/script>","protected":false},"excerpt":{"rendered":"<p>En mode projet, sequel[1]Si vous n\u2019\u00eates pas adepte du vocabulaire des s\u00e9ries TV: un sequel, c\u2019est la suite d\u2019une s\u00e9rie (et \u00e7a diff\u00e8re d\u2019un spin-off, qui est une nouvelle s\u00e9rie&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":398,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11,14,46,48],"tags":[43,65,64],"class_list":["post-392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-lire","category-a-tester","category-en-mode-projet","category-pratique-du-web","tag-css","tag-fluide","tag-organisation"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2021\/01\/CSS-in-JavaScript-with-Angular.jpg?fit=1280%2C720&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/comments?post=392"}],"version-history":[{"count":15,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"predecessor-version":[{"id":417,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/392\/revisions\/417"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media\/398"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}