Différences

Ci-dessous, les différences entre deux révisions de la page.

--- prog:css [2024/10/06 17:39] – Ajout de "Border" root
+++ prog:css [2024/12/23 11:33] (Version actuelle) – [Position] : précision sur "display: flex" root
@@ Ligne 78: / Ligne 78: @@
 ===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===
@@ Ligne 91: / Ligne 91: @@
 '':only-child''
+'':first-of-type'' : seulement le premier élément.
   * Cas dynamique
@@ Ligne 100: / Ligne 102: @@
 ===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 .
@@ Ligne 442: / Ligne 444: @@
   * ''unset'' : rend la valeur par défaut et annule également la valeur par défaut de la feuille de style.
-=====Mise en page=====
+=====Le modèle de boite=====
-====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.
@@ Ligne 450: / Ligne 450: @@
 {{:prog:css:box-model.png?544|}}
-===Position===
+====Position====
 Les box peuvent être soit :
@@ Ligne 460: / Ligne 460: @@
   * 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.
   * "entre deux" (''display: inline-block''). Les boites ne sont pas sur une ligne dédiée mais ''height'' et ''width'' sont respectés.
@@ Ligne 585: / Ligne 585: @@
 </HTML> |
-===Dimension===
+====Dimension====
   * Cas général
@@ Ligne 616: / Ligne 616: @@
 }
 </code>
+  * Propriétés logiques
+Il est possible de choisir l'orientation du texte (horizontal ou vertical) avec la propriété ''writing-mode''. Dans ce cas, la propriété ''width'' peut vouloir être remplacée par la valeur de ''height''.
+{{:prog:css:horizontal-tb.png?634|}} {{:prog:css:vertical-tb.png?406|}}
+Il faut alors remplacer ''width'' par ''inline-size'' et ''height'' par ''block-size''.
+Il est aussi possible de faire la même chose avec ''margin'', ''border'' et ''padding''.
+<code css>
+margin-block-start: 20px;
+padding-inline-end: 2em;
+padding-block-start: 2px;
+border-block-start: 5px solid pink;
+border-inline-end: 10px dotted rebeccapurple;
+border-block-end: 1em double orange;
+border-inline-start: 1px solid black;
+</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=====