Lilapuce
 

exercices (lundi 19 novembre 2007)

Html - Css [4]

Les styles, les bases

Lors de l’étape précédente de l’exercice, nous avions eu un aperçu de la façon dont pouvait être utilisé l’éditeur CSS TopStyle.

Je vais continuer, en essayant, cette fois-ci de proposer quelques explications complémentaires. Je me contenterai d’indiquer des propriétés CSS « significatives », en les appliquant aux balises HTML du fichier index.html. Les fichiers de l’exercice se trouvent, comme d’habitude, en bas de cette page dans une archive ZIP.

Pour approfondir votre connaissance des CSS, reportez-vous à la rubrique liens (vous y trouverez une ou deux références à consulter sur le web). Vous verrez également que j’ai proposé quelques explications complémentaires, à consulter parallèlement à cet exercice, quand cela me semble nécessaire. Enfin, vous pouvez également acheter un petit manuel : CSS Précis & Concis- Eric Meyer - Editions O’Reilly.

Nous avons donc découvert que le couple HTML CSS s’organise autour d’une répartition des rôles :

- HTML, pour structurer les contenus à l’aide de « conteneurs logiques » prédéfinis (un paragraphe, un titre, une image, etc.)

- CSS, pour définir la mise en forme des pages ; le « style ». Autrement dit, ce langage est adapté pour prendre en charge les questions concernant la « maquette » ou la « charte graphique ».

Dans mon exemple j’avais personnalisé le titre de niveau 3 (la balise <h3>) en définissant juste la couleur.

Poursuivons cette plongée dans le CSS et commençons par examiner « l’élément parent » du document : le corps de page.

Pour body, donc, je vais d’abord paramétrer les marges de la page, c’est-à-dire les espaces qui séparent le contenu proprement dit des bords de la fenêtre (en particulier, la marge gauche et la marge supérieure).

Considérons que le corps de page soit assimilé à un bloc rectangulaire. En CSS, il existe deux types de propriétés pour renseigner les marges :

- margin : les marges extérieures

- padding : les marges intérieures

Je choisis (ce n’est pas une obligation) d’annuler toutes les marges du corps de page :

Ensuite, j’indique les informations concernant la police de caractère, ou plutôt, la « famille de polices »…

Je choisis un groupe de polices « bâton » (sans empattements) : Verdana, Geneva, Arial, Helvetica, sans serif.

L’affichage des polices étant pris en charge par l’ordinateur du visiteur, il est préférable d’indiquer plusieurs choix, par ordre de priorité. Si aucune de ces 4 polices de caractère n’est installée sur l’ordinateur (ce qui serait très surprenant), le navigateur utilisera la police « sans serif » par défaut.

Passons maintenant à la taille…

Je choisis (presque) arbitrairement une unité de mesure relative, le cadratin (em) :

0.85em

Si la question vous intéresse, vous pouvez vous reporter à ce support, qui aborde de façon plus détaillée les raisons de ce choix.

Ensuite, je commence à taper la déclaration qui va me permettre de modifier la couleur du fond de page. L’assistant affiche le code background-color dès les premiers caractères saisis, ce qui me permet de le sélectionner dans la liste.

La première partie de la déclaration s’affiche dans l’éditeur ; ce qui évite la saisie de fautes de syntaxe.

Il va falloir compléter cette déclaration en choisissant une propriété de couleur.

Comme nous l’avons déjà vu, TopStyle affiche alors un menu, lequel me donne le choix entre sélectionner une couleur prédéfinie et appeler un sélecteur par l’option Choose color. Je choisis cette deuxième possibilité.

Je clique sur une couleur du sélecteur…

La couleur est insérée sous la forme d’un codage hexadécimal (deux valeurs pour chaque canal de couleur RVB). Remarquez le signe dièse # placé devant ce code. Il s’agit de la façon la plus courante pour indiquer les couleurs en CSS. L’autre façon (les noms de couleurs) permettant juste d’indiquer quelques couleurs génériques.

J’enregistre le fichier et je charge la page dans le navigateur. Je constate les modifications :

- les marges

- la police de caractère

- la taille du texte

- la couleur de fond

Je souhaite modifier la couleur du fond. Pour cela je retourne sur mon fichier styles.css. Je place le point d’insertion à l’intérieur de body et je repère, dans la colonne de droite, la déclaration background-color.

En cliquant sur le code de couleur, je retrouve le même menu que tout à l’heure. Je clique à nouveau sur Choose color

Je sélectionne une autre couleur…

J’enregistre mon fichier, j’affiche le navigateur et j’actualise la page (CTRL+R).

Je vous récapitule une dernière fois la petite gymnastique :

- apporter les modifications sur le code CSS

- enregistrer

- afficher le navigateur

- actualiser la page à chaque modification

Je ne l’évoquerai plus dans mes explications.

Je modifie les propriétés de h1 (titre de niveau 1).

Pareil pour le titre de niveau 2.

Et pendant que j’y suis, je corrige le titre de niveau 3.

Vous remarquez que j’ai indiqué à chaque fois des valeurs en em. Cela signifie que ces valeurs sont calculées en proportion de la valeur définie dans « l’élément parent », c’est dire dans le body (voir le support, déjà cité).

Je change la couleur de la liste à puce. Pour cela, c’est li qui doit être renseigné (les items) et non ul (la déclaration de la liste).

En personnalisant les styles des balises génériques HTML, j’ai utilisé, ce que dans le jargon CCS, on appelle des sélecteurs de type : j’utilise les éléments génériques du HTML permettant de représenter un paragraphe, un titre de niveau 1, une liste à puce, etc. afin de leur appliquer un style personnalisé.

Passons, à présent, aux liens hypertextes, sachant qu’au moins trois états peuvent être paramétrés :

- apparence du lien sans survol ou sans que la cible du lien ait été visitée

- apparence au survol

- apparence du lien visité

Je commence par le premier. Je vais indiquer l’apparence par défaut des liens de la page « avant visite » et sans survol.

Remarquez qu’il suffit de taper a.

En premier lieu, je retire le soulignement :

text-decoration: none;

Ensuite j’indique une couleur de texte color et j’applique une couleur de fond background-color, deux déclarations que nous avons déjà vues.

Je définis, ensuite l’apparence du lien au survol. Pour cela la déclaration doit être a:hover (sans espaces de part et d’autre des deux points).

Remarquez, également l’instruction permettant de rétablir le soulignement :

text-decoration: underline;

Je termine par déclaration du lien visité.

Rien de nouveau, si ce n’est la déclaration :

a:visited

Pour information, sachez que lorsque vous modifiez l’apparence des liens en CSS, vous manipulez ce que l’on appelle des pseudo-classes.

En guise de conclusion de cette étape de l’exercice, voici, ci-dessous, une vue une vue globale du code CSS.

Voici, également l’apparence de la page complète – coté navigateur- après avoir visité le lien et y être revenu :

Le prochain support nous permettra d’avancer encore un peu plus dans les options de mise en page.

 

Projet RECETTE [4]