Le style CSS
On a découvert à la séance précédente comment utiliser un certain nombre de balises en html (si vous n'avez pas fini, voyez au moins les liens et les images avant de commencer). Cependant, l'ensemble restait peu organisé, les pages ressemblaient souvent à ce que l'on appelle une soupe de tags (tag est un mot anglais pour désigner les balises). Il s'agit maintenant d'organiser nos pages de façon à utiliser un style propre et efficace.
Un document html propre
Un document html a une structure d'éléments emboîtés. Par exemple, ceci se code sous la forme :
<html>
<head>
<meta>
<title></title>
</head>
<body>
<h1></h1>
<p><em></em></p>
<ul>
<li></li> <li></li>
</ul>
<h2></h2>
<p><abbr></abbr><em></em></p>
</body>
</html>
Il est très important que la structure soit respectée. Toutes les balises doivent être refermées (à quelques exceptions près comme meta, img et br). De plus, le texte ne peut pas se promener n'importe où dans le document. Il doit être par exemple dans un élément p. Une bonne base est de vérifier si le validateur considère votre page comme valide.
Deux éléments et un attribut
On aura parfois besoin des éléments span et div. span permet de délimiter un bout de texte au milieu d'un paragraphe, div sert lui à délimiter un bloc entier, pouvant contenir plusieurs paragraphes, listes, tableaux. La plupart des éléments peuvent se voir donner un attribut class avec comme valeur une chaîne de caractères permettant de spécialiser l'élément. Par exemple on pourra utiliser :
<span class="gras">blabla</span>
pour indiquer que ce mot est dans la catégorie span.gras dont je définirai les propriétés ailleurs. Il y aura plus loin des exemples illustrant ceci.
Où mettre des indications de style
Il y a plusieurs endroits où l'on peut donner des indications de style. D'abord dans une feuille de style externe. Si j'ai mis mes indications de style dans le fichier style.css, je l'indiquerai dans l'élément head en ajoutant :
<link rel="stylesheet" type="text/css" href="style1.css">
Cette méthode a l'intérêt de permettre d'utiliser un même fichier de style pour plusieurs pages. On peut aussi ajouter un élément style dans l'élément head :
<style type="text/css"> </style>
On peut enfin ajouter un attribut style à la plupart des éléments :
<h1 style="...">Titre</h1>
Le navigateur regarde les informations de style dans l'ordre indiqué et les combine. S’il reçoit deux informations contradictoires, il ne retient que la dernière.
Syntaxe
Une indication de style a la forme suivante : background : blue
On va donc écrire par exemple un mot en gras avec :
<span style="font-weight : bold">mots en gras</span>
On peut mettre plusieurs indications de style à la suite, en les séparant par un ;. Maintenant, on a vu qu'on pouvait aussi mettre une indication de style au début du document, voire dans un autre fichier. Dans ce cas, il faut préciser à quels éléments le style s'applique. On aura ainsi par exemple dans le fichier style1.css :
body {
background : gold ;
}
h1 , h2 {
font-weight : bold ;
text-align : center;
}
h1 {
font-size:240% ;
}
span.gras{
font-weight : bold ;
}
p#intro span.gras{
font-weight : bolder ;
}
Expliquons rapidement ce que cela signifie. D'abord, l'élément body a un fond doré. Les titres h1 et h2 sont en gras et centrés. Les titres h1 sont écrits 2.4 fois plus gros que le texte normal. Le contenu de <span class="gras"> des mots</span> est mis en gras, sauf dans le paragraphe qui s'appelle intro (donc introduit par <p id="intro" name="intro"> ), où ils sont en très gras.
Il existe aussi parfois des raccourcis pour indiquer plusieurs propriétés en une seule fois :
h1 {
font-weight : bold ;
font-size : 12 pt ;
line-height : 14 pt ;
font-family : Helvetica ;
font-variant : normal ;
font-style : normal ;
}
h1{font : bold 12 pt/14 pt Helvetica}
unités de longueur
Unités relatives em : taille horizontale de la police ex : taille verticale de la police px : pixel Unités absolues in : pouce cm : centimètre mm : millimètre pt : point (1/72 pouce) pc : pica (12 points)
Exemples
Consultez la page :
http://www.csszengarden.com/
et regardez le rendu de la page suivant le CSS qui est appliqué.
S'il y a des choses que vous ne savez pas faire, vous pouvez aller vous promener sur les liens utiles.
Personne ne connaît tout par cœur, il est donc parfaitement normal de se référer à la documentation régulièrement.
http://www.csszengarden.com/
http://zonecss.free.fr/
http://www.yoyodesign.org/doc/w3c/css1
Votre site
Maintenant il est temps de revenir à votre site. Avec les connaissances acquises vous devriez pouvoir améliorer vos pages.
Commencez par vérifier que vos pages sont valides.
Validateur de page HTML : http://validator.w3.org/
Si votre page est valide, il vous proposera aussi de vérifier la validité des CSS de votre page, ce qui est une bonne idée.
Vous remarquerez peut-être à cette occasion que des couleurs comme gold ou grey ne sont pas valides. Il aurait fallu les entrer sous la forme : #fd800 ou #808080.
Travail à faire pour les vacances d'automne : Miniprojet WEB.
Vous trouverez ci-dessous en téléchargement :