Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
prog:css [2024/10/15 07:04] – Modification du sommaire root | prog:css [2024/12/23 11:33] (Version actuelle) – [Position] : précision sur "display: flex" root |
---|
===Id=== | ===Id=== |
| |
''#id'' : identifiant via ''id='' (identifiant unique)comme ''class'' sauf que les ''id'' sont uniques. Préfixer par un dièse. | ''#id'' : identifiant via ''id='' (identifiant unique) comme ''class'' sauf que les ''id'' sont uniques. Préfixer par un dièse. |
| |
===Pseudo-classe=== | ===Pseudo-classe=== |
| |
'':only-child'' | '':only-child'' |
| |
| '':first-of-type'' : seulement le premier élément. |
| |
* Cas dynamique | * Cas dynamique |
===Pseudo-élément=== | ===Pseudo-élément=== |
| |
Désigne une partie d'un élément. 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 '':''. |
| |
''::first-line'' : Première ligne (d'un paragraphe par exemple) dans l'affichage graphique. Les mots . | ''::first-line'' : Première ligne (d'un paragraphe par exemple) dans l'affichage graphique. Les mots . |
| |
* comportement par défaut. | * 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: 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. Elles peuvent être, soit horizontales, soit verticales en fonction de la valeur de ''flex-direction'' (''row'' (par défaut) / ''column'' / ''row-reverse'' / ''column-reverse''). |
* ''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. | * ''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. |
* "entre deux" (''display: inline-block''). Les boites ne sont pas sur une ligne dédiée mais ''height'' et ''width'' sont respectés. | * "entre deux" (''display: inline-block''). Les boites ne sont pas sur une ligne dédiée mais ''height'' et ''width'' sont respectés. |
border-inline-start: 1px solid black; | border-inline-start: 1px solid black; |
</code> | </code> |
| |
| * Scrollbar / ascenseur |
| |
| Si la dimension d'une boite est bloquée et qu'il y a plus de texte que la boite peut contenir, le texte va déborder. Le contrôle du débordement se fait via ''overflow'' / ''overflow-x'' / ''overflow-y'' (''visible'' : valeur par défaut, le débordement sera visible, ''hidden'' : tout ce qui déborde de la boite sera masqué (déconseillé), ''scroll'' : une scrollbar va apparaitre si besoin.) |
| |
=====Propriétés===== | =====Propriétés===== |