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;
  • 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
    • boite css
    • 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

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)
En cours de chargement...