Le-Web

- WEB séance 4 - Décorer des blocs

But de la séance

  • Etre à l’aide avec la décoration css.
  • Etre capable de définir les dimensions d’un bloc.
  • Savoir différencier les marges extérieures et intérieures.
  • Connaitre les principales propriétés css.

télécharger la fiche HTML/CSS 4

Documents nécessaires pour la deuxième partie

  1. Fichier HTML (à renommer en S4_tailleblocs.html) : S4_tailleblocs.html.txt
  2. Fichier CSS (à renommer en s4_deco.css): s4_deco.css.txt

Aide mémoire :

Balisage d’un bloc
<div class="monbloc">
    ... contenu du bloc ...
</div>
Principales propriétés css
.monbloc {
    width : 300px ;                 /*  largeur en pixels */
    height : 400px ;                /*  hauteur en pixels */
    display : inline-block ;        /*  positionnement du bloc (inline ou block ou inline-block) */

    background : #FF0000 ;          /*  couleur d’arrière plan (ici rouge) */
    color : #0000FF ;               /*  couleur de la police de caractère (ici bleue) */

    margin : 10px 20px 30px 10px ;  /*  marges extérieures dans l’ordre h-g-b-d */
    border : solid 3px #0000FF ;    /*  bordure solide, bleue de 3px : solid ou dotted ou dashed */
    padding : 10px 20px 30px 10px ; /*  marges intérieures dans l’ordre h-g-b-d */

    text-align : center ;           /*  alignement du texte : left ou center ou right */
    font-size : 20px ;              /*  taille en pixels de la police de caractères */
    font-weight : 700 ;             /*  graisse de la police de caractères (100=léger ←→ 900=gras) */
    font-style : italic ;           /*  style de la police : italic ou normal ou oblique */
}

Faire une fiche cours afin de mémoriser ces balises.