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/20 18:07] – [Layer] : ajout des layers imbriqués root | prog:css [2024/07/14 18:50] (Version actuelle) – [Le modèle de boite] : hotfix root | ||
---|---|---|---|
Ligne 320: | 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 355: | 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.1716221254.txt.gz · Dernière modification : 2024/05/20 18:07 de root