bonnebulle/__html_css_js
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e58a036179965ed3a3685b1b389fdcd9c21f5d25
__html_css_js/public/0_intro.html
bonnebulle c14849a2a3 cours test
2025-11-14 07:46:06 +00:00

1380 lines
50 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="fr" id="centred">
<head>
<title>0 intro</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- GENERAL -->
<link rel="stylesheet" href="style.css">
<!-- fonts text ciblage basique -->
<link rel="stylesheet" href="./_ressources/0_intro/css/style_basics.css">
<!-- positions margin -->
<!-- <link rel="stylesheet" href="style_positions_margins.css"> -->
<!-- columns -->
<!-- <link rel="stylesheet" href="./_ressources/0_intro/css/style_columns.css"> -->
<link href="/assets/css/prism.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="toc_wrapper">
<label for="toc_checkbox">Table des matières</label>
<input id="toc_checkbox" type="checkbox">
<div id="toc"></div>
</div>
<div id="navbar">
<a href="/"><i class="fa-solid fa-code"></i> Index</a>
<a href="/vs/?folder=/www/" target="_blank" id="code_this"><i class="fa-solid fa-code"></i> vs</a>
<a href="/assets/coucou/"><i class="fa-solid fa-ghost"></i> Messages</a>
<a href="0_intro_vscode"><i class="fa-solid fa-circle-info"></i> Vscode aide</a>
<a href="https://files.bonnebulle.xyz"><i class="fa-solid fa-folder"></i> Fichiers</a>
<a href="https://snip.bonnebulle.xyz/public/snippets"><i class="fa-solid fa-scissors"></i> Snipets</a>
<a href="https://php.bonnebulle.xyz"><i class="fa-solid fa-database"></i> Php</a>
</div>
<!-- Titre -->
<h1>Bonjour le Monde !!!</h1>
<section class="centred">
<div id="contenant_basics">
<h2>HTML, balises, éléments</h2>
<p>Une page HTML est lue par le navigateur qui va interpréter son contenu, charger les ressources demandées</p>
<p>HyperText Markup Language est une façon de composer l'espace d'une page web, avec des balisages (<i>markups</i>) dont les hyperliens sont centraux.</p>
<p>Les <a href="https://developer.mozilla.org/fr/docs/Glossary/Tag">balises HTML</a> (<i>tags</i> en anglais) sont nombreuses....<br>
Elles viennent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont différenciés en objets distincts, en <span class="important">éléments</span></p>
<p class="resume">Il existe <u>plein</u> de balises permettant de créer, de base, des éléments HTML
et plein de <span class="color property">propriétés</span> d'affichage - <i>Cascading Style Sheets</i> (CSS) - qu'on peut leur ajouter (pour les modifier)... voir <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Properties" target="_blank">MDN</a>
Je vais ici principalement me référer à <i>MozillaDevNetwork</i> (MDN)... il existe énormément de ressources pour apprendre à coder...
Je vous conseille également...
Un <a href="https://admm.co/css-cheat-sheet/" target="_blank">index.sommaire</a> (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS...
Selectors <a href="https://learn.shayhowe.com/advanced-html-css/complex-selectors/" target="_blank">complexes</a> (ciblage CSS), en anglais, on les verra petit à petit
<a href="https://la-cascade.io" target="_blank">La Cascade</a> (FR), ressources sur le CSS...
</p>
<!-- <p>Commençons par quelque chose de simple....<br> -->
<!-- <p> -->
<!-- Par exemple, si on écrit ce code (HTML) : <br><code><u>texte souligné</u></code>, le texte va être souligné (un style va lui être appliqué)</code></p> -->
<h3>Vscode + template</h3>
<p>Index des projets...</br>
<b>Home/Index : <a href="https://code.bonnebulle.xyz/" target="_blank">https://code.bonnebulle.xyz</a></b><br>
Avec un sous-dossier par personne...
</p>
<p>Que vous pouvez ouvrir dans <span class="important">VSCODE</span>, le logiciel de code qu'on va utiliser...<br>
C'est une version de l'application VSCode accessible en ligne...<br>
Ce qui permet de démarrer tout de suite.... dans un environnement de travail préconfiguré<br>
Et moi de suivre vos différents projets au même endroit...<br>
Vous travaillerez depuis votre propre dossier de projet !
</p>
<p>
<br>Depuis VSC, on peut créer un fichier <i class="file">index.html</i>
<br>l'ouvrir... et taper "<kdb class="key">!</kdb>", un popup s'ouvre (IntelliSense), en faisant <kdb class="key">ENTRER</kdb>, le <i>template</i> (gabarit, préformatage) d'une page HTML est chargé...</p>
</p>
<p>Page d'aide, raccourcis :<br>
<a href="0_intro_vscode" target="_blank" class="file">0_intro_vscode</a></p>
<h3>Afficher le code source</h3>
<p>On va déjà regarder comment est composée une page HTML basique...</p>
<p>Lien vers <a class="file" href="./0_index_empty.html" target="_blank">0_index_empty.html</a></p>
<kdb class="key">CTRL+MAJ+I</kdb> Les outils de développement s'affichent,<br>
<kdb class="key">CTRL+U</kdb>, le code source (le fichier avant qu'il soit lu/interprété par le navigateur)
<h4>... structure de la page, head, body, footer</h4>
<br>Par convention (et méthode)
<br>... on met les contenus contextuels (<i>meta</i>) et ressources dans <u>la tête de la page</u> <codescaped class="done">&lt;head&gt;titre, feuilles de style .css, etc.&lt;/head&gt;</codescaped> (contenus <b>in</b>visibles)
<br>... on y met les contenus courants, les textes, images, dans le <u>corps de la page</u> <codescaped class="done">&lt;body&gt;articles, textes, images, contenus, etc.&lt;/body&gt;</codescaped> (contenus visibles)
<br>
<br>
Les commentaires <kdb class="key">CTRL+MAJ+/</kdb> sont invisibles...
<p>Footer, on le verra avec JavaScript, est un espace en bas de page où l'on charge d'autres ressources (.js)...<br>
à la fin de la page... ce qui est en bas étant lu... en dernier</p>
<br>
<br>
<br>
<h3>HTML balises simples, souligner, titres... div</h3>
<p>On va se concentrer sur le contenu dans <codescaped class="done">&lt;body&gt;</codescaped> en commençant par quelques exemples de balises simples :</p>
<p>Exemple :</p>
<pre><code class="language-markup"><u>text souligné</u></code></pre>
<pre><code class="language-markup"><a href="#top">lien vers</a></code></pre>
<pre><code class="language-markup">
<h1>titre</h1>
<h2>titre</h2>
<h3>titre</h3>
<h4>titre</h4>
<h5>titre</h5>
<h6>titre</h6>
</code></pre>
<!-- <p>Mettre du texte entre deux balises <code><a>text</a></code> permettra
de créer un lien</p> -->
<p>On construit la page ainsi, en contenant des éléments les uns dans les autres</p>
<pre><code class="language-markup">
<div>
<p>autres contenus</p>
</div>
</code></pre>
<pre><code class="language-markup">
<strong>Plus d'informations :</strong>
<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/div">MDN Firefox (DIV)</a><br>
( élément de division du contenu )
</code></pre>
<p>Dans une <codescaped>div</codescaped>, tout ce qui se retrouve avant, à droite, à gauche...
saute à la ligne, passe après la <codescaped>div</codescaped><br>
C'est parce qu'une <codescaped>div</codescaped> se comporte comme un "<span class="important">block</span>"</p>
<p><span class="important">On va y revenir avec un exemple</span></p>
<h4>Sauts de ligne : br, hr<br>...</h4>
<p>Dans l'éditeur de texte où l'on code (IDE, pour <i>Integrated Development Environment</i>), on peut faire autant de sauts à la ligne qu'on veut !
<br>
On peut espacer des parties de code... le navigateur ne va créer des sauts de lignes que si on lui demande d'en afficher.
</p>
<pre><code class="language-markup">
On peut forcer un saut à la ligne avec <br /> ou un autre séparateur comme <hr />
</code></pre>
<pre><code class="language-markup">
<br><br>
</code></pre>
<p>Certains éléments (comme les "div") vont créer du vide autour d'eux, des sauts de ligne..., agir comme des "<span class="important">block</span>"
</div>
<p>D'autres éléments se comportent comme du texte, sans créer de saut de ligne autour d'eux <br>
: ils se succèdent sur la ligne, ils sont affichés de façon "<span class="important">inline</span>"</p>
<p>Ce qui les différencie, c'est la <span class="color property">propriété</span> d'affichage (<span class="color property">display</span>)</p>
<pre><code class="language-markup">
<strong>Plus d'informations :</strong>
<a href="https://developer.mozilla.org/fr/docs/Web/CSS/display">MDN Firefox (Display)</a>
</code></pre>
<p style="margin-top: -40px;">Vous noterez que, même si je fais un saut de ligne dans le code..., le lien <codescaped><a></codescaped> ne passe pas à la ligne...</p>
<p><codescaped><strong>contenu</strong></codescaped> ainsi que <codescaped class="done">&lt;a&gt;contenu&lt;/a&gt;</codescaped> sont "<span class="important">inline</span>"</p>
<h3>Basics, des balises de base prêtes à l'emploi</h3>
<p>D'autres éléments de base permettent de styliser facilement le texte...</p>
<p>À l'origine, il s'agissait de "mimer" certaines mises en forme usuelles dans le journalisme, l'édition.</p>
<p>La balise... <br>"u" <u>underline</u>
<br>"b" ou "strong" <strong>gras</strong>
<br>em ou i pour <i>italic</i>
<br>La balise "<span class="important">span</span>"
est neutre mais permet d'entourer une partie du texte<br />
... On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier.</p>
<pre><code class="language-markup">
<p>Démo de <strong>balise inline</strong> qui crée du gras (et c'est tout)</p>
</code></pre>
<pre><code class="language-css" id="margin_exemples">
#italgras {
i, u, strong {
color: orange
}
}
</code></pre>
<pre><code class="language-markup">
<div id="italgras"
class="exemple">
<span>Exemple :</span><br>
<p>Voluptate labore laboris pariatur. Dolore <strong>exercitation</strong> et ex tempor tempor ut consequat sint deserunt commodo sunt aute. Ex ad est culpa sint eiusmod dolor enim fugiat ipsum eiusmod dolor deserunt. Reprehenderit ullamco pariatur aliqua officia veniam deserunt duis esse nulla laborum ad adipisicing reprehenderit cupidatat cupidatat. Sunt exercitation ad ullamco cillum id. Tempor velit exercitation aute velit pariatur.</p>
<p>Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore <u>consectetur cupidatat magna occaecat</u> reprehenderit labore esse id. Irure esse excepteur ea aliquip eiusmod velit ipsum exercitation fugiat officia ullamco ut et reprehenderit laboris. <i>Culpa ipsum tempor excepteur. Officia in ea magna do commodo exercitation. Laborum voluptate incididunt incididunt do Lorem in est laboris consectetur enim occaecat. Culpa laboris incididunt eu id qui sit eu voluptate quis laboris eiusmod.</i> Eu aliquip aliqua labore ad eu sint adipisicing laboris esse nisi ut mollit ex eu.</p>
</div>
</code></pre>
<h3 id="title_config_firefox">Voir les styles CSS par défaut</h3>
<p>On peut toutefois modifier les <span class="color property">propriétés</span> données à ces éléments de base (ou en utiliser un plus adapté)</p>
<p>Je peux voir le code source de la page en faisant <kdb class="key">CTRL+MAJ+I</kdb> les outils de développement s'affichent<br>
Dans Firefox je trouve les paramètres via icon <kdb class="key">"..."</kdb> (à droite) puis <b>Parametres</b> (<kdb class="key">"icon rouage"</kdb>) /OU/ <kdb class="key">F1</kdb></p>
<div>
<img src="./_ressources/0_intro/img/0_firefox_parametres_devs.png">
</div>
<p>Je peux ensuite demander d'afficher ces styles par défaut.</p>
<div>
<img src="./_ressources/0_intro/img/0_afficher_style.png">
</div>
<p>Firefox montre bien que "strong" a des valeurs par défaut... On peut
voir d'autres propriétés et feuilles de style</p>
<h4>Ajouter du style = propriétés + valeurs</h4>
<p id="ex_gras_classes">On peut opérer de plusieurs façons, d'abord on peut <span class="important">ajouter du style directement dans un élement</span><br>
On parle de méthode "<span class="important">inline</span>", dans le texte/code/page même (pas un fichier distinct, on va y revenir)</p>
<div class='resume'>Ici, je veux annuler la <span class="color property">propriété</span> et <span class="color value">valeur</span> attribuées aux éléments "strong"...
C'est la propriété <span class="color property">font-weight</span> avec la valeur "<span class="color value">bold</span>" (gras) qui crée l'empâtement...
... par défaut, un élément "strong" est mis en gras "<span class="color value">bold</span>"
Pour changer l'empâtement je vais modifier le style de l'élément strong...
<span class="color property">font-weight</span> est une <span class="important">propriété</span>
<span class="color value">normal</span> une <span class="important">valeur</span> attribuée à cette propriété
</div>
<pre><code class="language-markup ">
<p>Dolore <strong>exercitation</strong> et ex tempor</p>
<hr />
<p><strong style="background-color: yellow; font-weight: normal;">labore laboris pariatur</strong>....</p>
<p><span style="font-family: serif;">labore laboris pariatur</span>....</p>
</code></pre>
<!-- <p style="margin-top: -1em;"><strong
style="background-color: yellow; font-weight: normal;">labore laboris
pariatur</strong>, devrait être en gras (propriété inérante à
<codescaped><strong></strong></codescaped>) mais on a ajouté un style
directement sur l'élémént
</p>
<p>
<codescaped>font-weight: normal;</codescaped> demande en effet que le
style d'empatement (gras) du texte entre les balises soit
"normal"<br>(et non pas "bold", valeur par défaut attribuée à
<codescaped><strong></strong></codescaped>)
</p> -->
</p></p>
<div class='resume'>Ici, je suis venu ajouter du style directement à l'élément
<span class="color property">font-size</span> est une <span class="important">propriété</span> (de style, d'habillage)
<span class="color value">10px</span> une <span class="important">valeur</span> attribuée à cette propriété
</div>
<pre><code class="language-markup">
<small>petit text</small> -
<span style="font-size: smaller">même taille</span> <!-- (un élément "small" a font-size:smaller) --> -
<span style="font-size: 10px">plus petit texte</span>
</code></pre>
<div class="resume">On a vu qu'en HTML, on pouvait entourer / encercler / contenir... des bouts de texte par des <span class="important">balises</span>
Une fois entourés par ces balises, ces bouts de texte séparés sont appelés des <span class="important">éléments"</span>
Il existe des éléments de base, prêts à l'emploi, ils ont des propriétés d'affichage intégrées (par défaut)
On peut modifier les éléments en y ajoutant du "style" directement à l'intérieur de l'élément (avec <span class="important">style=""</span>)
Ces nouvelles propriétés et valeurs outrepassent celles précédemment demandées (par le navigateur)
</div>
<hr class="space visible" />
<h3>Feuilles de style : fichier.css</h3>
<p>Comme on vient de le voir...<br>
On peut ajouter du style directement dans un élément (dans la page HTML)... mais ce n'est pas le plus simple</p>
<p>Il est préférable de créer une "<span class="important">feuille de style</span>" pour "<span class="important">Cascading Style Sheet</span>" == CSS</p>
<p>On y renseigne / indique / ajoute des instructions d'habillage qui vont modifier le comportement visuel des éléments dans la page... <br>
( qu'on va identifier grâce à des sélecteurs utilisés dans les feuilles de style CSS pour cibler des éléments présents dans la page HTML )</p>
<p>L'intérêt d'une feuille de style, c'est qu'on peut y ajouter autant de règles qu'on veut et les sauvegarder dans un fichier (qu'on va pouvoir copier, déplacer)
<br>... Ainsi, ces règles inscrites dans un fichier seront accessibles directement (plutôt qu'intégrées dans la page HTML).
<br>... Ainsi, plusieurs pages pouront charger les mêmes instructions de style.
<br>... Si je mets à jour cette feuille de style (fichier), toutes les pages qui la charge auront leur mise en page mise à jour !<
<br><span class="important">On peut ainsi modifier plusieurs éléments récurrents d'une page à l'autre...</span> (cela donnera de la cohérence esthétique à un site)</p>
<p>C'est une méthode de centralisation de l'information...</p>
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_selectors
( Sélecteurs en français )
<hr class="space" />
<h4 id="back_from_index_empty">Où mettre la feuille de style ?</h4>
<p>Voyons d'abord comment fonctionne une feuille de style (CSS)</p>
<p>Pareillement à une page web (par exemple <i class="file">index.html</i>), une feuille CSS a une extension particulière : "<span class="important">.css</span>"</p>
<p>On peut la nommer de plein de façons ! <i class="file">style.css</i> par exemple</p>
<p>"<span class="important">On ne met pas d'espace dans le nom des fichiers !, on les remplace par "_" ou "-", plutôt "_"</span>"</p>
<p>Une fois la feuille de style créée, on devra la charger dans la page HTML
<hr class="space">
<div class='resume'>Si je mets cette balise dans ma page (de préférence dans <codescaped class="done">&lt;head&gt;</codescaped> .... et <codescaped class="done">&lt;/head&gt;</codescaped>, dans la tête de la page)...
les instructions qu'elle contient vont modifier la façon dont le navigateur affiche les éléments de la page
</div>
<pre><code class="language-markup nopreview">
<link rel="stylesheet" href="./_ressources/0_intro/css/style_basics.css">
</code></pre>
<p>Lien vers <a class="file" href="./_ressources/0_intro/css/style_basics.css">style_basics.css</a></p>
<p class="resume" id="back_from_index_empty_alt">La feuille de style (fichier) est pratique si on l'utilise plusieurs fois de page en page
Et, formellement, cela permet d'avoir toutes les informations séparées au même endroit...
Mais on peut aussi charger cette cascade d'instructions directement dans la page...</p>
<p>Au lieu d'utiliser <codescaped class="done">&lt;link&gt;</codescaped>, on pourra utiliser <codescaped class="done">&lt;style&gt;...&lt;/style&gt;</codescaped>
<br>== On peut mettre des instructions de style en cascade directement "inline", dans la page HTML....
<br>plutôt que dans un fichier séparé (block)</p>
</p>
<codescaped class="espace"><style>
.class, #id {
....
}
</style>
</codescaped>
<hr class="space" />
<h3>Identifier et "cibler" les éléments de la page (id, classes) <br>
+ leur attribuer des propriétés+valeurs</h3>
<div class="resume">Plutôt que d'intervenir sur un élément à la fois, on pourra attribuer les mêmes propriétés à un ensemble de mêmes éléments,
Ici, la classe "important" est ajoutée sur deux éléments span...
Ils sont rouge car une instruction dans la feuille de style CSS rend le texte... rouge
Dans la feuille de style, on indique qu'on cherche (cible) TOUS les éléments avec la classe "important" en indiquant....
<!-- !!! Mettre des couleurs -->
<span class="important">#important_wrapper</span> (# == ID)
<span class="important">.important</span> (. == classe)
Ce qu'on fait là, c'est <span class="important">cibler</span> ("<i>sibling</i>") un élément d'après sa class ou son id
On verra qu'il existe d'autres moyens (plus sophistiqués)
Un <a href="https://admm.co/css-cheat-sheet/" target="_blank">index complet</a> (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS...
</div>
<pre><code class="language-css" id="id_classes">
#important_wrapper { /* id */
margin-left: 10px;
border-left: 3px solid red;
padding-left: 20px;
}
.important { /* classe */
font-weight: bolder;
color: red;
}
.pas_important {
font-weight: normal;
}
</code></pre>
<pre><code class="language-markup">
<div id="important_wrapper">
<p>Ceci est <span class="important">une span avec une class .important</span> (mais pas strong)...</p>
<p>Ceci est <strong>strong sans classe, normal, basic</strong>.....</p>
<p>... Ceci est <strong class="pas_important">strong mais .pas_important</strong> !</p>
<p>De nouveau, une span qui se fait passer <span class="important">pour strong</span> !</p>
</div>
</code></pre>
<pCibler un élément : on indiquera simplement "div"</p>
<p>Un "<span class="important">id</span>" (identifiant) sert à identifier <span class="important">un élément unique dans la page</span></p>
<p>Les "<span class="important">classes</span>" sont attribuées à des éléments qu'on veut habiller de la même façon (leur donner le même comportement)
<br>Une classe est utilisée plus souvent ; elle va contenir des mises en forme couramment utilisées.
<br>Il est intéressant de trouver des noms de classe équivoques (ce n'est pas toujours facile).
</p>
<h3>CSS /VS/ HTML, cibler des éléments /VS/ ajouter des classes</h3>
<p class="important">CSS : on peut attribuer les mêmes consignes (<span class="color property">propriétés</span> + <span class="color value">valeurs</span>) à plusieurs éléments ciblés en même temps (via leur classe, id, etc.) -- virgule</p>
<pre><code class="language-css" id="multiples_cibles">
.para, #sad {
....
}
.para,
#sad {
....
}
</code></pre>
<p><span class="important">CSS : on utilise une --espace pour indiquer qu'on va chercher un élément... à l'intérieur d'un autre</span><br>
=== <codecss>#texte_principal p { ... }</codecss><br>
=== "parent > enfant"
</p>
<p><span class="important">HTML : on utilise une --espace pour attribuer plusieurs classes à un même élément</span> ( exemple suivant: "<codescaped>para fond_bleu</codescaped>" )....<br>
=== a la classe "para" <u>et</u> "fond_bleu"</p>
<pre><code class="language-css" id="html_id_classes">
/* ID */
#text_principal {
font-family: sans-serif;
line-height: 0.4em;
}
/* CLASSE */
.para {
background-color: yellowgreen;
}
/* CLASSE, autres instructions */
.fond_bleu {
background-color: blue;
color: #FFF;
}
/* CLASSE/ID plusieurs cibles en même temps */
/* Séparées par une "," */
.para, #sad {
font-weight: bold;
}
/* Exemple pour cibler/affecter tout "p" présent dans "#text_principal" */
/* et pas TOUS les "p" de la page */
#text_principal p {
font-family: serif;
}
/* ... On aurait aussi pu affecter une classe à l'élément (en HTML) */
span.serif_big { /* TOUT span AVEC la classe serif_big */
/* 3. "paragraphe" (dans l'élément "u") ne sera pas affecté par le changement de typo+taille */
font-family: serif;
font-size: 1.2em;
}
/* PSEUDO CLASSE :last-child */
p:last-child .para {
background-color: orangered;
}
</code></pre>
<pre><code class="language-markup">
<div id="text_principal"> <!-- PARENT -->
<p>1. Je suis le premier <span class="para serif_big">paragraphe</span> !</p> <!-- enfant -->
<p>2. Et moi le deuxième <span class="para">paragraphe</span> !</p> <!-- enfant -->
<p>3. Et moi le troisième <u class="para fond_bleu serif_big">paragraphe</u> !</p> <!-- enfant -->
<p>4. Et moi le dernier <span class="para fond_bleu">paragraphe</span>
<span id="sad">=(</span></p> <!-- enfant -->
</div> <!-- PARENT fin, fermeture de la balise div#text_principal -->
</code></pre>
<div class='resume important'>1. et 2. sont verts (car .para)
3. est bleu... car, <span class="important">dans une la suite d'instructions CSS, la dernière règle indiquée l'emporte sur les règles précédentes !!!</span>
C'est pour cela qu'on dit qu'elles sont en cascade !
== Le fichier est lu de haut en bas par le navigateur qui ensuite affiche la page selon cette liste de demandes/règles.
Ici, dans le CSS, les instructions de fond (background) indiquées dans "<codecss>.fond_bleu</codecss>" prennent le dessus sur celle de "<codecss>.para</codecss>"
4. utilisation d'une <code class="term">pseudo-classe</code> (on va les passer en revue),
( <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes">MDN Pseudo-classes</a> + <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:last-child">MDN last-child</a> )
... celle-ci, dans notre exemple... cible TOUT dernier paragraphe (<codecss>p:last-child</codecss>) puis cherche TOUT <codecss>.para</codecss> à l'intérieur...
( ... dit à l'envers : cette instruction cible TOUT élément avec la classe <codecss>"para"</codecss> présent dans le dernier paragraphe (<codecss>p:last-child</codecss>) )
4. Dans le CSS...
... Comme cette instruction d'atteindre/cibler le dernier <codecss>.para</codecss> est indiquée <u>après</u> celle de "<codecss>.fond_bleu</codecss>", elle prend le dessus :
... la propriété:value <codecss>background-color: orangered;</codecss> est appliquée !!!
</div>
<hr class="space" />
<h5>Ciblage parents</h5>
<p>Un autre exemple de ciblage d'un élément dans un élément</p>
<p>#contenant .element_dedans .sous_element</p>
<pre><code class="language-css" id="parent_cascade">
.border {
border:1px solid #000;
}
.cascade {
margin-left: 10px;
background: #FFF;
text-align: center;
}
.cascade:hover { /* Hover est une autre pseudo-classe bien pratique... */
background: fuchsia;
}
#enfant p {
/* tout p présent dans #enfant */
text-transform: uppercase;
}
</code></pre>
<pre><code class="language-markup">
<div id="grand_parent" class="cascade border">
<p>tête</p>
<div id="parent" class="cascade border">
<p>aide</p>
<div id="enfant" class="cascade border">
<p>autonomie</p> <!-- ////////////// ciblé -->
</div>
</div>
<!-- Ce ne sont pas les espaces (sauts de lignes) qui produisent du vide/espace dans la mise en page finale -->
<p>jambes</p>
</div>
</code></pre>
<h4><i>Nesting</i></h4>
<div class="resume"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting</a>
CSS Avancé ! Autre façon de cibler les éléments d'une page HTML<br>Permet une meilleure lisibilité, on attribue des instructions CSS par élément (et ses sous-élements)</div>
<pre><code class="language-css" id="parent_cascade_nesting">
.border {
border:1px solid #000;
}
.cascade_nesting {
margin-left: 10px;
background: #FFF;
text-align: center;
}
.cascade_nesting:hover { /* Hover est une autre pseudo-classe bien pratique... */
background: yellow;
}
#parent_nesting {
p {
color: red;
}
u {
padding: 10px;
display: inline-block;
}
u, p {
text-transform: uppercase;
background: yellow;
display: inline-block;
}
}
#grand_parent_nesting:hover :is(#parent_nesting, #enfant_nesting) {
& * { background: orange }
background: orange
}
</code></pre>
<pre><code class="language-markup">
<div id="grand_parent_nesting" class="cascade_nesting border"><p>tête</p>
<div id="parent_nesting" class="cascade_nesting border"><p>aide</p>
<div id="enfant_nesting" class="cascade_nesting border"><u>autonomie</u></div>
</div></div>
</code></pre>
<h5>Mise en page, garder son code lisible et ordonné</h5>
<p>Vous notez que dans l'écriture du code HTML, j'essaie de garder les choses lisibles...<br>On pourrait ajouter de l'espace (saut de ligne) pour espacer les div avec #id</p>
<p>On peut faire autant de sauts de ligne que l'on veut... le navigateur ne les interprète pas comme des sauts de ligne (on l'a vu, on peut utiliser <codescaped><br></codescaped>)</p>
<p>Autre chose, on utilise des retraits de ligne (à gauche) des "<code class="term">indent</code>", des espaces pour, visuellement, voir dans le code, quel tag (ici des <codescaped class="done">&lt;p&gt;</codescaped> <codescaped class="done">&lt;div&gt;</codescaped>)<br>
C'est une convention formelle... qui aide grandement à résoudre des "bugs" / "errors"
</p>
Wiki Style d'indentation : <a target="_blank" href="https://fr.wikipedia.org/wiki/Style_d'indentation">https://fr.wikipedia.org/wiki/Style_d'indentation</a>
<p>Dans VSCODE on peut utiliser <br><i><a target="_blank" href="https://open-vsx.org/extension/esbenp/prettier-vscode">Prettier Code Formatter</a></i> qui fait le boulot à notre place <br>(aligne correctement les blocs de texte en fonction de leur imbrication successive...)<br>
ou encore <a href="https://open-vsx.org/extension/oderwat/indent-rainbow" target="_blank">indent-rainbow</a></p>
<hr class="space visible">
<h3>Margin padding</h3>
<p>Si l'on veut créer un saut à la ligne, on peut utiliser ajouter des <span class="important">propriétés de marge externes ou internes à l'élément</span><br>
Pour cela, il faut que l'élément se comporte comme un bloc, ait une propriété display: inline-block | block</p>
<div class="resume">MDN (margin) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/margin">https://developer.mozilla.org/fr/docs/Web/CSS/margin</a>
MDN (padding) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/padding">https://developer.mozilla.org/fr/docs/Web/CSS/padding</a>
MDN (border) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/border">https://developer.mozilla.org/fr/docs/Web/CSS/border</a>
MDN (raccourcis) (T R B L) <a target="_blank" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Getting_started#raccourcis">https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Getting_started#raccourcis</a>
MDN (display) : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/display">https://developer.mozilla.org/fr/docs/Web/CSS/display</a></div>
<pre><code class="language-css" id="margin_padding">
/* Objet au centre, avec MARGE extérieure et PADDING intérieur */
/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding */
#test_wrapper {
border: 1px solid gainsboro;
background: #fdffdf; /* jaune */
padding: 10px;
}
/* Element avec marges... */
#test_margin_padding {
padding: 30px; /* PADDING */
margin: 30px; /* MARGIN */
border: 1px solid;
background-color: #e3dcff; /* mauve */
border: 3px solid red; /* bord visuel de notre élément de test */
}
/* DEMO sert à expliquer, montrer la MARGE INTERIEURE (padding) */
/* ... entre le bord de #test_margin_padding et son CONTENU */
#inner_content {
background-color: #cff0fb; /* bleu clair*/
padding: 0px;
}
</code></pre>
<pre><code class="language-markup">
<div id="test_wrapper">
<div id="test_margin_padding"> <!-- élément entouré de rouge (border) -->
<div id="inner_content">Contenu</div>
</div>
</div>
</code></pre>
<p>Firefox : <kdb class="key">CTRL+MAJ+I</kdb> + <code class="key">-> Inspecteur -> Mise en page</code></p>
<p>En sélectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées</p>
<img src="./_ressources/0_intro/img/0_padding_margin.png">
<br>
<br>
<br>
<pre><code class="language-css" id="margin_simple">
#margin_first,
#margin_seconde,
#margin_last {
/* il faut que propriété "Display" ait la valeur "inline-block" */
/* (pour éviter que les éléments sautent à la ligne, des blocs) */
display: inline-block;
border: 1px solid;
}
.margin_left {
margin-left: 100px
}
.margin_right {
margin-right: 100px
}
.large {
width:500px;
}
.petite {
width:200px;
}
</code></pre>
<pre><code class="language-markup">
<div id="margin_first" class="margin_left large border">
<span>#margin_first</span>
</div>
<div id="margin_seconde" class="margin_right petite border">
<span>#margin_seconde</span>
</div>
<div id="margin_last" class="border">
<span>#margin_last</span>
</div>
</code></pre>
<p>Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :</p>
<img src="./_ressources/0_intro/img/0_padding_margin_cut.png">
<pre><code class="language-css" id="margin_exemples">
#top_margin_block {
width: 100%
}
#margin_exemples_wrapper {
background: greenyellow;
border: 1px solid #000; /* width(épaisseur) style color */
border-width: 1px 1px 1px 1px;
display: block;
clear: both;
float: left;
width: 100%;
margin-bottom: 4rem;
}
.margin_exemples {
display: inline;
float: left;
border: 1px solid #000;
border-color: red;
background: chartreuse;
/* top right bottom left */
padding: 5px 5px 0 5px; /* EXEMPLE Padding */
padding-top: 5px; /* déclinaison.. marche aussi avec border, margin, etc. */
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
height: 100px;
width: 100px;
}
.margin_exemples.margin_autour {
margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
height: auto; width: auto;
min-height: 100px;
background: lavender;
/* top+bottom left+right */
border-width: 1px 4px; /* EXEMPLE border... 2 val., 1er==top+bottom 2e==left+right */
}
</code></pre>
<pre><code class="language-markup">
<div id="margin_exemples_wrapper">
<div id="top_margin_block" class="margin_exemples">#top_margin_block</div>
<div class="margin_exemples margin_autour">.margin_autour :<br>margin: 100px 0px 0px 0px;</div>
<div class="margin_exemples" style="margin-top: -10px">style : <br>margin-top: -10px</div>
</div>
</code></pre>
<p style="margin-top: 1rem">
Notez que, dans le dernier exemple, c'est le <codescaped>style="..." de l'élément</codescaped> (qui est chargé/lu/interprété en dernier, après la feuille de style)....<br>c'est ce style (<codescaped>margin-top: -10px</codescaped>) qui l'emporte.<br>
On garde la logique, la dernière <span class="color property">propriété</span>:<span class="color value">value</span> donnée à un élément (ex. : div#exemple.dernier) qui est prise en compte.<br>
</p>
<h4>Transition + margin (pause)</h4>
<div class="resume">Margin crée de l'espace, permet aussi de déplacer les éléments...
MDN (transition) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/transition">https://developer.mozilla.org/fr/docs/Web/CSS/transition</a></div>
<pre><code class="language-css" id="margin_move_transition">
#mousehover_movemargin_element {
height: 130px;
width: 130px;
background: red;
color: #FFF;
padding: 20px;
text-align: center;
display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
}
#mousehover_movemargin:hover #mousehover_movemargin_element {
margin-left: calc(100% - 130px - 50px);
background:yellow;
transition: all 1s;
cursor: pointer;
}</code></pre>
<pre><code class="language-markup">
<div id="mousehover_movemargin">
<div id="mousehover_movemargin_element">Youhouuuuu</div>
</div>
</code></pre>
<br>
<br>
<h4>Margin auto + float (+var +calc)</h4>
<pre><code class="language-css" id="margin_center_auto__var_calc">
#margin_auto {
display: block; /* + display block */
margin: auto; /* + marge gauche+droite ==> centré ! */
/* + taille.largeure fixe (width), ici donnée par .w_large */
/* ==> block centré ( marges auto à droite et à gauche ) */
background: yellow;
text-align: center;
}
#float_none { float: none; }
#float_left { float: left; }
#float_right { float: right; }
#margin_center_wrapper { /* DEMO rend visible le margin auto */
background: #fdffdf;
float: none;
border: 1px dashed gray;
}
/* Variables : on attribue une valeure (400px) à une variable "--xxx" */
/* ... normalement, methode, on les met au début de la feuille CSS (en premier/haut) */
:root {
--w400: 400px;
}
.w400 { width: var(--w400); } /* on charge la valeur contenue dans la variable "--xxx" */
.w_large { width: 600px; }
.h_grand { height: calc(100px + 100px); } /* calc permet de faire des oppérations mathématiques */
.h100 { height: 100px; }
.w100p { width: calc(100% - var(--w400)); } /* exemple calc + var ... on aura d'autres exemples*/
.floater {
background: yellowgreen;
padding: 10px;
box-sizing: border-box; /* "box-sizing" va auto calculer les dimensions (height/width)... */
/* ... SANS les Padding ni Margin */
/* ... sinon, par défaut la largeur ici calculée serait --w400 + Margin + Padding */
/* ... ce qui serait trop large !!!! du coup mon calcul serait faussé */
/* ... ( je devrais moi-même prendre en compte les margins... ) */
}
</code></pre>
<pre><code class="language-markup">
<div id="float_none" class="floater border w400 h100">#float_none</div>
<div id="margin_center_wrapper">
<div id="margin_auto" class="floater border w_large h_grand">#margin_auto :<br>Contenu centré</div>
</div>
<div id="float_right" class="floater border w400 h100">#float_right: <br>width: var(--w400)</div>
<div id="float_left" class="floater border h100 w100p">#float_left :<br>width: calc(100% - var(--w400))</div>
</code></pre>
<div class="resume" style="margin-top: 0px; margin-bottom: 4rem;">Box-sizing...
La Cascade, explications détaillées en Français : <a href="https://la-cascade.io/articles/box-sizing-pour-les-nuls" target="_blank">https://la-cascade.io/articles/box-sizing-pour-les-nuls</a>
MDN (détails) : <a href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Box_model#quest-ce_que_le_modèle_de_boîte_css" target="_blank">https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Box_model</a>
MDN (:root) <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:root" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/:root</a>
MDN (var) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/var" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/var</a>
MDN (calc) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/calc" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/calc</a>
</div>
<h3>Largeur / hauteur (adaptative)</h3>
<pre><code class="language-css" id="width_details_max_min">
#width_full_page {
max-width: 800px;
min-width: 500px:
padding: 10px; border: 1px solid; background: yellow;
}
</code></pre>
<pre><code class="language-markup">
<div id="width_full_page">
#width_full_page
</div>
</code></pre>
<h3>Mediaqueries</h3>
<div class="resume">Exemple complet : <a href="./0_min_max_width.html" class="file" target="_blank">0_min_max_width.html</a>
Penser à ajouter <codescaped class="done">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</codescaped> dans head</div>
<pre><code class="language-css" id="width_details_max_min">
:root {
--maxw: 600px;
--maxw_extra: 900px;
}
#width_full_page,
#width_bloc_textarea {
padding: 10px; border: 1px solid;
background: yellow;
}
.min_max_width {
min-width: 500px;
max-width: var(--maxw_extra);
}
/* vue adaptative aka. responsive design */
@media (max-width: 638px) { /* == S'applique tant que l'écran a une largeur maximum de... 638px (et -) */
/* == Si l'écran a une largeur max de 638px */
/* ..... ok .... ok .... 638px || non */
#width_full_page {
background: rgb(34, 255, 0);
}
}
@media (min-width: 700px) { /* == Si l'écran est large au minimum de... 700px (et +) */
/* non || 700px ..... ok .... ok .... */
#width_full_page {
background: rgb(255, 102, 0);
}
}
/* EXTRA/bonus ":has".... */
/* Si xxx:has(yyy) == "SI xxx contient yyy" */
/* Ici, on garde la taille fixe si le bloc contient une textarea */
.min_max_width:has(textarea) {
min-width: var(--maxw);
max-width: var(--maxw);
}
textarea {
width: var(--maxw); /* initial */
max-width: calc(var(--maxw) - 10px);
min-width: 400px;
min-height: 100px;
max-height: 300px;
display: block;
}
</code></pre>
<pre><code class="language-markup">
<!-- <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- </head> -->
<!-- <body> -->
<div id="width_full_page" class="min_max_width">
#width_full_page
</div>
<div id="width_bloc_textarea" class="min_max_width">
#width_bloc_textarea
<textarea>Ecire un truc</textarea>
</div>
<!-- </body> -->
</code></pre>
<div class="resume" style="margin-top: 0px; margin-bottom: 4rem;">MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries#cibler_des_caractéristiques_média" target="_blank">CSS_media_queries</a>
MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/length#unités_pour_zone_daffichage_par_défaut" target="_blank">Unités de mesure</a> (px, em, vw, vh)
MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:has" target="_blank">:has</a>
MDN html <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/textarea" target="_blank">textarea</a>
</div>
<h3>Positions... left/right/top/bottom</h3>
<p>On peut également déplacer un élément de la page grâce à la combinaison de :<br>
<span class="color property">position</span>: <span class="color value">relative | absolute | fixed | sticky</span><br>
<span class="color property">left / right / top / bottom</span>: <span class="color value">100px</span><br>
<div class="resume">MDN (Position) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/position">https://developer.mozilla.org/fr/docs/Web/CSS/position</a></div>
<pre><code class="language-css">
.moveme {
z-index: 999;
}
.move_relative {
position: relative;
}
.move_absolute {
position: absolute;
}
.move_fixed {
position: fixed;
opacity: 0;
bottom: 0px; right: 0
}
.moveme:hover {
opacity: 0;
}
/* "Combinateur de voisins directs" (.item + .other) */
/* https://developer.mozilla.org/fr/docs/Web/CSS/Next-sibling_combinator */
.not_last_move:hover + .moveme,
.not_last_move:hover,
.move_fixed:hover {
opacity: 1;
}
/* encore du CSS avancé... */
/* https://css-tricks.com/examples/nth-child-tester/ */
/* https://css-tricks.com/how-nth-child-works/ */
.moveme:nth-last-child(2) {
border: 3px solid red;
}
.moveme:nth-last-child(1) { background: red; color: #FFF; z-index: 9999999; }
.petit_padd { padding:4px; background: #FFF }
<!-- .not_last_move:hover { opacity: 0; } -->
#pos_sticky {
position: sticky;
top: 0;
right: 0 !important;
float: right;
margin: 0;
background: aqua;
}
</code></pre>
<pre><code class="language-markup">
<span class="moveme move_relative border petit_padd" style="left: 100px">relative + left:100px;</span>
<span class="moveme move_relative border petit_padd" style="left: 300px">relative + left:300px;</span>
<span class="moveme move_relative border petit_padd" style="top: -70px">relative + top:-70px;</span>
<span class="moveme move_absolute border petit_padd not_last_move" style="top: -70px">absolute + top:-70px;</span>
<span class="moveme move_fixed border petit_padd" >fixed + bottom: 0px; right: 0;</span>
</code></pre>
<!-- Gardé à l'extérieure pour que sticky marche -->
<span id="pos_sticky" class="border petit_padd" style="left: 0px">#pos_sticky</span>
<hr class="visible" />
<h4>Dialog</h4>
<br>
<dialog open>
<p>Faisons une petite pause !</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
<br>
<br>
<br>
<br>
<br>
<br>
<h4>Selection</h4>
<p>Petite pause, encore une pseudo-classe... <br>
MDN : <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/CSS/::selection">https://developer.mozilla.org/fr/docs/Web/CSS/::selection</a>
<pre><code class="language-css">
/* #incognito { pointer-events: none;} */
.code-content ::selection {
background: #000;
color: #FFF;
}
#incognito :is(.censured, .silencied, .unreadable) {
background:#000;
color: #000;
pointer-events: none;
}
#incognito :is(.censured, .silencied, .unreadable)::selection{
color: #000;
}
</code></pre>
<pre><code class="language-markup">
<div id="incognito">
<p>
Id quis id est cupidatat <span class="censured">ea culpa</span>. Excepteur excepteur adipisicing esse ullamco occaecat duis commodo reprehenderit commodo nostrud <span class="silencied">incididunt</span>. Dolore nisi nostrud aute mollit eu pariatur. In incididunt reprehenderit ut nisi veniam Lorem. Laboris irure occaecat cupidatat et.
</p>
<p>
Velit culpa deserunt <span class="unreadable">commodo magna eiusmod deserunt tempor aute excepteur et labore velit incididunt qui. Labore velit do sunt enim aliquip veniam deserunt deserunt.</span> Mollit proident reprehenderit ullamco. Dolor eu cillum ipsum consequat eu consectetur minim enim commodo dolor sint irure nostrud magna. Adipisicing enim laboris anim consectetur <span class="censured">Lorem incididunt dolore minim mollit deserunt ad dolor id ad exercitation</span>. Aliquip irure deserunt eiusmod minim ex nostrud duis irure ad laborum. Lorem cupidatat commodo exercitation laborum mollit sint sint consequat commodo.
</p>
</div>
</code></pre>
<h4>Textes</h4>
<div class="resume">MDN font-familly : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-family" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/font-family</a>
MDN font-size unités (em, px) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/length#em" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/length#em</a>
</div>
<pre><code class="language-css">
#text_basics {
font-size: 1.2em;
line-height: 2em; /* ((( em ))) 1em == Hauteur de la police... 1.5em 1xhauteur de la police + 0.5... */
font-family: sans-serif, Arial;
text-decoration: underline;
font-style: italic;
text-align: justify;
hyphens: auto;
}
#text_basics p:first-letter {
text-transform: uppercase;
}
</code></pre>
<pre><code class="language-markup">
<div id="text_basics">
<p>ipsum exercitation adipisicing incididunt fugiat nulla laboris sit consectetur esse sunt laborum nisi nisi nisi ullamco. Deserunt cupidatat occaecat in. Proident voluptate exercitation culpa veniam nulla elit fugiat. Cillum id consequat fugiat dolore culpa proident amet. Lorem est qui quis nulla nostrud labore irure id culpa cupidatat non aute nostrud pariatur. Sint veniam cillum ut veniam voluptate excepteur commodo occaecat elit pariatur laborum. Laborum ad duis cupidatat consequat cillum enim cupidatat enim enim sint labore. Aliqua ipsum aliqua quis occaecat est sunt nulla sit pariatur velit nostrud dolore ipsum est.</p>
</div>
</code></pre>
<hr class="visible" />
</section>
<section class="centred">
<h2>Alignement de texte, colonnes...</h2>
<!-- —> columns -->
<h3>Alignement manuel (2 colonnes left/right)</h3>
<div class="resume">MDN font-size unités (em, px) : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/column-count" target="_blank">https://developer.mozilla.org/fr/docs/Web/CSS/column-count</a></div>
<pre><code class="language-css">
#contenant {
display: block;
margin-bottom: 5rem;
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
.left, .right {
float:left;
width: 50%;
box-sizing: border-box;
}
.left {
width: calc(50% - 0px);
padding-left: 0px;
}
.right {
border-left: 1px solid #000;
padding-left: 30px;
}
}
</code></pre>
<pre><code class="language-markup">
<div id="contenant">
<span class="left">
<p>
Un projet super simple construit grâce à un template sur GitLab
</p>
</span>
<span class="right">
<p>
Un projet super simple construit grâce à un template sur GitLab
</p>
</span>
</div>
</code></pre>
<h3>Alignement css (column-count)</h3>
<pre><code class="language-css">
#contenant_cols {
column-count: 2;
float: left;
.text {
text-align: justify;
hyphens: auto;
display: block;
}
}
</code></pre>
<pre><code class="language-markup">
<div id="contenant_cols">
<div class="text">
Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
Exercitation ullamco nisi Lorem anim occaecat dolore incididunt eiusmod esse aute sunt deserunt laboris. Elit eiusmod consectetur laborum est. Lorem consequat aliqua nisi excepteur est laborum amet voluptate aliquip consequat ea labore sit reprehenderit enim. Eu consequat consequat excepteur reprehenderit ipsum in minim sint. Non ullamco mollit tempor excepteur occaecat dolore aliqua proident sint do. Exercitation duis enim laboris fugiat esse in.
Excepteur nisi eiusmod ea ut excepteur nisi veniam duis reprehenderit consequat reprehenderit. Nostrud fugiat reprehenderit aliquip. Dolor adipisicing eiusmod do exercitation cupidatat eu. Et commodo veniam esse adipisicing. Exercitation nisi dolore Lorem anim sit non in. Et anim voluptate do proident aliquip occaecat.
</div>
</div>
</code></pre>
<br>
<br>
<br>
<a id="next_flexbox" href="./2_flexbox/">Flexbox</a>
<br>
<br>
<br>
</section>
</body>
<div id="top_page"><a href="#">#</a></div>
<footer>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script src="/assets/js/prism.js"></script>
<script src="/assets/js/prism_params.js"></script>
<script src="/assets/js/script_html_code.js"></script>
<script src="/assets/js/wrap_css_html_copy.js"></script>
<script type='text/javascript' src='/assets/js/jquery.erToc.min.js'></script>
<script src="/assets/js/toc_codethis_etc.js"></script>
<script src="/assets/js/script_html_infos.js"></script>
<script src="https://livejs.com/live.js"></script>
</footer>
</html>
View Git Blame Copy Permalink