LG

Outils pour utilisateurs

Outils du site

Piste :
prog:css

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
prog:css [2024/04/05 07:03] – [Sélecteurs] : réorganisation rootprog:css [2024/07/14 18:50] (Version actuelle) – [Le modèle de boite] : hotfix root
Ligne 81: Ligne 81:
  
 ===Pseudo-classe=== ===Pseudo-classe===
 +
 +Désigne un élément entier.
 +
 +  * Cas statique
 +
 +'':first-child''
 +
 +'':last-child''
 +
 +'':only-child''
 +
 +  * Cas dynamique
  
 '':hover'' : état / événement / pseudo-classe. Préfixé par un seul '':''. '':hover'' : état / événement / pseudo-classe. Préfixé par un seul '':''.
 +
 +'':focus''
  
 ===Pseudo-élément=== ===Pseudo-élément===
  
-''::first-line'' : pseudo-élément (dédié à une sous partie de la classe). Préfixé par un '':''. Les navigateurs tolèrent aussi un seul '':''.+Désigne une partie d'un élément. Préfixé par un '':''. Les navigateurs tolèrent aussi un seul '':''.
  
-===Opérateur===+''::first-line'' : Première ligne (d'un paragraphe par exemple) dans l'affichage graphique. Les mots .
  
-''balise.class'' : balise ayant un nom de classe précis.+''::before'' et ''::after'' : Peut permettre d'ajouter du contenu avant ou après un élément. 
 + 
 +====Combinateurs==== 
 + 
 +''balise.class:first-child::first-line'' : balise ayant un nom de classe précis avec un pseudo-classe et pseudo-élément. Combinable à l'infini.
  
 ''article p'' : balise imbriquée : séparer les identifiants par un espace. ''article p'' : balise imbriquée : séparer les identifiants par un espace.
 +
 +''article > p'' : balise imbriquée uniquement pour les enfants directs.
  
 ''p + p'' : voisin direct : balises se touchant. Le style sera appliquée uniquement au second élément ''p''. ''p + p'' : voisin direct : balises se touchant. Le style sera appliquée uniquement au second élément ''p''.
Ligne 98: Ligne 118:
 ''p ~ p'' : voisin indirect : balises ne se touchant pas forcément. Le style sera appliquée à partir du second élément ''p''. ''p ~ p'' : voisin indirect : balises ne se touchant pas forcément. Le style sera appliquée à partir du second élément ''p''.
  
 +  * Écriture sous forme de style imbriqué
 +
 +<code css>
 +p {
 +  ~ img {
 +  }
 +}
 +/* Est équivalent à */
 +p ~ img {
 +}
 +</code>
 ===Exemple=== ===Exemple===
  
Ligne 200: Ligne 231:
  
 =====Rendu===== =====Rendu=====
 +
 +====Origine====
 +
 +Il y a 3 origines de la feuille de style :
 +
 +  * ''user-agent'' : celui par défaut du navigateur,
 +  * ''author'' : celui définit dans la feuille de style du site internet,
 +  * ''user'' : celui surchargé manuellement par l'utilisateur.
 +
 +^Order (low to high) ^ Origin ^ Importance ^
 +| 1 | user-agent (browser) | normal |
 +| 2 | user | normal |
 +| 3 | author (developer) | normal |
 +| 4 | CSS @keyframe animations | |
 +| 5 | author (developer) | !important |
 +| 6 | user | !important |
 +| 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é==== ====Ordre de priorité====
Ligne 213: Ligne 421:
 | <code>#identifier</code> | 1 | 0 | 0 | 1-0-0 | | <code>#identifier</code> | 1 | 0 | 0 | 1-0-0 |
 | <code>button:not(#mainBtn, .cta)</code> | 1 | 0 | 1 | 1-0-1 | | <code>button:not(#mainBtn, .cta)</code> | 1 | 0 | 1 | 1-0-1 |
 +
 +Il est possible de ne pas respecter l'ordre précédent en ajoutant la balise ''!important'' après la valeur d'une propriété. Si plusieurs ''!important'' existent, on applique le même calcul que précédemment mais c'est la priorité la plus faible qui est prise en compte.
  
 [[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity_2|Cascade, specificity, and inheritance]] {{ :prog:css:cascade_specificity_and_inheritance_-_learn_web_development_mdn_01_04_2024_22_39_24_.html |Archive du 01/01/2024 le 01/04/2024}} [[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity_2|Cascade, specificity, and inheritance]] {{ :prog:css:cascade_specificity_and_inheritance_-_learn_web_development_mdn_01_04_2024_22_39_24_.html |Archive du 01/01/2024 le 01/04/2024}}
 +
 +====Héritage====
 +
 +Par défaut, la valeur des propriétés ne sont pas héritées sauf : ''azimut'', ''border-collapse'', ''border-spacing'', ''côté légende'', ''color'', ''cursor'', ''direction'', ''cellules-vides'', ''famille-polices'', ''font-size'', ''font-style'', ''font-variant'', ''font-weight'', ''police'', ''espacement-lettre'', ''line-height'', ''list-style-image'', ''list-style-position'', ''list-style-type'', ''list-style'', ''orphelins'', ''citations'', ''text-align'', ''text-indent'', ''text-transform'', ''Visibilité'', ''white-space'', ''veuves'', ''word-spacing''.
 +
 +Il existe les mots clés suivants :
 +
 +  * ''inherit'' : active l'héritage.
 +
 +  * ''initial'' : désactive l'héritage. 
 +
 +  * ''revert'' : ...
 +
 +  * ''revert-layer'' : ...
 +
 +  * ''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> |
  
prog/css.1712293387.txt.gz · Dernière modification : 2024/04/05 07:03 de root