Débuter en CSS (Cascading Style Sheets)
Pour bien comprendre l’utilité et la pratique du CSS, il faut assimiler
les principes de conception des sites modernes :
- Séparation du contenu et de la forme
- Prendre en compte la maintenance du site dés la conception
- faire un code xhtml sémantiquement correct
- Prendre en compte les contraintes d’accéssibilité pour tous les
navigateurs, tous les systèmes et toutes les personnes.
Le XHTML 1.0
Le contenu est obtenu par le langage
title="eXtensible HyperText Markup Language">XHTML, mariage
du
title="HyperText Markup Language">HTML et du
xml:lang="en" lang="en"
title="eXtensible Markup Language ">XML, il est composé comme
suit :
- Déclaration XML
<?xml version="1.0" encoding="ISO-8859-15"?>
- Déclaration de la
title="Document Type Definition">DTD, qui décrit comment utiliser
les balises -
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!doctype>
- Contenu du site
-
...
>body>
...
Nous venons de voir la structure initial d’une page écrit en xhtml
1.0 strict, il existe d’autre DTD utilisable pour la réalisation
d’une page HTML, la DTD la plus utilisée semble être le HTML 4.01.
Pour la suite du tutoriel, je vais parler de balise, d’élément ou
d’attribut, afin d’être clair et que tout le monde parle le même langage, je
vais expliquer les définitions :
- Eléments
title, body, p
>> le terme élément
est générique- Balise
<title>
: balise ouvrante
de l’élémenttitle
</p>
: balise fermante de
l’élémentp
- Attribut
src, alt, title
sont les attributs de/>
Une fois déterminé selon quel référence nous allons coder, nous pouvons
passer à la réalisation du code en xhtml, celui-ci est régit par quelques
principes élémentaires :
- les balises sont toutes en minuscules
- Toutes les balises ouvertes doivent être fermées :
... |
| etc...
| ...
- Seules quelques balises dites "orphelines" existent :
le retour chariot :
la ligne horizontale :
les images :
- Respecter la sémantique des balises, ne pas aller vers la facilitée en
détournant une balise hors de sa fonction initiale
(blockquote
, ...) - Le décor est fait avec les feuilles de styles (CSS)
voici un exemple de code source d’une page en XHTML :
Le Cascading Style Sheet
La définition du CSS
(selon fr.wikipedia.org)
Le langage CSS (Cascading Style Sheets : feuilles de
style en cascade) est utilisé pour décrire la présentation d’un document
structuré, écrit en HTML ou en XML, et c’est le World Wide Web Consortium
(W3C) qui en a la direction.
CSS est principalement utilisé pour définir les couleurs, les polices, le
rendu, et d’autres caractéristiques d’un document, ...
Ainsi, les avantages des feuilles de style sont multiples :
* Toute l’architecture visuelle d’un document réside dans un seul fichier,
et peut donc être mise à jour facilement.
* Un même document peut donner le choix entre plusieurs feuilles de style
(impression ou lecture à l’écran par exemple). Certains navigateurs web
permettent d’accéder facilement à un choix de feuilles de style.
* Le code HTML est considérablement réduit en taille et en complexité,
puisqu’il ne contient plus de balise de présentation.
Introduction à CSS2
Pour bien comprendre la suite, nous allons parler le même langage en
CSS.
voici un exemple de règle CSS :
h1 {
color: blue;
}
Une règle CSS est constituée de 5 caractéristiques indispensables :
- le sélecteur
h1
- une parenthèse ouvrante
- la déclaration
color: blue
celle-ci se compose elle aussi en 2(deux) parties
- une propriété
color
- une valeur
blue
- une propriété
- fin de la déclaration
point virgule ;
- une parenthèse fermante
Soit pour faire simple et clair, le modèle d’une règle CSS est écrit comme
suit :
Sélecteur {
propriété n: valeur n;
propriété n: valeur n;
}
Nous allons commencer par un petit document HTML, sans style, nommé href="./cssexemple/exemple00.html">exemple00.html
Editer le avec votre éditeur de texte préféré :
- Linux / *nix
- vi, emacs, Jedit, Kwrite
...
- Windows
- HTML-Kit, Blocs Notes
...
- Mac OS
- ???
...
Vous devez voir ceci :
Les curieux et les attentifs ont sûrement déjà remarqué la présence de la
déclaration XML et de la DTD ;o), mais il y a autre chose et c’est cela qui
nous intéresse ici.
Compris dans l’élément head, on peut voir deux choses :
- la présence de l’élément
title
, les balises encadrent le
texte qui s’affiche dans la barre de menu du navigateur - la présence de la balise
title="" />l’élément link spécifie :
- le type de lien (rel="stylesheet") : vers une feuille de style
- la localisation de celle-ci (href="CSS/style01.css") : fichier
’style01.css’ dans le répertoire ’CSS’ - le type de la feuille de style liée (type="text/css")
- le choix du support de média (media="screen, projection") : il
existe d’autre média que nous verrons plus tard.
Le principal avantage à spécifier sa feuille de style externe avec
l’élémentlink
, est la souplesse d’utilisation, on peut
ainsi modifier plusieurs pages HTML sans en modifier la source.
Nous allons donc créer une feuille de style, je vous conseille pour
débuter de télécharger un éditeur de CSS, comme tout logiciel ce choix vous
appartient :
- Linux
- cssed, un
éditeur de css en phase de développement mais très prometteur (version
0.2.1)c’est le seul éditeur de CSS sous GNU/Linux à ma connaissance, mais
je peux me tromper donc si vous en connaissez un autre pour Linux,
dites le moi ^_^. - Windows
- Top Style lite
3.10, un éditeur gratuit et vraiment efficace de chez Bradbury
Software.Il existe d’autres éditeurs pour Windows mais je trouve que celui
-ci est le plus simple.
Un bref tutoriel à CSS2
Commençons par créer le fichier CSS, nommons le : style01.css
Pour styler la page HTML, le sélecteur CSS doit appeler l’élément HTML,
c.a.d. :
Dans l’exemple de la page HTML exemple.html,
En HTML :
Fichier d’exemple
En CSS :
h1 {
color: red;
border-bottom: thin solid Navy;
}
Dans cette exemple, le et/ou les attributs h1
seront de
couleur rouge (color : Red ;) et aurons une bordure fine entière Bleu marine
(border-bottom : thin solid Navy ;)
Stylons notre page HTML
Il n’existe pas de régle ou de norme pour l’organisation d’une feuille de
style, par habitude et aussi dans le soucis de pouvoir me relire plus tard,
je fais mes feuilles selon un schéma simple :
Exemple d’une feuille de style :
/*
* @ nom : style01.css
* @ site : http://www.monsite.fr
* @ auteur : marc Poiroud
* @ contact : marciun@free.fr
* @ licence : Creative Commons
* date de création : juillet 2004
* date de MAJ : 2004-07-27
*/
/*style des éléments */
html, body {}
h1, h2, h3, hn {}
p {}
a {}
a:hover {}
...
/*style de l'entete*/
.class p {}
...
/*style colonne droite*/
.classtruc h5 {}
...
/*style cadre article*/
#idmachin {}
...
/*pied de page*/
.pied a {}
...
Pour allez plus loin dans la réalisation de feuille de style, je joins 2 sites qui permetterons à tous de mieux maîtriser la rédaction d’une feuille de style
- CSS débutants
- Un site d’une trés grande qualité pédagogique, bien fait, clair, bref LE site pour bien commencer en douceur ...
- OpenWeb
- Ce site est LA seul référence à avoir en tête pour faire un site conforme aux standards du web. Écris par des grands noms du web francophone, il est indispensable de le connaître.
Fichier attaché | Taille |
---|---|
DTD01.png | 84.33 Ko |
source02.png | 113.46 Ko |
source03.png | 42.45 Ko |
Commentaires
> Editer des CSS avec Mac OS X
Bonjour,
Parmi les éditeurs de texte utilisables sous Mac OS X on peut citer :
vi, emacs, pico
TextEdit, SubEthaEdit (mon préféré)
Voilà.