publié le mer. 08 novembre 2017

Nous poursuivons le cours en ligne (MOOC) libre sur le site openclassroom: Apprenez à créer votre site web avec HTML5 et CSS3

Nous continuons aujourd'hui la deuxième partie de ce cours: Partie 2 - Les joies de la mise en forme avec CSS

N'oubliez pas de vous connecter sur le site afin de suivre votre avancement sur le cours.

5ème séance

Lors de cette cinquième séance vous allez apprendre à utiliser quelques propriétés CSS permettant de mettre en forme le texte, et d'ajouter de la couleur à votre site

2. Formatage du texte

Dans cette partie vous verrez comment créer mettre en forme le texte en changeant sa taille, sa police, son style...

Résumé

• On modifie la taille du texte avec la propriété CSS font-size. On peut indiquer la taille en pixels (16px), en « em » (1.3em), en pourcentage (110%), etc.

• On change la police du texte avec font-family. Attention, seules quelques polices sont connues par tous les ordinateurs. Vous pouvez cependant utiliser une police personnalisée avec la directive @font-face: cela forcera les navigateurs à télécharger la police de votre choix.

• De nombreuses propriétés de mise en forme du texte existent :font-style pour l'italique,font-weightpour la mise en gras,text-decoration pour le soulignement, etc.

• Le texte peut être aligné avec text-align.

• On peut faire en sorte qu'une image soit habillée (« entourée ») de texte avec float.

3. La couleur et le fond

Dans cette partie vous verrez comment changer la couleur du texte et du fond, comment inclure une image d'arrière-plan, et comment sélectionner des couleurs précisément avec ou sans transparence.

Résumé

• On change la couleur du texte avec la propriété color, la couleur de fond avec background-color.

• On peut indiquer une couleur en écrivant son nom en anglais (black, par exemple), sous forme hexadécimale (#FFC8D3) ou en notation RGB (rgb(250,25,118)).

• On peut ajouter une image de fond avec background-image. On peut choisir de fixer l'image de fond, de l'afficher en mosaïque ou non, et même de la positionner où on veut sur la page.

• On peut rendre une portion de la page transparente avec la propriété opacity ou avec la notation RGBa (identique à la notation RGB, avec une quatrième valeur indiquant le niveau de transparence).