Différences

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

--- prog:css [2024/10/04 16:34] – [Dimension] : précision sur margin 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 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>