4/11/14

Règles CSS

Utilisez le dossier phares

Définir la mise en forme d'une page web par CSS c'est écrire des règles ; chaque règle dit au navigateur les propriétés qu'il doit appliquer à tel ou tel élément de la page.

Ouvrez le document Keepers.html avec Bluefish. Remarquez que le sous-titre Keeper's responsibilities est balisé h2. Est-il bien balisé ? Et les autres titres ? Corrigez les balises si besoin.

Nous allons définir une "règle de style" pour mettre en forme le sous titre. Placez-vous dans la balise appropriée de l'en-tête (cf TD précédent) et ajoutez une nouvelle règle (onglet CSS/Créer une feuille de style ou menu Dialogue/CSS/Créer un style).

Choisissez h2 comme sélecteur.

Le sélecteur vous permet de choisir parmi toutes les balises html (remarquez que les balises ne sont pas les mêmes si la case html 5 est cochée).

Vous pouvez alors choisir parmi l'ensemble des propriétés celles pour lesquelles vous voulez imposer un choix.

Choisissez une police (font-family ; par exemple arial), une taille (font-size ; par exemple 16 pixels) et une couleur de police (color ; par exemple #204080). Validez et observez le résultat dans un navigateur.

Observez la balise

<style type="text/css">...</style>

Cette partie de l'entête html contient les règles CSS du document ; l'attribut de cette balise indique que son contenu est en langage CSS et non en HTML ; dans le contenu on voit l'écriture de la règle h2:

h2 {
font-family: arial, helvetica, sans-serif;
font-size: 16px;
color: #204080;
}

La syntaxe d'une règle CSS est la suivante :

Dans notre exemple précédent le sélecteur est h2, une des propriétés est : color: #204080

Quelles propriétés utiliser ?

Nous indiquerons à chaque TD les propriétés nouvelles utilisables.

Avertissement : comme vous pouvez le constater il y a de nombreuses propriétés CSS ; il peut être tentant, si vous n'arrivez pas à faire un exercice de les essayer "au hasard" mais c'est extrèmement déconseillé.

Certaines des propriétés sont faciles à comprendre ; d'autres, très difficiles, seront étudiées vers la fin de ce cours. Par ailleurs tous les exercices sont testés et faisables avec les propriétés vues, il est déconseillé d'expérimenter !

Utilisez les propriétés de mise en forme d'un texte : font-family, color, font-size, font-weight, ...

Utilisez aussi les propriétés liées à la notion de paragraphe : line-height, text-indent