Différences

Ci-dessous, les différences entre deux révisions de la page.

--- prog:css [2024/05/17 18:03] – [Origine] : ajout de l'ordre de priorité root
+++ prog:css [2024/07/14 18:50] (Version actuelle) – [Le modèle de boite] : hotfix root
@@ Ligne 249: / Ligne 249: @@
 | 7 | user-agent (browser) | !important |
 | 8 | CSS transitions | |
+====Layer====
+Les layers permettent de ranger des styles dans des ensembles. Les styles sont appliquées dans l'ordre des layers.
+L'intérêt est qu'il est facile de changer l'ordre des layers. Quand un ''@layout nom'' est rencontré, il est créé s'il n'existait pas. S'il existe déjà, il est complété. Donc, on commence par lister l'ordre des layers puis on les remplit.
+Les layers anonymes existent. Dans ce cas, il n'est pas possible d'ajouter des éléments à l'intérieur une fois le layer définit. L'ordre des layers anonymes ne peut donc pas être modifié.
+Il existe aussi des layers imbriqués. Les noms de ces layers sont séparés par des ''.''.
+L'import de feuilles CSS dans des layers se fait via le code :
+<code css>
+@import url("components-lib.css") layer(components);
+@import url("dialog.css") layer(components.dialog);
+@import url("marketing.css") layer();
+</code>
+Exemple :
+| <code css>
+@layer site, page;
+@layer page {
+  h1 {
+    text-decoration: overline;
+    color: red;
+  }
+}
+@layer site {
+  h1 {
+    text-decoration: underline;
+    color: green;
+  }
+}
+</code><code html>
+<h1>Is this heading underlined?</h1>
+</code> | <HTML>
+<style>
+@layer code2_site, code2_page;
+@layer {
+  body {
+    margin: 0;
+  }
+}
+@layer code2_page {
+  .code2 h1 {
+    text-decoration: overline;
+    color: red;
+  }
+}
+@layer {
+  body {
+    margin: 0;
+  }
+}
+@layer code2_site {
+  .code2 h1 {
+    text-decoration: underline;
+    color: green;
+  }
+}
+</style>
+<div class="code2">
+<h1>Is this heading underlined?</h1>
+</div>
+</HTML> |
+  * Ordre de priorité
+Du moins important au plus important.
+  - Ordre des layers pour les non ''!important'',
+  - inline normal styles (''%%<h1 style="color: yellow;>%%''),
+  - animating styles,
+  - Ordre inverse des layers pour les ''!important'',
+  - inline important styles,
+  - transitioning styles,
+| <code css>
+@layer A, B;
+h1 {
+  color: orange;
+  background-color: green;
+  text-decoration: overline pink !important;
+  box-shadow: 5px 5px lightgreen !important;
+}
+@layer A {
+  h1 {
+    color: grey;
+    background-color: black !important;
+    text-decoration: line-through grey;
+    box-shadow: -5px -5px lightblue !important;
+    font-style: normal;
+    font-weight: normal !important;
+  }
+}
+@layer B {
+  h1 {
+    color: aqua;
+    background: yellow !important;
+    text-decoration: underline aqua;
+    box-shadow: -5px 5px magenta !important;
+    font-style: italic;
+    font-weight: bold !important;
+  }
+}
+</code><code html>
+<div>
+  <h1 style="color: yellow; background-color: maroon !important;">Inline styles</h1>
+</div>
+</code> | <HTML>
+<style>
+@layer code3.A, code3.B;
+.code3 h1 {
+  color: orange;
+  background-color: green;
+  text-decoration: overline pink !important;
+  box-shadow: 5px 5px lightgreen !important;
+}
+@layer code3.A {
+  .code3 h1 {
+    color: grey;
+    background-color: black !important;
+    text-decoration: line-through grey;
+    box-shadow: -5px -5px lightblue !important;
+    font-style: normal;
+    font-weight: normal !important;
+  }
+}
+@layer code3.B {
+  .code3 h1 {
+    color: aqua;
+    background: yellow !important;
+    text-decoration: underline aqua;
+    box-shadow: -5px 5px magenta !important;
+    font-style: italic;
+    font-weight: bold !important;
+  }
+}
+</style>
+<div class="code3">
+<div>
+  <h1 style="color: yellow; background-color: maroon !important;">Inline styles</h1>
+</div>
+</div>
+</HTML> |
 ====Ordre de priorité====
@@ Ligne 282: / Ligne 441: @@
   * ''unset'' : rend la valeur par défaut et annule également la valeur par défaut de la feuille de style.
+=====Mise en page=====
+====Le modèle de boite====
+Une boite / box stocke des données dans un rectangle et est composée d'une marge, bordure et padding.
+{{:prog:css:box-model.png?544|}}
+Les box peuvent être soit :
+  * dans une ligne dédiée (''display: block''). Dans ce cas, ''height'' et ''height'' sont respectés. ''h1'', ''p'' sont ''block'' par défaut.
+  * comme un caractère dans la ligne (''display: inline''). Dans ce cas, ''height'' et ''height'' sont ignorés. Les propriétés ''top'' et ''bottom'' des propriétés ''padding'' / ''margin'' / ''borders'' n'influeront pas sur les autres box ''inline''. ''a'', ''span'', ''em'' et ''strong'' sont ''inline'' par défaut.
+Les données dans les boites peuvent être soit :
+  * comportement par défaut.
+  * ''display: flex''. Ils ont donc une ligne dédiée mais tant que les boites se suivent, elles sont les unes a côté des autres.
+  * ''display: inline-flex''. Les boites ne sont pas dans une ligne dédiée et tant que les boites se suivent, elles sont les unes a côté des autres. Contrairement à ''inline'', les blocs n'ont pas une largeur de 100% mais s'adaptent au contenu.
+| <code css>
+p,
+ul {
+  border: 2px solid rebeccapurple;
+  padding: .5em;
+}
+.block,
+li {
+  border: 2px solid blue;
+  padding: .5em;
+}
+ul {
+  display: flex;
+  list-style: none;
+}
+dd {
+  display: inline-flex;
+  list-style: none;
+}
+.block {
+  display: block;
+}
+</code><code html>
+<ul>
+  <li>flex 1</li>
+  <li>flex 2</li>
+  <li>flex 3</li>
+</ul>
+<dl>
+  <dd>inline-flex 1</dd>
+  <dd>inline-flex 1</dd>
+<dl>
+<p>p block <span class="block">block</span> have been wrapped in a <span>inline block</span>.</p>
+</code> | <HTML>
+<style>
+.code4 p,
+.code4 ul {
+  border: 2px solid rebeccapurple;
+  padding: .5em;
+}
+.code4 .block,
+.code4 li {
+  border: 2px solid blue;
+  padding: .5em;
+}
+.code4 ul {
+  display: flex;
+  list-style: none;
+}
+.code4 dd {
+  display: inline-flex;
+  list-style: none;
+}
+.code4 .block {
+  display: block;
+}
+</style>
+<div class="code4">
+<ul>
+  <li>flex 1</li>
+  <li>flex 2</li>
+  <li>flex 3</li>
+</ul>
+<dl>
+  <dd>inline-flex 1</dd>
+  <dd>inline-flex 1</dd>
+<dl>
+<p>p block <span class="block">block</span> have been wrapped in a <span>inline block</span>.</p>
+</div>
+</HTML> |