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/04/14 23:01] – [Combinateurs] : doit être dans le sommaire root | prog:css [2024/07/14 18:50] (Version actuelle) – [Le modèle de boite] : hotfix root | ||
---|---|---|---|
Ligne 231: | Ligne 231: | ||
=====Rendu===== | =====Rendu===== | ||
+ | |||
+ | ====Origine==== | ||
+ | |||
+ | Il y a 3 origines de la feuille de style : | ||
+ | |||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | ^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' | ||
+ | |||
+ | L' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | <code css> | ||
+ | @import url(" | ||
+ | @import url(" | ||
+ | @import url(" | ||
+ | </ | ||
+ | |||
+ | Exemple : | ||
+ | |||
+ | | <code css> | ||
+ | @layer site, page; | ||
+ | |||
+ | @layer page { | ||
+ | h1 { | ||
+ | text-decoration: | ||
+ | color: red; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @layer site { | ||
+ | h1 { | ||
+ | text-decoration: | ||
+ | color: green; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | @layer code2_site, code2_page; | ||
+ | |||
+ | @layer { | ||
+ | body { | ||
+ | margin: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @layer code2_page { | ||
+ | .code2 h1 { | ||
+ | text-decoration: | ||
+ | color: red; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @layer { | ||
+ | body { | ||
+ | margin: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @layer code2_site { | ||
+ | .code2 h1 { | ||
+ | text-decoration: | ||
+ | color: green; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | <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=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
====Ordre de priorité==== | ====Ordre de priorité==== | ||
Ligne 244: | Ligne 421: | ||
| < | | < | ||
| < | | < | ||
+ | |||
+ | Il est possible de ne pas respecter l' | ||
[[https:// | [[https:// | ||
+ | |||
+ | ====Héritage==== | ||
+ | |||
+ | Par défaut, la valeur des propriétés ne sont pas héritées sauf : '' | ||
+ | |||
+ | Il existe les mots clés suivants : | ||
+ | |||
+ | * '' | ||
+ | |||
+ | * '' | ||
+ | |||
+ | * '' | ||
+ | |||
+ | * '' | ||
+ | |||
+ | * '' | ||
+ | |||
+ | =====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.1713128514.txt.gz · Dernière modification : 2024/04/14 23:01 de root