Utilisation des CSS pour la présentation Web
Les CSS (Cascading Style Sheets, feuilles de styles en cascade) vont simplifier
la création de vos pages, au prix d'un petit apprentissage initial.
Il s'agit d'un fichier que l'on inclut dans chaque page web et qui contient
les attributs de position et de style pour le contenu.
Le format CSS existe de depuis 1994 mais s'est généralisé
en 2000 avec un support complet dans Internet Explorer 5 (I.E. est maintenant remplacé par Edge).
Il est possible d'associer une feuille de style à un document XML.
Dans ce cas les propriétés sont attribuées aux éléments
(balises) du document.
- Pourquoi les feuilles de style?
- Les bases
- Eléments et propriétés
- Les déclarations CSS
- Insérer une feuille de style
- Le positionnement
- Une règle: propriétés en cascade
- Ressources et tutoriels
Pourquoi les feuilles de style?
L'intérêt le plus commun est la création de plusieurs
colonnes de texte, selon la présentation des journaux.
Les CSS ont les avantages suivants:
- Définir un type de présentation une seule fois, que l'on réutilise dans toutes les pages.
- Séparer texte et présentation ce qui a plusieurs avantages:
- Faciliter la lecture de la page par les robots des moteurs de recherche qui ignorent la présentation.
- Changer le style du site tout entier en modifant seulement la feuille de style.
- Si besoin changer la style d'affichage pour une même page, avec un affichage épuré pour imprimer le texte par exemple.
Les bases
Les feuilles de styles servent principalement:
- A positionner les parties de la page. Le plus souvent, un cadre d'en-tête, un menu à gauche ou à droite, le cadre principal du contenu de la page et éventuellement un pied de page.
- A définir les polices et tailles des titres et sous-titres.
- A désigner et à positionner les images.
- On définit aussi les marges externes et externes des cadres de texte.
Noter que l'on ne peut pas mettre de textes dans le fichier de feuille de style, mais il vaut mieux de toute façon qu'ils soient dans la page pour être pris en compte par les moteurs de recherche.
Elements et propriétés
Les CSS se réduisent à deux choses: les éléments, et leurs propriétés. Les éléments sont les balises Html ou une classe définie dans la feuille de style.
Pour fractionner et positionner les parties de la page, on utilise une balise nommée "div".
Le format général de déclaration de style est le suivant:
nom { ...liste de propriétés...Le nom peut avoir trois formes, comme détaillé ci-dessous.
}
Les propriétés ont la forme:
attribut : valeur ;Certains attributs comme "border" par exemple, peuvent comporter une liste de valeurs séparées par un espace (non pas par une virgule).
Les déclarations CSS
Il y a trois types de déclarations dans un fichier CSS:
- Les balises HTML dont le style est redéfini. Exemple:
table { } - Les éléments avec identificateur unique:
#menu { } - Les classes réutilisables;
.item { }
Les identificateurs et classes nécessitent un attribut dans le code HTML. Cela aura la forme suivante, avec la balise div par exemple:
- <div id="menu">
Pour un identificateur unique dans la page (on peut le réutiliser dans des pages différentes). - <div class="item">
Pour un nom réutilisé plusieurs fois dans une même page.
Insérer une feuille de style
On place dans la section <head> la ligne suivante:
<link type="text/css" href="mafeuille.css" rel="stylesheet">
- le type désigne le type d'affichage.
- href a pour valeur le fichier contenant les définitions de style.
- rel="stylesheet" précise le type de lien.
Le positionnement
Les parties de la page sont découpées avec une balise div à
laquelle on associe un identificateur. Exemples:
<div id="logo"> </div> <div id="menu"> </div> <div id="contenu"> </div>Ces éléments sont repris dans la feuille de style avec le format suivant:
#logo { } #menu { top: 60px; } #contenu { left: 120px; }
Il suffit ensuite de définir les attributs de positions.
Le menu aura l'attribut: top: 60px; pour être placé 60
pixels sous la partie logo.
Le contenu aura l'attribut: left: 120px; pour ménager 120 pixel
à gauche pour le menu.
Une règle: propriétés en cascades
Ne perdez pas de vue que les CSS sont hiérarchiques: toutes les propriétés
que vous définissez sont relatives à l'élément
dans lequel vous vous trouvez. Par exemple, une police réduite à
80% à l'intérieur d'un élement dans lequel la police
est augmentée à 120 % revient à une police de taille
standard.
D'ailleurs, il est possible de cibler précisément un élément
à l'intérieur d'un autre élement avec la syntaxe suivante:
#selecteur selecteurinterne
{
...attributs...
}
Exemple:
#table a
{ color:green;
}
Les liens seront verts, mais dans les tableaux seulement. Pour avoir le détails des propriétés CSS, consultez les références ci-dessous.
Ressources et tutoriels
Quelques tutoriels et références pour apprendre à utiliser les CSS avec exemples et outils.
- Tutoriel. Les principaux sélecteurs et propriétés. Contient un exemple
complet de page en CSS: menu, en-tête, pied de page, logo, etc...
Cet exemple est un modèle que vous pouvez utiliser pour créer vos pages. N'oubliez pas de télécharger la feuille de style, et le logo (les liens sont dans le menu). - Spécification. Description en français du standard, version 1 de base.
- Validateur CSS du W3C. Vérifier que votre feuille de style ne contient pas d'erreur.