656 lines
22 KiB
HTML
656 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<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="style_basics.css">
|
|
<!-- positions margins -->
|
|
<link rel="stylesheet" href="style_positions_margins.css">
|
|
<!-- columns -->
|
|
<link rel="stylesheet" href="style_columns.css">
|
|
|
|
<link href="/assets/css/prism.css" rel="stylesheet" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- TOP navbare -->
|
|
<div id="navbar">
|
|
<a href="https://bonnebulle.gitlab.io/plain-html-redo">URL du projet</a>
|
|
(sur gitlab, repo d'origine)
|
|
+ <a href="https://gitlab.com/bonnebulle/plain-html-redo">Repo gitlab
|
|
!!!</a>
|
|
</div>
|
|
|
|
<!-- Titre -->
|
|
<h1>Bonjour le Monde !</h1>
|
|
|
|
<section>
|
|
|
|
<div id="contenant_basics">
|
|
|
|
<p>Les éléments HTML sont nombreux, ils servent à entourer un contenu dans
|
|
la page</p>
|
|
<p>Par exemple, si on écrit ce code : <code><u>text souligné</u></code> le
|
|
text va être sousligné (un style va lui être appliqué)</code></p>
|
|
|
|
Exemple :<br>
|
|
<pre><code class="language-markup"><u>text souligné</u></code></pre>
|
|
|
|
<p>Chaque navigateur (Chrome.ium, Firefox.Brave, Safari), va lire ces
|
|
"<span class="important">diférentes balises</span>" ("tag" en anglais)
|
|
et afficher leur contenu en fonction de celles-ci. Si chacune d'entre
|
|
elle se comporte diférement dans la page, c'est que, <strong>par
|
|
défaut</strong>, le Navigateur (qui lit et interpréte le code), va
|
|
leur ajouter des styles d'habillage</p>
|
|
|
|
<strong>Exemple de balises connues :</strong>
|
|
<p>Mettre du texte entre deux balises....<br>
|
|
|
|
<pre><code class="language-markup"><a href="#top">lien vers</a></code></pre>
|
|
|
|
<pre><code class="language-markup">
|
|
<h1>titre</h1>
|
|
<h2>titre</h1>
|
|
<h3>titre</h1>
|
|
<h4>titre</h1>
|
|
<h5>titre</h1>
|
|
<h6>titre</h1>
|
|
</code></pre>
|
|
|
|
|
|
<p>Mettre du texte entre deux balises <code><a>text</a></code> permettera
|
|
de créer un lien</p>
|
|
<p>Une balise <codescaped><div>contenu</div></codescaped>
|
|
permet de contenir d'autes éléments
|
|
|
|
<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 que une <codescaped><div></codescaped> se comporte comme un "block"</p>
|
|
<p><span class="important">On va y revenir avec un exemple</span></p>
|
|
|
|
<pre><code class="language-markup">
|
|
On peut aussi 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>Si on veut éviter les sauts de ligne quand on entoure un élément de text (ou autre contenu), on utilisera des balises "<span class="important">inline</span>"</p>
|
|
<p>Des balises "inline" permettent au contraire d'entourer des bouts de textes (ou autres contenus) sans faire de saut de ligne !</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>Vous noterez que, même si je fais un saut de ligne dans le code, le lien ne passe pas à la ligne...</p>
|
|
<p><codescaped><strong>contenu</strong></codescaped> comme <codescaped><a>contenu</a></codescaped> sont inline</p>
|
|
<p>Dans l'écriture dans l'éditeur de texte où l'on code, on peut faire autant de sauts à la ligne qu'on veut !</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>À l'orgine il s'agissait de "mimer" certaines mises en formes usuelles dans le journalisme, l'édition</p>
|
|
<p>Padding crée une marge entre le text est le bord de la feuille (page, support)</p>
|
|
|
|
|
|
<p>La balise... <br>"u" <u>underline</u> <br>"b" ou "strong"
|
|
<strong>gras</strong><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>demo de <strong>balise inline</strong> qui crée du gras (et c'est tout)</p>
|
|
</code></pre>
|
|
|
|
|
|
|
|
<div id="italgras"
|
|
class="exemple">
|
|
<span>Exemple :</span><br>
|
|
<p>Paragraphe -- 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 dolor id do dolor aliquip <i>excepteur consectetur nostrud
|
|
velit</i>. Tempor Lorem eu nisi. Eiusmod id veniam minim duis
|
|
deserunt exercitation cupidatat. Et aliquip elit quis occaecat minim
|
|
sunt ut elit sit velit labore amet nisi cillum.</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. 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. Eu aliquip aliqua labore ad eu sint adipisicing
|
|
laboris esse nisi ut mollit ex eu.</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p>On peut modifier les propriétés de ces éléments proposés "de base" en HTML</p>
|
|
|
|
|
|
<p id="ex_gras_classes">On peut opérer de plusieurs façons, d'abord on
|
|
peut ajouter du style directement dans un élement</p>
|
|
|
|
|
|
<div class='resume'>Ici je suis venu ajouter du style directement à l'élément
|
|
<span style="background-color: rgb(173, 192, 206);">font-weight</span> est une <span class="important">propriété</span>
|
|
<span style="background-color: rgb(0, 255, 204);">normal</span> une <span class="important">valeur</span> de 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></codescaped>) mais on a ajouté un style
|
|
directement sur l'élémént ("<span class="important">inline</span>")
|
|
</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></codescaped>)
|
|
</p>
|
|
|
|
</p></p>
|
|
<div class='resume'>Ici je suis venu ajouter du style directement à l'élément
|
|
<span style="background-color: rgb(173, 192, 206);">font-size</span> est une <span class="important">propriété</span>
|
|
<span style="background-color: rgb(0, 255, 204);">10px</span> une <span class="important">valeur</span> de cette propriété
|
|
</div>
|
|
|
|
<pre><code class="language-markup">
|
|
<small>petit text</small>
|
|
<span style="font-size: 10px">plus petit text</span>
|
|
</code></pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Je peux voir le code source de la page en faisant <code
|
|
class="key">CTRL+MAJ+I</code> les outils de dev. s'affichent<br>
|
|
Dans Firefox je trouve les parametres via icon <code class="key">"..."</code> (à droite) puis <b>Parametres</b> (<code class="key">"icon rouage"</code>) /OU/ <code class="key">F1</code></p>
|
|
|
|
<div>
|
|
<img src="0_firefox_parametres_devs.png">
|
|
</div>
|
|
|
|
<p>Je peux ensuite demander d'afficher ces styles par défaut</p>
|
|
|
|
<div>
|
|
<img src="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 feulles de style</p>
|
|
|
|
<div class="resume">On a vu qu'en HTML on pouvait entourer.encercler.contenir des bouts de text
|
|
Qu'on pouvait le faire avec différents tags ou "balises"
|
|
Que certaines sont interprétées/lues par défaut par les navigateurs...
|
|
qui les affichent d'une certaine façon en leur ajoutant du style
|
|
Qu'on peut modifier les éléments en y ajoutant du "style" directement
|
|
Ces nouvelles propriétés et valeurs outrepassent celles précédemment demandées (par le navigateur)
|
|
</div>
|
|
|
|
|
|
|
|
<hr class="space visible" />
|
|
|
|
|
|
|
|
<p>On peut également créer une "<span class="important">feuille de style</span>" pour "<span class="important">Cascading Style Sheet</span>" == CSS</p>
|
|
<p>Elle va contenir des instructions de mise en forme/page qui vont habiller les éléments de la page</p>
|
|
<p>L'intéret c'est que ces règles sont accessibles dans un fichier
|
|
distinct de la page HTML (ce qui rend son accès et lecture plus simple)
|
|
</p>
|
|
<p><span class="important">On peut surtout ainsi modifier plusieurs éléments récurents dans nos pages...</span> (cela
|
|
donnera de la cohérence esthétique à un site)</p>
|
|
|
|
|
|
|
|
<hr class="space" />
|
|
|
|
|
|
<p>Voyons d'abord comment fonctionne une feuille de styles (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 nomer 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 ">
|
|
|
|
<p>Dans la page actuelle j'en ai chargé plusieures...</p>
|
|
<p>Certaines vont servir plusieurs fois, être chargées dans plusieurs
|
|
pages HTML</p>
|
|
<p>Ainsi, avec une même feuille de style mon site aura une certaine
|
|
homogénéité, une cohérence visuelle</p>
|
|
|
|
<p>Je peux voir le code source de la page en faisant <code class="key">CTRL+U</code> ou <code class="key">CTRL+MAJ+I</code></p>
|
|
|
|
<div class='resume'>Si je met cette balise dans ma page (de préférence dans "head", 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="style_basics.css">
|
|
</code></pre>
|
|
|
|
<p><a href="./style_basics.css">Lien vers <i class="file">style_basics.css</i></a></p>
|
|
|
|
|
|
<p class="resume" id="back_from_index_empty">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 inforamtions séparées au même endroit...
|
|
Mais on peut aussi charger cette cascade d'instructions directement dans la page...
|
|
Au lieu d'utiliser <codescaped><link></codescaped> on pourra utiliser <codescaped><style>...</style></codescaped>
|
|
</p>
|
|
|
|
<div>
|
|
<p>Sur VSCODE, le logiciel de code qu'on va utiliser...
|
|
<br>je peux créer un fichier <i class="file">index.html</i>
|
|
<br>l'ouvrir... et tapper "<code class="key">!</code>", un popup s'ouvre (Intellisens), en faisant <code class="key">ENTRER</code>, le <i>template</i> (gabari, préformatage) d'une page HTML est chargé...</p>
|
|
|
|
<p><a href="./0_index_empty.html">Lien vers <i class="file">0_index_empty.html</i></a></p>
|
|
</div>
|
|
|
|
<hr class="space" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="resume">Plutôt que d'intervenir sur un élement à 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 text... rouge
|
|
Dans la feuille de style on indique qu'on cherche (cible) TOUS les éléments avec la class "important" en indiquant....
|
|
<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> ("sibling") un élément d'après sa classe ou son id
|
|
On verra qu'il existe d'autres moyens (plus sophistiqués)
|
|
</div>
|
|
|
|
<pre><code class="language-css">
|
|
#important_wrapper { /* id */
|
|
margin-left: 10px;
|
|
border-left: 3px solid red;
|
|
padding-left: 20px;
|
|
}
|
|
.important { /* classe */
|
|
font-weight: bolder;
|
|
color: red;
|
|
}
|
|
</code></pre>
|
|
|
|
<pre><code class="language-markup">
|
|
<div id="important_wrapper">
|
|
<p><strong class="pas_important">tempor ut consequat sint</strong>...</p>
|
|
<p>deserunt <span class="important">commodo</span> sunt aute...</p>
|
|
<p>Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore.....</p>
|
|
<p>Eiusmod id <span class="important">veniam</span> minim duis deserunt exercitation cupidatat....</p>
|
|
</div>
|
|
</code></pre>
|
|
|
|
|
|
|
|
<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 formes courament utilisées
|
|
<br>Aussi il est interessant de trouver des noms de classes équivoques (ce n'est pas toujours facile)
|
|
</p>
|
|
|
|
<p class="important">CSS On peut attribuer les mêmes consignes (propriétés:valeurs) à plusieurs élémens ciblés en même temps (via leur classe, id, etc)</p>
|
|
<p class="important">HTML On peut attribuer plusieurs classes à un même élément</p>
|
|
|
|
<pre><code class="language-css">
|
|
/* 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 plusieures cibles en même temps */
|
|
/* Séparées par une "," */
|
|
.para, #sad {
|
|
font-weight: bold;
|
|
}
|
|
/* PSEUDO CLASSE :last-child */
|
|
p:last-child .para {
|
|
background-color: orangered;
|
|
}
|
|
</code></pre>
|
|
|
|
<pre><code class="language-markup">
|
|
<div id="text_principal">
|
|
<p>1. Je suis le premier <span class="para">pargraphe</span> !</p>
|
|
<p>2. Et moi le deuxième <span class="para">pargraphe</span> !</p>
|
|
<p>3. Et moi le troisiem <span class="para fond_bleu">pargraphe</span> !</p>
|
|
<p>4. Et moi le dernier <span class="para fond_bleu">pargraphe</span> <span id="sad">=(</span></p>
|
|
</div>
|
|
</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 afficher la page selon cette liste de demandes/règles.
|
|
|
|
ICI, dans le CSS, les instructions de fond (background) indiquées dans ".fond_bleu" prennent le dessus sur celle de ".para"
|
|
|
|
4. utilisation d'une pseudo-classe (on va les passer en revue),
|
|
... celle-ci cible TOUT dernier pargraphe (<codescaped>p:last-child</codescaped>) puis cherche TOUT <codescaped>.para</codescaped> à l'intérieur...
|
|
( ... dit à l'envers : cette instruction cible TOUT <codescaped>.para</codescaped> présent dans le dernier paragraphe (<codescaped>p:last-child</codescaped>) )
|
|
|
|
4. Dans le CSS...
|
|
... Comme cette instruction d'atteindre/cibler le dernier .para est indiquée <u>après</u> celle de ".fond_bleu", elle prend le dessus :
|
|
... la propriété:value background-color: orangered; est appliquée !!!
|
|
</div>
|
|
|
|
|
|
<hr class="space" />
|
|
|
|
|
|
<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">
|
|
#enfant p {
|
|
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>soutient</p>
|
|
<div id="enfant" class="cascade border">
|
|
<p>autonomie</p> <!-- ////////////// ciblé -->
|
|
</div>
|
|
</div>
|
|
<p>jambes</p>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<hr class="space visible">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>S'il on veut créer un saut à la ligne on peut utiliser ajouter des <span class="important">propriétés d'espacement...</span></p>
|
|
<p>Sur les éléments qui se comportent comme des "blocs" (telles les div)</p>
|
|
|
|
<p>On peut ainsi espacer les contenus...</p>
|
|
|
|
<pre><code class="language-css">
|
|
/* Objet au centre, avec MARGE extérieure et PADDING intérieur */
|
|
#test_margin_padding {
|
|
padding: 30px; /* PADDING */
|
|
margin: 30px; /* MARGIN */
|
|
border: 1px solid;
|
|
background-color: #e3dcff;
|
|
border: 3px solid red;
|
|
}
|
|
/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding */
|
|
#test_wrapper {
|
|
border: 1px solid gainsboro;
|
|
background: #fdffdf; /* jaune */
|
|
padding: 10px;
|
|
}
|
|
/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) entre le bord de #test_margin_padding et son CONTENU */
|
|
#inner_content {
|
|
background-color: #cff0fb;
|
|
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>
|
|
|
|
<img src="0_padding_margin.png">
|
|
|
|
|
|
<br>
|
|
<p>Margin crée de l'espace, permet aussi de déplacer les éléments...</p>
|
|
|
|
<pre><code class="language-css">
|
|
#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;
|
|
}
|
|
|
|
</code></pre>
|
|
|
|
|
|
<pre><code class="language-markup">
|
|
<div id="mousehover_movemargin">
|
|
<div id="mousehover_movemargin_element">Youhouuuuu</div>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<pre><code class="language-css">
|
|
#margin_first,
|
|
#margin_seconde,
|
|
#margin_last {
|
|
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="0_padding_margin_cut.png">
|
|
|
|
<pre><code class="language-css">
|
|
#top_margin_block {
|
|
width: 100%
|
|
}
|
|
#margin_exemples_wrapper {
|
|
background: greenyellow;
|
|
border: 1px solid #000;
|
|
display: block;
|
|
clear: both;
|
|
float: left;
|
|
width: 100%;
|
|
margin-bottom: 4rem;
|
|
}
|
|
.margin_exemples {
|
|
display: inline;
|
|
border: 1px solid #000;
|
|
background: chartreuse;
|
|
padding: 5px 5px 0 5px; /* EXEMPLE Padding */
|
|
height: 100px; width: 100px;
|
|
float: left;
|
|
}
|
|
.margin_exemples.margin_autour {
|
|
margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
|
|
height: auto; width: auto;
|
|
min-height: 100px;
|
|
background: lavender
|
|
}
|
|
</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 style="margin-top: -10px" class="margin_exemples">style : <br>margin-top: 10px</div>
|
|
</div>
|
|
</code></pre>
|
|
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<!-- —> columns -->
|
|
<h3>Alignement manuel (2 colones left/right)</h3>
|
|
|
|
<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>
|
|
|
|
<h3>Alignement css (column-count)</h3>
|
|
|
|
|
|
<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>
|
|
|
|
<a href="./2_flexbox/">Flexbox</a>
|
|
|
|
|
|
</body>
|
|
|
|
<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/script_html_code.js"></script>
|
|
|
|
<script src="/assets/js/prism.js"></script>
|
|
|
|
<script src="/assets/js/script_html_infos.js"></script>
|
|
<script src="https://livejs.com/live.js"></script>
|
|
|
|
</footer>
|
|
|
|
</html> |