coopernet Réussir son site web et ses applications de la conception à la réalisation

Positionnement (à l'ancienne !)

• float (css1)
• clear (css1)
  • A utiliser pour faire passer des boîtes sous les éléments flottants (float)
• display (css1)
  • valeurs possibles :
    • none (pas d'affichage)
    • block (par défaut pour la grande majorité des balises) : prend toute la largeur
    • inline (par défaut pour img, span, b, strong, em, q, abbr, ... prend le minimum de place dans le flux du texte sans marge en haut et en bas
    • table (pour les tableaux)
    • inline-block (un mélange de block et inline
    • flex,
    • ...
  • Attention, cette propriété est importante pour permettre à un élément en ligne d'occuper tout l'espace de son conteneur : display:block; height : 100%;
• position (css2)
  Lorsque vous appliquez à un élément les règles :

  position: absolute;
  top: 0;
  left: 0;
  

  L'élément en question sera positionné sur un autre calque et en haut à gauche du premier élément ancêtre qui aura pour règle :

  position: relative

  Si aucun de ses ancêtres n'a de position en relative, le "body" sera alors la référence.
  Attention si l'on l'on veut voir au dessus de l'élément positionné en absolute  ses éléments frères, il faut leur appliquer la règle suivante : 

  position: relative;

• Attention, dans le cas où on positionne un élément sur une image qui est en display "inline", un espace correspondant au "descender" apparaît : https://stackoverflow.com/questions/31444891/mystery-white-space-underneath-image-tag/31445364#31445364
• top, right, bottom, left (css2)
• z-index (css2)
• :after{ /*CSS2 */ content: ""; display: block; clear:both; }

Propriétés de boîte

• Modèle de boîte
  • 
  • Attention si les valeurs des propriétés de boîte sont exprimées en %, elles sont relatives à leur conteneur
• margin (css1)
• padding (css1)
• border
• border-radius (css3)
  • border-radius:8px 8px 8px 8px;

Dimensions

• width (css1)
  • S'applique sur tous les éléments block
  • En fonction de son contenant
  • Attention, le width dépend par défaut du padding, du border et du margin qui s'ajoutent au calcul. Pour corriger cela et faire en sorte que seul le margin s'ajoute : utiliser la propriété : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing
• height (css1)
  • S'applique sur tous les éléments block
• line-height (css1)
  • Hauteur de ligne des éléments inline cf https://www.paris-web.fr/2010/conferences/macrotypographie-page-web.php
• max-width (css2)
  • En fonction de son contenant
• max-height (css2)

Fonds

• background-color (css1) cf https://color.adobe.com/fr/create/color-wheel
• background-image (css1)
• background-repeat (css1)
• background-position (css1)
• background (css1)
  • p{ background:#FFCCCC url(../images/fond.png) no-repeat 50% 100%; } /* le repère de la position vient du selecteur (ici p) et non pas de son conteneur */
• repeat-x(css1)
• repeat-y(css1)

Liste

• list-style (CSS1)
• list-style-type (css1)

Polices et textes

• font-family (css1)
• font-size (css1)
• font-style (css1)
• font-variant (css1)
• font-weight (css1)
• font (css1)
• color (css1)
• text-align (css1)
• line-height (css1)
• letter-spacing (css1)
• word-spacing (css1)
• white-space (css1)