0_intro
This commit is contained in:
vincent_b
BIN
public/0_afficher_style.png
Executable file
BIN
public/0_afficher_style.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
public/0_firefox_parametres_devs.png
Normal file
BIN
public/0_firefox_parametres_devs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
18
public/0_index_empty.html
Normal file
18
public/0_index_empty.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
a { background: red; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<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>
|
||||||
|
<a href="0_intro.html#back_from_index_empty">Retour à 0_intro.html</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
656
public/0_intro.html
Normal file
656
public/0_intro.html
Normal file
@@ -0,0 +1,656 @@
|
|||||||
|
<!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>
|
||||||
BIN
public/0_padding_margin.png
Normal file
BIN
public/0_padding_margin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
public/0_padding_margin_cut.png
Executable file
BIN
public/0_padding_margin_cut.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/2_flexbox/flexbox_css_tricks.png
Normal file
BIN
public/2_flexbox/flexbox_css_tricks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
94
public/2_flexbox/index.html
Normal file
94
public/2_flexbox/index.html
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>2 Flexboxs</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../style.css">
|
||||||
|
<link rel="stylesheet" href="style_flexbox.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- <div w3-include-html="./parts/header.html"></div> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h3>Flexbox 2 colones</h3>
|
||||||
|
|
||||||
|
<div id="flex-container">
|
||||||
|
|
||||||
|
<div class="flex-item">
|
||||||
|
1 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.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-item">
|
||||||
|
2 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.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h3>Flexbox items</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex-container tomato">
|
||||||
|
|
||||||
|
<li class="flex-item">
|
||||||
|
<img src="/assets/img/random-image.png">
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="flex-item">
|
||||||
|
<img src="/assets/img/random-image.png">
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="flex-item">
|
||||||
|
<img src="/assets/img/random-image.png">
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="flex-item">
|
||||||
|
<img src="/assets/img/random-image.png">
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h3>Flexbox Navigation</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="navigation">
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">About</a></li>
|
||||||
|
<li><a href="#">Products</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<h3>Flexbox Recap</h3>
|
||||||
|
|
||||||
|
<img id="flexbox_css_tricks" src="https://code.vincent-bonnefille.fr/plain-html_back/public/2_flexbox/flexbox_css_tricks.png">
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<script src="/assets/js/script_html_infos.js"></script>
|
||||||
|
<!-- <script src="/assets/js/script_html_include_w3.js"></script> -->
|
||||||
|
|
||||||
|
<!-- <script>
|
||||||
|
includeHTML();
|
||||||
|
</script> -->
|
||||||
|
|
||||||
|
<script src="https://livejs.com/live.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</html>
|
||||||
|
|
||||||
119
public/2_flexbox/style_flexbox.css
Normal file
119
public/2_flexbox/style_flexbox.css
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
/* //// Flexbox normal */
|
||||||
|
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
|
||||||
|
|
||||||
|
#flex-container {
|
||||||
|
display: flex;
|
||||||
|
/* display: none !important; */
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0px 70px;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
#flex-container > .flex-item {
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-item {
|
||||||
|
width: 100px;
|
||||||
|
margin: auto; /* Magic! */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* //// FLEX items (boites) */
|
||||||
|
|
||||||
|
/* ... */
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
max-width: 80vw;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: right;
|
||||||
|
|
||||||
|
/* RESET */
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex-container.tomato
|
||||||
|
.flex-item {
|
||||||
|
background: tomato;
|
||||||
|
padding: 0px;
|
||||||
|
width: 200px;
|
||||||
|
width: calc(100% / 4 - 10px);
|
||||||
|
box-sizing: content-box;
|
||||||
|
height: 150px;
|
||||||
|
margin-top: 10px;
|
||||||
|
line-height: 150px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 3em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* //// Navigation */
|
||||||
|
.navigation li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large */
|
||||||
|
.navigation {
|
||||||
|
gap: 0px 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
/* This aligns items to the end line on main-axis */
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium screens */
|
||||||
|
@media all and (max-width: 800px) {
|
||||||
|
.navigation {
|
||||||
|
/* When on medium sized screens, we center it by evenly distributing empty space around items */
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small screens */
|
||||||
|
@media all and (max-width: 500px) {
|
||||||
|
.navigation {
|
||||||
|
/* On small screens, we are no longer using row direction but column */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* FIXS */
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
max-width: none;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#flexbox_css_tricks {
|
||||||
|
/* width: 100vw; */
|
||||||
|
width: calc(100vw - 13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ///// FLEXBOX */
|
||||||
|
#flex-container,
|
||||||
|
.flex-container {
|
||||||
|
margin: auto;
|
||||||
|
clear: both;
|
||||||
|
max-width: 80vw;
|
||||||
|
}
|
||||||
|
#flex-container,
|
||||||
|
.flex-container,
|
||||||
|
.navigation {
|
||||||
|
margin-top: 3rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
BIN
public/3_grid/cat1.jpg
Normal file
BIN
public/3_grid/cat1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
public/3_grid/cat10.jpg
Normal file
BIN
public/3_grid/cat10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
public/3_grid/cat2.jpg
Normal file
BIN
public/3_grid/cat2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/3_grid/cat3.jpg
Normal file
BIN
public/3_grid/cat3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
public/3_grid/cat4.jpg
Normal file
BIN
public/3_grid/cat4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
public/3_grid/cat5.jpg
Normal file
BIN
public/3_grid/cat5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
public/3_grid/cat6.jpg
Normal file
BIN
public/3_grid/cat6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
public/3_grid/cat7.jpg
Normal file
BIN
public/3_grid/cat7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
public/3_grid/cat8.jpg
Normal file
BIN
public/3_grid/cat8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
public/3_grid/cat9.jpg
Normal file
BIN
public/3_grid/cat9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
54
public/3_grid/index.html
Normal file
54
public/3_grid/index.html
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>2 Flexboxs</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../style.css">
|
||||||
|
<link rel="stylesheet" href="style_grid.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="wrapper">
|
||||||
|
<h3>Grids</h3>
|
||||||
|
|
||||||
|
<div id="container_grids" class="wrapper_container">
|
||||||
|
<div class="grid__item"><p>Esse occaecat sint</p></div>
|
||||||
|
<div class="grid__item"><p>Ex culpa veniam</p></div>
|
||||||
|
<div class="grid__item"><p>Laborum labore ipsum</p></div>
|
||||||
|
<div class="grid__item"><p>Commodo aliqua aliqua</p></div>
|
||||||
|
<div class="grid__item"><p>Dolor eiusmod amet</p></div>
|
||||||
|
<div class="grid__item"><p>Irure irure eiusmod</p></div>
|
||||||
|
<div class="grid__item"><p>Eu quis velit</p></div>
|
||||||
|
<div class="grid__item"><p>Ullamco deserunt duis</p></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h3>Grids (plus)</h3>
|
||||||
|
|
||||||
|
<!-- CATS ! https://genrandom.com/cats/ -->
|
||||||
|
|
||||||
|
<div id="container_grids_plus" class="wrapper_container">
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat1.jpg')"><p>Esse occaecat sint</p></div>
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat2.jpg')"><p>Ex culpa veniam</p></div>
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat3.jpg')"><p>Laborum labore ipsum</p></div>
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat4.jpg')"><p>Commodo aliqua aliqua</p></div>
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat5.jpg')"><p>Dolor eiusmod amet</p></div>
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat6.jpg')"><p>Irure irure eiusmod</p></div>
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat7.jpg')"><p>Eu quis velit</p></div>
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat8.jpg')"><p>Ullamco deserunt duis</p></div>
|
||||||
|
<div class="grid__item" style="background: no-repeat url('cat9.jpg')"><p>Occaecat sint</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<script src="/assets/js/script_html_infos.js"></script>
|
||||||
|
<script src="https://livejs.com/live.js"></script>
|
||||||
|
</footer>
|
||||||
|
</html>
|
||||||
|
|
||||||
98
public/3_grid/style_grid.css
Normal file
98
public/3_grid/style_grid.css
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
/* 1. GRIDS */
|
||||||
|
#container_grids,
|
||||||
|
#container_grids_plus {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 30px;
|
||||||
|
align-content: center;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr 1fr;
|
||||||
|
grid-column-gap: 20px
|
||||||
|
grid-row-gap: 20px
|
||||||
|
justify-items: stretch
|
||||||
|
align-items: stretch
|
||||||
|
}
|
||||||
|
.grid__item {
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: burlywood;
|
||||||
|
text-align: center;
|
||||||
|
align-content: center;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 2. PLUS */
|
||||||
|
|
||||||
|
/* COUNTER */
|
||||||
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters */
|
||||||
|
#container_grids_plus {
|
||||||
|
counter-reset: section;
|
||||||
|
}
|
||||||
|
#container_grids_plus
|
||||||
|
.grid__item::before {
|
||||||
|
counter-increment: section;
|
||||||
|
content: counter(section);
|
||||||
|
margin-top: -100px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* BACKGROUNDS */
|
||||||
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/background */
|
||||||
|
|
||||||
|
|
||||||
|
/* VARIABLES */
|
||||||
|
/* VERIABLES on leur attribue une valeure...
|
||||||
|
qu'on peut réutiliser plusieurs fois !!! */
|
||||||
|
:root {
|
||||||
|
--backcolor: rgb(223, 169, 99);
|
||||||
|
--frontcolor: brown;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* !IMPORTANT, outrepasser les styles "inline", valeurs attribuées directement dans les éléments (HTML) */
|
||||||
|
#container_grids_plus
|
||||||
|
.grid__item {
|
||||||
|
font-weight: bold;
|
||||||
|
border: 1px solid var(--frontcolor);
|
||||||
|
color: var(--frontcolor);
|
||||||
|
|
||||||
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/background-size */
|
||||||
|
background-size: cover !important;
|
||||||
|
background-position: center center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* CIBLAGE complexe */
|
||||||
|
/* https://learn.shayhowe.com/advanced-html-css/complex-selectors/ */
|
||||||
|
#container_grids_plus
|
||||||
|
.grid__item:hover {
|
||||||
|
color: #FFF;
|
||||||
|
text-shadow: 0px 0px 5px var(--frontcolor);
|
||||||
|
}
|
||||||
|
#container_grids_plus
|
||||||
|
.grid__item:not(:hover) {
|
||||||
|
background-image: unset !important;
|
||||||
|
background-color: var(--backcolor) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ENFANTS dernier dans la classe .wrapper_container */
|
||||||
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/:last-child */
|
||||||
|
#wrapper
|
||||||
|
.wrapper_container:last-child {
|
||||||
|
margin-bottom: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NTH */
|
||||||
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/background-size */
|
||||||
|
|
||||||
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="generator" content="GitLab Pages">
|
|
||||||
<title>Plain HTML site using GitLab Pages</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<script src="https://livejs.com/live.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="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>
|
|
||||||
|
|
||||||
<h1>Bonjour le Monde !</h1>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="contenant_cols">
|
|
||||||
<div class="text">
|
|
||||||
Hey Ho 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>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<script src="./script_html_infos.js"></script>
|
|
||||||
</footer>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="generator" content="GitLab Pages">
|
|
||||||
<title>Plain HTML site using GitLab Pages</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<script src="https://livejs.com/live.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="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>
|
|
||||||
|
|
||||||
<h1>Bonjour le Monde !</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Un projet simple construit grâce à un template sur GitLab
|
|
||||||
</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
10
public/parts/header.html
Normal file
10
public/parts/header.html
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="generator" content="GitLab Pages">
|
||||||
|
<title>Plain HTML site using GitLab Pages</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="https://livejs.com/live.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
@@ -8,10 +8,8 @@ infoBox.innerHTML = `
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div id="info-content">
|
<div id="info-content">
|
||||||
<div><strong>Élément :</strong> <span id="element-tag"></span></div>
|
|
||||||
<div><strong>ID :</strong> <span id="element-id"></span></div>
|
|
||||||
<div><strong>Classe(s) :</strong> <span id="element-class"></span></div>
|
|
||||||
<div><strong>Parent :</strong> <span id="element-parent"></span></div>
|
<div><strong>Parent :</strong> <span id="element-parent"></span></div>
|
||||||
|
<div><strong>Enfant :</strong> <span id="element-info"></span></div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@@ -76,9 +74,6 @@ style.textContent = `
|
|||||||
#info-content.hidden {
|
#info-content.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#toggle-display {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Injection dans le DOM
|
// Injection dans le DOM
|
||||||
@@ -86,9 +81,7 @@ document.head.appendChild(style);
|
|||||||
document.body.appendChild(infoBox);
|
document.body.appendChild(infoBox);
|
||||||
|
|
||||||
// Récupération des éléments d'affichage
|
// Récupération des éléments d'affichage
|
||||||
const elementTag = document.getElementById('element-tag');
|
const elementInfo = document.getElementById('element-info');
|
||||||
const elementId = document.getElementById('element-id');
|
|
||||||
const elementClass = document.getElementById('element-class');
|
|
||||||
const elementParent = document.getElementById('element-parent');
|
const elementParent = document.getElementById('element-parent');
|
||||||
const toggleCheckbox = document.getElementById('toggle-display');
|
const toggleCheckbox = document.getElementById('toggle-display');
|
||||||
const infoContent = document.getElementById('info-content');
|
const infoContent = document.getElementById('info-content');
|
||||||
@@ -134,15 +127,38 @@ document.addEventListener('mouseover', function(e) {
|
|||||||
|
|
||||||
// Récupérer les informations
|
// Récupérer les informations
|
||||||
const tag = el.tagName.toLowerCase();
|
const tag = el.tagName.toLowerCase();
|
||||||
const id = el.id || '(aucun)';
|
const id = el.id;
|
||||||
const classes = el.className || '(aucune)';
|
const classes = el.className;
|
||||||
const parent = el.parentElement ? el.parentElement.tagName.toLowerCase() : '(aucun)';
|
|
||||||
|
// Construire la chaîne au format element#id.class
|
||||||
|
let infoStr = tag;
|
||||||
|
if (id) {
|
||||||
|
infoStr += '#' + id;
|
||||||
|
}
|
||||||
|
if (classes) {
|
||||||
|
// Remplacer les espaces par des points pour les classes multiples
|
||||||
|
infoStr += '.' + classes.trim().replace(/\s+/g, '.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construire la chaîne parent au format element#id.class
|
||||||
|
let parentStr = '(aucun)';
|
||||||
|
if (el.parentElement) {
|
||||||
|
const parentTag = el.parentElement.tagName.toLowerCase();
|
||||||
|
const parentId = el.parentElement.id;
|
||||||
|
const parentClasses = el.parentElement.className;
|
||||||
|
|
||||||
|
parentStr = parentTag;
|
||||||
|
if (parentId) {
|
||||||
|
parentStr += '#' + parentId;
|
||||||
|
}
|
||||||
|
if (parentClasses) {
|
||||||
|
parentStr += '.' + parentClasses.trim().replace(/\s+/g, '.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Afficher les informations
|
// Afficher les informations
|
||||||
elementTag.textContent = tag;
|
elementInfo.textContent = infoStr;
|
||||||
elementId.textContent = id;
|
elementParent.textContent = parentStr;
|
||||||
elementClass.textContent = classes;
|
|
||||||
elementParent.textContent = parent;
|
|
||||||
|
|
||||||
// Rendre la boîte visible
|
// Rendre la boîte visible
|
||||||
infoBox.classList.add('visible');
|
infoBox.classList.add('visible');
|
||||||
|
|||||||
157
public/style.css
157
public/style.css
@@ -1,3 +1,8 @@
|
|||||||
|
body,
|
||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@@ -8,19 +13,22 @@ h1 {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
#navbar {
|
||||||
background-color: #FFF !important;
|
background-color: #fff !important;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
/* max-width: 800px; */
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
* {
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
/* color: #000; */
|
/* color: #000; */
|
||||||
color: blue;
|
color: blue;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
padding: 10px 10px 10px 0;
|
padding: 10px 10px 10px 0;
|
||||||
@@ -32,43 +40,114 @@ h1 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.resume {
|
||||||
|
white-space: pre-line;
|
||||||
|
border: 1px solid #aaf;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0px;
|
||||||
|
line-height: 1.8em;
|
||||||
|
background: #f2f2ff;
|
||||||
|
padding: 15px 10px 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
#contenant {
|
.code-toolbar + .code-toolbar {
|
||||||
background-color: red;
|
margin-top: -30px !important;
|
||||||
/* height: 2000px; */
|
}
|
||||||
|
|
||||||
/* https://www.w3schools.com/howto/howto_css_two_columns.asp */
|
.exemple,
|
||||||
.left, .right {
|
.code-content {
|
||||||
float:left;
|
/* border: 1px solid #e8cf8b; */
|
||||||
width: 50%;
|
border-radius: 0 0 3px 3px;
|
||||||
box-sizing: border-box;
|
padding: 8px 16px 12px;
|
||||||
}
|
margin-top: -16px;
|
||||||
.left {
|
background: #fff;
|
||||||
width: calc(50% - 30px);
|
/* margin-bottom: 10px; */
|
||||||
padding-left: 10px;
|
float: none;
|
||||||
}
|
}
|
||||||
.right {
|
|
||||||
border-left: 1px solid #000;
|
.code-content::after {
|
||||||
padding-left: 30px;
|
content: "";
|
||||||
}
|
clear: both;
|
||||||
p:first-child {
|
display: table;
|
||||||
margin-top: 0;
|
}
|
||||||
}
|
|
||||||
p:last-child {
|
.code-toolbar {
|
||||||
margin-bottom: 0;
|
border: 1px solid #e8cf8b;
|
||||||
}
|
margin-bottom: 50px;
|
||||||
display: none;
|
}
|
||||||
|
pre[class*="language-"] {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
pre[class*="language-"] {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
padding-bottom: 30px !important;
|
||||||
|
}
|
||||||
|
.exemple {
|
||||||
|
padding-top: 22px;
|
||||||
|
}
|
||||||
|
pre.language-css {
|
||||||
|
background: #f5fde3 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#contenant_cols {
|
codescaped {
|
||||||
column-count: 3;
|
background-color: #fdf6e3;
|
||||||
float: left;
|
border-radius: 0 0 3px 3px;
|
||||||
|
padding: 3px;
|
||||||
/* PENSER à mettre <html lang="fr"> */
|
color: #000 !important;
|
||||||
.text {
|
}
|
||||||
text-align: justify;
|
.file {
|
||||||
hyphens: auto;
|
background: #e3eafd;
|
||||||
display: block;
|
font-style: normal;
|
||||||
}
|
text-decoration: none;
|
||||||
}
|
color: #000 !important;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code:not([class]) {
|
||||||
|
font-size: 1.3em;
|
||||||
|
color: #000;
|
||||||
|
background: #fdf6e3;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
:is(.code-toolbar) + :not(.exemple) {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
:is(.exemple, .code-content) p {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.code-toolbar > .toolbar {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
.toolbar-item:first-child span {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: #FFF !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
left: -10px !important;
|
||||||
|
position: relative !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-markup {
|
||||||
|
word-wrap: anywhere !important;
|
||||||
|
white-space: break-spaces !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
code.key {
|
||||||
|
background: gray;
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 1.3em;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 3px 13px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr.space {
|
||||||
|
height: 2rem;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
hr.visible {
|
||||||
|
background-color: #000;
|
||||||
|
height: 10px;
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|||||||
170
public/style_basics.css
Normal file
170
public/style_basics.css
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
p {
|
||||||
|
color: darkcyan;
|
||||||
|
}
|
||||||
|
#italgras :is(i,strong) {
|
||||||
|
color: orangered;
|
||||||
|
}
|
||||||
|
.pas_important {
|
||||||
|
font-weight: normal;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.important {
|
||||||
|
font-weight: bolder;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.pas_important {
|
||||||
|
font-weight: normal;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
#important_wrapper {
|
||||||
|
margin-left: 10px;
|
||||||
|
border-left: 3px solid red;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#test_wrapper:before {
|
||||||
|
content: "margin";
|
||||||
|
margin: 0px;
|
||||||
|
font-size: 10px;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
#test_margin_padding:before {
|
||||||
|
content: "padding";
|
||||||
|
margin: 0px;
|
||||||
|
font-size: 10px;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -25px;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 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 */
|
||||||
|
.para, #sad {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
/* PSEUDO CLASSE :last-child */
|
||||||
|
p:last-child .para {
|
||||||
|
background-color: orangered;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
.cascade {
|
||||||
|
margin-left: 10px;
|
||||||
|
background: #FFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.cascade:hover {
|
||||||
|
background: fuchsia;
|
||||||
|
}
|
||||||
|
#enfant p {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
53
public/style_columns.css
Normal file
53
public/style_columns.css
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
|
||||||
|
|
||||||
|
#contenant {
|
||||||
|
background-color: red;
|
||||||
|
/* display: none; */
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
|
||||||
|
* {}
|
||||||
|
|
||||||
|
.left, .right {
|
||||||
|
float:left;
|
||||||
|
width: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
/* width: calc(50% - 30px); */
|
||||||
|
/* padding-left: 10px; */
|
||||||
|
width: calc(50% - 0px);
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
border-left: 1px solid #000;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
p:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#contenant_cols {
|
||||||
|
column-count: 2;
|
||||||
|
float: left;
|
||||||
|
/* display: none; */
|
||||||
|
* {}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
text-align: justify;
|
||||||
|
hyphens: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user