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/01 11:18] – Ajout du css pour les états : root | prog:css [2024/07/14 18:50] (Version actuelle) – [Le modèle de boite] : hotfix root | ||
---|---|---|---|
Ligne 43: | Ligne 43: | ||
=====Syntaxe===== | =====Syntaxe===== | ||
+ | |||
+ | ====Généralités==== | ||
On définit une liste de balises html avec ses propriétés CSS. | On définit une liste de balises html avec ses propriétés CSS. | ||
Ligne 54: | Ligne 56: | ||
[[https:// | [[https:// | ||
- | Fonctions principales : | + | ====Sélecteurs==== |
- | * Il est possible de mettre une liste de balises en les séparant par des '' | + | C'est les identifiants avant le '' |
- | * '' | + | ===Balise=== |
- | * Pour désigner une balise qui a un nom de classe précis, il faut mettre | + | '' |
- | | + | '' |
- | * Succession : si on veut désigner une balise qui est précédée par une autre balise, c'est '' | + | '' |
- | * État : ou événement (changement d' | + | ===Attribut=== |
- | | + | '' |
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | ===Id=== | ||
+ | |||
+ | ''# | ||
+ | |||
+ | ===Pseudo-classe=== | ||
+ | |||
+ | Désigne un élément entier. | ||
+ | |||
+ | * Cas statique | ||
+ | |||
+ | '' | ||
+ | |||
+ | '': | ||
+ | |||
+ | '': | ||
+ | |||
+ | * Cas dynamique | ||
+ | |||
+ | '': | ||
+ | |||
+ | '': | ||
+ | |||
+ | ===Pseudo-élément=== | ||
+ | |||
+ | Désigne une partie d'un élément. Préfixé par un '':'' | ||
+ | |||
+ | '':: | ||
+ | |||
+ | '':: | ||
+ | |||
+ | ====Combinateurs==== | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | * Écriture sous forme de style imbriqué | ||
+ | |||
+ | <code css> | ||
+ | p { | ||
+ | ~ img { | ||
+ | } | ||
+ | } | ||
+ | /* Est équivalent à */ | ||
+ | p ~ img { | ||
+ | } | ||
+ | </ | ||
+ | ===Exemple=== | ||
| <code css> | | <code css> | ||
Ligne 129: | Ligne 190: | ||
</ | </ | ||
+ | ===Raccourcis=== | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | * '' | ||
+ | |||
+ | * '' | ||
+ | |||
+ | ====@rules==== | ||
+ | |||
+ | Extension au format de fichier. | ||
+ | |||
+ | * '' | ||
+ | |||
+ | <code css> | ||
+ | @import " | ||
+ | </ | ||
+ | |||
+ | * '' | ||
+ | |||
+ | <code css> | ||
+ | @media (min-width: 30em) { | ||
+ | body { | ||
+ | background-color: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | =====Fonctions===== | ||
+ | |||
+ | * '' | ||
+ | |||
+ | Exemple '' | ||
+ | |||
+ | * '' | ||
+ | |||
+ | S' | ||
+ | |||
+ | =====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é==== | ||
+ | |||
+ | Dans le CSS, certaines règles peuvent être contradictoires. | ||
+ | |||
+ | La priorité (par ordre décroissant) est donc : l'id, la classe, l' | ||
+ | |||
+ | ^ Selector ^ Identifiers ^ Classes ^ Elements ^ Total specificity ^ | ||
+ | | < | ||
+ | | < | ||
+ | | < | ||
+ | | < | ||
+ | | < | ||
+ | |||
+ | Il est possible de ne pas respecter l' | ||
+ | |||
+ | [[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.1711963090.txt.gz · Dernière modification : 2024/04/01 11:18 de root