prog:css
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
prog:css [2024/05/17 20:28] – Ajout de "Layer" root | prog:css [2024/07/14 18:50] (Version actuelle) – [Le modèle de boite] : hotfix root | ||
---|---|---|---|
Ligne 257: | Ligne 257: | ||
Les layers anonymes existent. Dans ce cas, il n'est pas possible d' | Les layers anonymes existent. Dans ce cas, il n'est pas possible d' | ||
+ | |||
+ | Il existe aussi des layers imbriqués. Les noms de ces layers sont séparés par des '' | ||
L' | L' | ||
Ligne 318: | Ligne 320: | ||
<div class=" | <div class=" | ||
< | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * Ordre de priorité | ||
+ | |||
+ | Du moins important au plus important. | ||
+ | |||
+ | - Ordre des layers pour les non '' | ||
+ | - inline normal styles ('' | ||
+ | - animating styles, | ||
+ | - Ordre inverse des layers pour les '' | ||
+ | - inline important styles, | ||
+ | - transitioning styles, | ||
+ | |||
+ | | <code css> | ||
+ | @layer A, B; | ||
+ | |||
+ | h1 { | ||
+ | color: orange; | ||
+ | background-color: | ||
+ | text-decoration: | ||
+ | box-shadow: 5px 5px lightgreen !important; | ||
+ | } | ||
+ | |||
+ | @layer A { | ||
+ | h1 { | ||
+ | color: grey; | ||
+ | background-color: | ||
+ | text-decoration: | ||
+ | box-shadow: -5px -5px lightblue !important; | ||
+ | font-style: normal; | ||
+ | font-weight: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @layer B { | ||
+ | h1 { | ||
+ | color: aqua; | ||
+ | background: yellow !important; | ||
+ | text-decoration: | ||
+ | box-shadow: -5px 5px magenta !important; | ||
+ | font-style: italic; | ||
+ | font-weight: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | <div> | ||
+ | <h1 style=" | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | @layer code3.A, code3.B; | ||
+ | |||
+ | .code3 h1 { | ||
+ | color: orange; | ||
+ | background-color: | ||
+ | text-decoration: | ||
+ | box-shadow: 5px 5px lightgreen !important; | ||
+ | } | ||
+ | |||
+ | @layer code3.A { | ||
+ | .code3 h1 { | ||
+ | color: grey; | ||
+ | background-color: | ||
+ | text-decoration: | ||
+ | box-shadow: -5px -5px lightblue !important; | ||
+ | font-style: normal; | ||
+ | font-weight: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @layer code3.B { | ||
+ | .code3 h1 { | ||
+ | color: aqua; | ||
+ | background: yellow !important; | ||
+ | text-decoration: | ||
+ | box-shadow: -5px 5px magenta !important; | ||
+ | font-style: italic; | ||
+ | font-weight: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | <div class=" | ||
+ | <div> | ||
+ | <h1 style=" | ||
+ | </ | ||
</ | </ | ||
</ | </ | ||
Ligne 353: | Ligne 441: | ||
* '' | * '' | ||
+ | |||
+ | =====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. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Les box peuvent être soit : | ||
+ | |||
+ | * dans une ligne dédiée ('' | ||
+ | * comme un caractère dans la ligne ('' | ||
+ | |||
+ | Les données dans les boites peuvent être soit : | ||
+ | |||
+ | * comportement par défaut. | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | | <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; | ||
+ | } | ||
+ | </ | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | <dl> | ||
+ | < | ||
+ | < | ||
+ | <dl> | ||
+ | <p>p block <span class=" | ||
+ | </ | ||
+ | < | ||
+ | .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; | ||
+ | } | ||
+ | </ | ||
+ | <div class=" | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | <dl> | ||
+ | < | ||
+ | < | ||
+ | <dl> | ||
+ | <p>p block <span class=" | ||
+ | </ | ||
+ | </ | ||
prog/css.1715970481.txt.gz · Dernière modification : 2024/05/17 20:28 de root