Cascading Style sheets

Box model

Après cette présentation

  • La hauteur et la largeur des éléments tu modifieras
  • Les marges internes et externes tu étendras
  • Avec des bordures les éléments tu décoreras
  • La propriété overflow tu apprendras
  • L'affichage hybride inline-block tu découvriras
  • Les unités absolues et relatives tu différencieras

ouvrez les boîtes !

  1. Créer une feuille de style
  2. Ajouter le code ci-dessous
  3. Appliquer au site "Laure Dinateur" 
* {
    border: 1px solid red;
}

CSS Box Model

Et notez ce que vous ne comprenez pas !

unités absolues & relatives

Absolues Relatives
pixels (px) pourcents (%) relatif à l'élément père
points (pt) Taille police (em / rem) relatif à la police de l'élément père
Taille écran (vw / vh) relatif à la surface écran

margin collapsing - encastrement

La plus grande l'emporte !

Shorthand Property

background-position
background-position
background-position: 25% 25%;
background-position: 50% 75%;
background-size
background-attachment

Exercices : Syntaxe CSS

Faire les exercices des chapitres CSS :

Background, Border, Margin, Padding,

Height/Width, Box Model et Outline

Donnons un peu de style à note site !