Différences

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

--- prog:css [2024/10/04 16:10] – [Le modèle de boite] : ajout de l'alternate box model 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.
 | <code css>
@@ Ligne 488: / Ligne 489: @@
 .block {
   display: block;
+}
+span .span1 {
+  margin: 20px;
+  padding: 20px;
+  width: 80px;
+  height: 50px;
+  background-color: lightblue;
+  border: 2px solid blue;
+  display: inline-block;
+}
+span .span2 {
+  margin: 20px;
+  padding: 20px;
+  width: 80px;
+  height: 50px;
+  background-color: lightblue;
+  border: 2px solid blue;
 }
 </code><code html>
@@ Ligne 500: / Ligne 518: @@
 <dl>
 <p>p block <span class="block">block</span> have been wrapped in a <span>inline block</span>.</p>
+<p>I am a paragraph and this is a inline-block <span class="span1">span</span> inside that paragraph.
+A span is an inline element and so does respect width and height.</p>
+<p>I am a paragraph and this is a normal <span class="span2">span</span> inside that paragraph.
+A span is an inline element and so does not respect width and height.</p>
 </code> | <HTML>
 <style>
@@ Ligne 526: / Ligne 548: @@
 .code4 .block {
   display: block;
+}
+.code4 .span1 {
+  margin: 20px;
+  padding: 20px;
+  width: 80px;
+  height: 50px;
+  background-color: lightblue;
+  border: 2px solid blue;
+  display: inline-block;
+}
+.code4 .span2 {
+  margin: 20px;
+  padding: 20px;
+  width: 80px;
+  height: 50px;
+  background-color: lightblue;
+  border: 2px solid blue;
 }
 </style>
@@ Ligne 539: / Ligne 580: @@
 <dl>
 <p>p block <span class="block">block</span> have been wrapped in a <span>inline block</span>.</p>
+<p>I am a paragraph and this is a inline-block <span class="span1">span</span> inside that paragraph. A span is an inline element and so does respect width and height.</p>
+<p>I am a paragraph and this is a normal <span class="span2">span</span> inside that paragraph. A span is an inline element and so does not respect width and height.</p>
 </div>
 </HTML> |
-===Dimension===
+====Dimension====
   * Cas général
@@ Ligne 552: / Ligne 595: @@
 Border : via ''border'',
-Margin : via ''margin''.
+Margin : via ''margin''. Si deux éléments se touchent et que leur ''margin'' est du même signe, la combinaison des marges sera la valeur la plus éloignée de zéro (plus grande si positive ou plus petite si négative). Si l'une est positive et l'autre négative, ce sera la somme des deux.
   * Alternative modèle
-Dans ce cas, c'est ''content'' + ''padding'' qui vaut ''width'' et ''height''.
+Dans ce cas, c'est ''content'' + ''padding'' + ''border'' qui vaut ''width'' et ''height''.
 {{:prog:css:alternate-box-model.png?440|}}
@@ Ligne 574: / Ligne 617: @@
 </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=====
+====background====
+<code css>
+background-color: #567895;
+background-color: black;
+background-color: rgb(255 255 255 / 50%);
+</code>
+Il est aussi possible de générer des gradients de couleur avec ''linear-gradient'' / ''radial-gradient'' / ''conic-gradient''.
+La couleur de fond peut se combiner avec ''background-image: url(star.png);'' si l'image a une composante de transparence.
+Par défaut, une image n'est pas redimensionnée et est répétée pour remplir l'élément.
+Si on veut contrôler la répétition, on peut utiliser ''background-repeat'' avec :
+  * ''no-repeat'', ''repeat-x'', ''repeat-y'', ''repeat''.
+  * ''space'' : se répète et ajoute du vide entre les images plutôt que de mettre des images tronquées à droite et en bas,
+  * ''round'' : se répète et étire les images pour remplir le vide.
+<code css>
+background-size: 100%;
+background-size: cover;
+background-size: contains;
+</code>
+''cover'' : l'image est agrandie pour couvrir toute la surface et peut être rognée.
+''contains'' : l'image est agrandie pour couvrir 100% en hauteur ou en largeur. Elle est entièrement affichée et des bandes transparentes sont insérées pour conserver le ratio.
+Si des bandes transparentes sont affichées, il est possible d'indiquer où elles seront via la propriété ''background-position: center center;''.
+Enfin, il est possible d'avoir plusieurs images. Dans ce cas, il suffit de séparer les valeurs par des virgules :
+<code css>
+background-image: url(image1.png), url(image2.png);
+background-repeat: no-repeat, repeat-x;
+background-position: 10px 20px, top right;
+</code>
+''background-attachment'' permet de gérer le déplacement de l'image en fonction de la position de l'ascenseur.
+  * ''scroll'' : se déplace en fonction de l'ascenseur principal de la page.
+  * ''fixed'' : ne se déplace pas.
+  * ''local'' : se déplace en fonction de l'ascenseur principal de la page et de l'ascenseur local de l'élément.
+====border====
+Il y a 4 sous propriétés (''top'', ''bottom'', ''left'', ''right'') et 3 autres sous propriétés (''style'', ''width'', ''color'').
+<code css>
+border-top-width: 1px;
+border-top-style: solid;
+border-top-color: black;
+</code>