Cours Pratique XHTML Css

Formation Pratique au Découpage CSS/XHTML
1. Théorie
HTML et CSS : Standards Web
Avant les CSS, le manque de contrôle graphique du HTML a conduit les graphistes à
détourner le langage, exemple: l'utilisation de tableaux et d'images transparents pour
servir de grille de mise en page.
Les avantages des standards :
- Développement et maintenance simplifiés : les CSS peuvent être regroupées dans

un fichier externe et appliquées à l'ensemble des pages HTML d'un site. Une
modification sur l'ensemble du site peut se faire par la modification d'un seul fichier.
- Compatibilité avec les futurs navigateurs Web
- Meilleure accessibilité
- Meilleur positionnement dans les moteurs de recherche
- Adaptation simplifiée
En savoir plus :
http://developpeur.journaldunet.com/dossiers/standards-web.shtml
http://openweb.eu.org/articles/pourquoi_standards/
http://www.cybercodeur.net/weblog/presentations/dwws/index.html
1
Validation
On appelle " validation " le processus consistant à contrôler que le document obéit
aux règles du langage (HTML) qu'il utilise.
La validation est une étape importante du développement Web. Beaucoup d'erreurs

difficiles à déceler apparaissent lors de cette phase. Celles-ci peuvent être aussi
triviales qu'une faute de frappe ou, au contraire, contenir une syntaxe de balise ou
d'attribut invalide.
Il n'y a que des avantages à valider son HTML et sa CSS.
(X)HTML : Validateur de code (X)HTML du W3C

http://validator.w3.org/
CSS : Validateur de code CSS du W3C

http://jigsaw.w3.org/css-validator/validator-uri.html
HTML et XHTML
le XHTML est une reformulation du HTML avec une syntaxe XML : Doctype, balises
fermées, attributs entre guillemets, minuscules...
Cascading Styles Sheet
Conçues pour gérer l'aspect visuel des documents internet (HTML et XHTML servent à
décrire la structure d'un document).
Le concept de feuille de styles vient de l'impression : définition de "styles"
typographiques réutilisables dans un but de cohérence et de productivité. Les feuilles
de styles internet ont en plus l'avantage de séparer l'aspect graphique de l'aspect
données dans une page HTML, ce qui a des répercussions en terme d'accessibilité,
d'exploitation et d'échange de données.
2
Appliquer des styles CSS à une page HTML
Styles En Ligne
Les styles sont écrits à l'intérieur des balises HTML à l'aide de l'attribut style.
En général cette méthode est à éviter car elle mélange les CSS au code HTML,
présentation et données. Cependant, dans le contexte K-Sup, où la mise en page des
page libres est paramétrable par l'utilisateur, elle se révèle indispensable. En effet, la
largeur des paragraphes, une caractéristique visuelle, n'est connue qu'au moment où
la page JSP est interprétée par le serveur.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<title>Exemple</title>
</head>
<body>
<p style="width: 50%; color:red;">Ceci est un paragraphe moitié moins large
que la fenetre du navigateur</p>
</body>
</html>
3
Styles Internes
Les styles se trouvent dans la section <head> de la page HTML
Cette méthode permet d'éviter la redondance des styles en-ligne, mais ne permet pas
de factoriser des styles pour plusieurs pages.
Elle peut-être pratique en phase de conception, pour éviter des aller-retours entre
fichiers CSS et HTML.

<head>
<style type="text/css">
p { color:red; }
</style>
</head>
<body>
<p>Ceci est un paragraphe</p>
</body>
</html>
4
Styles Externes
Les styles se trouvent dans un fichier texte externe avec l'extension .css. La page
HTML pointe vers ce fichier CSS dans la section <head>.
C'est la meilleure méthode, elle permet de factoriser les styles pour l'ensemble d'un
site.
exemple:
fichier CSS :
p { color:red; }
page HTML :
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Ceci est un paragraphe</p>
</body>
</html>
href="styles.css" le chemin vers le fichier CSS peut être indiqué de façon relative
(comme ici) ou de façon absolue ( href="/jsp/css/styles.css" ). Si ce chemin est
erroné, le navigateur n'appliquera pas les styles.
Note
Le serveur web installé avec K-Sup effectue une re-écriture d'URL pour des raisons de
référencement. Par conséquent, lors de découpes K-Sup, tous les chemins doivent
être absolu (la racine est le répertoire de l'application).
ex:
<link rel="stylesheet" type="text/css" href="/jsp/css/styles.css">
ou
#colonne-verte { background-image: url(/images/col-verte.gif); }
Commentaires
A l'intérieur d'une feuille de style (dans un fichier .css ou entre des balises <style>)
un commentaire commence par /* et finit par */.
5
p { color:red; } /* ceci est un commentaire */
Sélecteurs, Propriétés et Valeurs
En HTML on a des balises, en CSS on a des Sélecteurs.

Les sélecteurs indiquent à quel élément HTML on attribue des styles.
body {
color: navy;
font-size: 2em;
}
Chaque sélecteur (ex : body) est suivi d'une liste de propriétés (ex : color, font-size...
) entre accolades { ... }
Chaque propriété est suivie de ' : ', d'une valeur (ex : navy, 0.8em... ) et d'un ' ; '
Quand cette portion de CSS est ajoutée à une page, le text se trouvant dans le
<body> ( tout le contenu de la page) aura la taille 0.8 em et sera bleu marine.
Unités et Pourcentages
Il y a beaucoup d'unités spécifiques utilisées en CSS, les plus utilisées sont :
'em' (font-size: 2em) unité typographique relative (largeur d'un M majuscule pour
une taille de police donnée). Correspond approximativement à la hauteur d'un
caractère. En général la taille de police par défaut des navigateurs est 12px, donc
font-size:2em; nous donnera des caractères de 24 px de haut.
'px' (font-size: 12px) pixel. Unité réservé aux écrans (Attention dans IE
l'utilisation de cette unité pour les tailles de police empêche l'utilisateur de
zoomer son texte)
'pt' (font-size: 12pt) unité typographique fixe ... utile pour les feuilles de styles
d'impression (10pt est une taille courante)
'%' (font-size: 80%) pourcentage... dans le cas présent 80% de la taille de police
l'élément parent (qui contient l'élémént stylé)
Note
Les unités doivent suivrent les valeurs sans espace, quand une valeur est nulle il est
inutile de spécifier l'unité ( ex: border: 0; )
Couleurs
Les CSS permettent d'utiliser 16,777,216 couleurs différentes. Elles peuvent être
spécifiées de façon différente :
en utilisant un nom parmi les 16 pré-définies : aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, et yellow.
6
transparent est une valeur valide
p { color:red; }
en utilisant 3 composantes Rouge, Vert, Bleue dont les valeurs sont comprises entre 0
et 255
p { color:rgb(255,0,0); }
p { color:rgb(100%,0,0); }
en utilisant un code hexadécimal commençant par #. L'écriture compressée #123

peut remplacer #112233
p { color:#ff0000; }
p { color:#f00; }
Les couleurs sont appliquées par l'intermédiaire des propriétés color (pour le texte)
et background-color.
Attention c'est l'orthographe américaine 'color' et pas anglaise 'colour'.
par exemple un titre bleu sur un fond jaune s'écrit ainsi :
h1 {
color: yellow;
background-color: blue;
}
On peut utiliser ces propriétés sur la plupart des éléments HTML, par exemple :
body { color: red; } spécifie la couleur rouge pour l'ensemble du texte de la

page.
Texte
La taille et la forme du texte d'une page peuvent être modifiées par l'intermédiaire
des propriétés suivantes :
font-family
Cette propriété spécifie le nom de la police à utiliser. Cette police doit se trouver sur
la machine de l'utilisateur pour qu'elle puisse être utilisée.
Les polices les plus répandues sont Arial, Verdana, Helvetica en sans-serif, Times New
Roman en serif et Courrier en monospaced.
Il est possible de fournir une liste de polices alternatives sur lesquelles le navigateur
se rabattera en cas de besoin.
Il existe des noms de famille générique comme serif, sans-serif, monospaced qui
indique au navigateur dans quelle famille de police il doit choisir, si aucune des polices
spécifiées n'a été trouvée.
7
body { font-family: "lucida grande", arial, helvetica, sans-serif; }
utilise "lucida grande", sinon utilise arial, sinon utilise helvetica, sinon utilise une
police sans-serif
font-size
La taille de la police en px, en em ou en %. Attention à ne pas utiliser une balise <p>

avec une police de grande taille à la place d'une balise titre h1, h2 , etc...
(sémantiquement ce n'est pas pareil)
font-weight
spécifie la graisse de la police.
p { font-weight: bold; }
font-style
spécifie si une police est italique ou non.
p { font-style: italic; }
text-decoration
spécifie le type de soulignage d'une section de texte ; valeurs possibles : overline,

underline, line-through, none
La valeur underline devrait être réservée aux liens hypertextes car les utilisateurs
s'attendent a ce qui est souligné soit un lien.
p { text-decoration: overline; }
text-transform
Cette propriété contrôle la casse du texte ; valeurs possibles : capitalize, uppercase,

lowercase, none
capitalize : première lettre en majuscule

uppercase : tout en majuscule
lowercase : tout en minuscule
none : pas de transformation
Espacement Texte
La propriété line-height spécifie l'interlignage ou la hauteur de l'espacement entre les

lignes ; valeurs possibles : normal, un pourcentage ou une valeur numérique.
La propriété text-align contrôle l'alignement du texte à l'intérieur d'un bloc ; valeurs

possibles : left, right, center et justify.
8
La propriété text-indent indente la première ligne d'un paragraphe ; valeurs possibles
: valeur numérique.
p{
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5em;
text-align: center;
}
Marge et Espacement
Marge (margin) et Espacement (padding) sont les deux propriétés les plus utilisées
pour contrôler l'espacement des éléments HTML.
Une marge c'est de l'espace extérieur à l'élément, un padding c'est de l'espace

intérieur à l'élément.
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
Chacun des quatres côtés de l'élément peuvent être contrôlés individuellement en

utilisant les propriétés suivantes : margin-top, margin-right, margin-bottom, margin-
left, padding-top, padding-right, padding-bottom et padding-left.
Le modèle de boite
mod-css.png ¨
en savoir plus : http://openweb.eu.org/articles/dimensions_boites_css/
Bordures
La propriété border-style spécifie le style graphique de la bordure ; valeurs possibles :

solid, dotted, dashed, double, groove, ridge, inset et outset.
La propriété border-width indique l'épaisseur de la bordure ; valeur généralement en

pixels.
La propriété border-color spécifie la couleur.
Exemple :
h2 {
border-style: dashed;
9
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
10
Classes et Sélecteurs d'ID
Jusqu'ici nous avons seulement parlé de sélecteurs HTML -- comme BODY, H1 ou P
Vous pouvez aussi définir vo propres sélecteurs sous la forme de classes ou d'Ids.
Leur intérêt est de différencier des éléments HTML de nature identique -- par exemple
avoir deux paragraphes graphiquement différents.
En CSS, un sélecteur de classe est un nom précédé d'un point (.) et un sélecteur d'id
est un nom précédé d'un dièse (#).
Le nom doit commencer par une lettre et peut comprendre lettres, chiffres, tiret et
tiret-bas. Les majuscules et les minuscules sont autorisées ( puisqu'en XHTML tout est
en minuscule, j'utilise toujours des minuscules )
Exemple :
#top {
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
L'HTML se réfère aux CSS avec l'utilisation des attributs 'id' et 'class' :
<div id="top">
<h1>Les Classes et les IDs</h1>
<p class="intro">Ceci est un paragraphe de classe intro</p>
<p class="intro">Voici un autre paragraphe de classe intro</p>
</div>
La différence entre un id et une classe, c'est qu'un id ne peut être utilisé pour
identifier qu'un seul élément, tandis qu'une classe peut être utilisée pour plusieurs
éléments.
en savoir plus : http://developpeur.journaldunet.com/tutoriel/css/040407-css-

difference-id-class.shtml
Regroupement et Hiérarchie
11
Regroupement
On peut donner les mêmes propriétés à un groupe de sélecteurs sans avoir à les
répéter en séparant les sélecteurs par des virgules
Exemple, au lieu de :
h2 { color: red; }
.uneClasse { color: red; }
.uneAutreClasse { color: red; }
on peut écrire :
h2, .uneClasse, .uneAutreClasse { color: red; }
Hiérarchie
Vous pouvez réduire le nombre de sélecteurs de classe ou d'id que vous utilisez. On
peut sélectionner un élément à partir de son (élément) parent :
#top {
padding: 1em
}
#top h1 { color: #ff0; }
#top p { color: red; font-weight: bold; }
Ces CSS rendent superflue l'utilisation de classes ou d'ids supplémentaires lorsqu'elles

sont appliquées à l'HTML qui suit :
<div id="top">
<h1>Trop de Classes !</h1>
<p>On peut reduire le nombre de classes et d'Ids utilises</p>
<p>ce qui facilite la maintenance</p>
</div>
En séparant les sélecteurs par des espaces :

#top h1 on dit : "le titre h1 situé dans l'élément ayant pour id, top"
#top p on dit : "le paragraphe situé dans l'élément ayant pour id : top"
Pseudo Classes
Les pseudo classes dénotent l'état particulier d'un sélecteur.

Elles s'écrivent sous la forme sélecteur:pseudo-classe { propriété: valeur; }
12
Beaucoup des pseudo classes définies dans la norme CSS ne sont pas supportées par
tous les navigateurs, cependant
il en existent quatre qui peuvent être utilisées avec les liens hypertextes.
:link pour un lien non visité

:visited pour un lien visité
:hover pour un lien se trouvant sous le curseur
:focus pour un lien sélectionné avec le clavier (accessibilité)
:active pour un lien que l'on clique (peu utilisé)
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
a:active {
color: red;
}
Notes
Il est important de respecter l'ordre des déclarations ci-dessus si on veut éviter des
conflits de classe.
Petit truc : LoVe / HAte pour Link - Visited - Hover - Active
S'il est possible de choisir de ne pas différencier l'état visité des liens hypertextes en
CSS, il faut savoir que c'est une bonne idée de le faire, c'est un plus ergonomique.
La norme CSS prévoit l'utilisation de la pseudo classe :hover sur d'autres éléments
que des liens. Malheureusement Internet Explorer ne supporte pas cette technique.
Pseudo Eléments
Comme les pseudo classes un pseudo élément est s'écrit attaché à l'élément auquel il
s'applique :
sélecteur:pseudo-élément { propriété: valeur; }
13
First letters et First line
The first-letter pseudo element applies to the first letter of an element and first-line to
the top line of an element. You could, for examples create drop caps and a bold first-
line for paragraphs like this:
Le pseudo élément first-letter désigne la première lettre d'un élément. first-line

désigne la première ligne d'un élément. On peut les utiliser pour créer des lettrines
par exemple.
p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}
Before and after
Les pseudos éléments :before et :after sont utilisés en conjonction avec la propriété
content pour générer du contenu avant ou après un élément sans toucher au code
HTML.
La valeur de la propriété content peut être open-quote, close-quote, des caractères

entre guillemets ou une image url(chemin/vers/image).
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "-> "
}
p:before {
content: url(images/jam.jpg)
}
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
}
Note
Malheureusement IE ne supporte pas les pseudo sélecteurs :before et :after !
14
Cascade
Par cascading dans Cascading Styles Sheet on entend le résultat du cumul de

différents styles appliqués à un même élément. Si les propriétes sont différentes, elles
sont cumulées. En cas de propriétés identiques c'est la dernière valeur de la propriété
qui est prise en compte.
Exemple:
p { color: red; }
p { color: green; }
p { color:blue; }
<p>De quelle couleur suis-je ?</p>
Spécificité
La cascade nous dit ce qu'il se passe lorsqu'on associe plusieurs styles à un sélecteur
identique, mais que se passe-t-il lorsque plusieurs sélecteurs ciblent des éléments
communs et définissent des propriétés communes? Quelle propriété est appliquée ?
Exemple:
p { color: red; }
body p { color:yellow; }
.blue { color:blue; }
p.green { color: green; }
#purple { color:purple; }
<p>De quelle couleur suis-je ?</p>
Pour régler ce genre de conflit, on se réfère au concept de spécificité : chaque

sélecteur a une priorité différente ; plus il est spécifique, plus sa priorité est grande.
Pour résoudre l'éventail des différents scénarios,chaque grand type de sélecteur est
pondéré en fonction de sa spécificité :
Note
Attention, les problêmes de styles qui "n'apparaissent pas" dus à des conflits de
spécificité sont monnaie courante.
Ce n'est pas toujours évident.
Exemple:
.conteneur a { color:red; }
.vert { color:green; }
<div class="conteneur">
15
<a href="#" class="vert">de quelle couleur suis-je?</a>
</div>
Ecriture Condensée
Some CSS properties allow a string of values, replacing the need for a number of
properties. These are represented by values separated by spaces.
Certaines propriétés CSS permettent l'utilisation d'un groupe de valeurs séparées par
des espaces pour remplacer un groupe de propriétés :
Exemple :
p{
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
peut s'écrire :
p { border-width: 1px 5px 10px 20px; }
border-width, border-color et border-style peuvent aussi être condensé avec la seule

propriété border :
p { border: 1px red solid; }
Lorsqu'il existe une symétrie dans le groupe de valeurs, l'écriture peut encore être
condensée :
p { margin: 1em 0 1em 0; }
peut s'écrire :
p { margin: 1em 0; }
Les propriétés relatives à une police peuvent être rassemblées sous la propriété font :
p{
font-style: italic;
font-weight: bold;
font: italic bold 1em/1.5 courier;
font-size: 1em;
line-height: 1.5;
font-family: courier;
}
16
peut s'écrire :
p{
font: italic bold 1em/1.5 courier;
}
Images de Fond
Il y a plusieurs propriétés qui régissent les images de fond (des images de fond
d'élément HTML par opposition à l'élémént HTML <img>)
Ces propriétés peuvent être condensées avec la propriété background :
div.bgd {
background: white url(images/bg.gif) no-repeat top right;
}
Elle regroupe les propriétés suivantes :
background-color couleur de fond

background-image chemin vers le fichier image
background-repeat la façon dont l'image se répète ; valeurs possibles :
repeat (répétition horizontale et verticale), repeat-y (répétition verticale), repeat-x
(répétition horizontale) et no-repeat (l'image n'est pas répétée).
background-position position horizontale et verticale de l'image vis à vis de
l'élément ; valeurs possibles top, center, bottom, left, right ou deux valeurs
Les images de fond sont très utiles pour les éléments décoratifs d'une charte (comme
les arrondis d'une boite) par opposition au contenu visuel du site (vignette d'un
article...). Utiliser des images de fond avec des CSS permet de simplifier le fichier
HTML.
Note
Attention ! Une image utilisée dans une feuille de styles externe, doit être référencée
par rapport à la feuille de styles) et non pas par rapport au fichier .html (ou .jsp dans
K-Sup)
Note
Les images de fond ne s'impriment pas.
Propriété Display
Chaque élément HTML comprend un certain nombre de propriétés récurrentes ayant

une valeur par défaut comme les marges, les espacements ... et la propriété display.
Cette propriété définit plusieurs types d'élément auxquels est liée une représentation
17
graphique particuliére :
Les 3 types principaux que nous allons voir sont : inline, block et none.
inline Les éléments avec display: inline sont formatés le long d'une ligne, si la
largeur n'est pas suffisante ils continuent sur la ligne suivante. Les éléménts <a>,
<strong>, <i> etc... sont par défaut de type inline.
block Les éléments avec display: block sont précédés et suivis d'un retour à la
ligne. Les éléments <h1>, <h2> ... <h6> et <p> sont par défaut de type block.
none Les éléments avec display: block ne sont pas représentés. Ca peut paraître
idiot mais il y a beaucoup de situations où c'est utile.
Exemple:
<h1>Titre</h1>
<p>Ceci est un chapeau qui se trouve sous le titre et présente brièvement l'article qui
suit</p>
si on y associe les CSS suivantes :
h1 {
display: inline;
}
#header p {
display: inline;
padding-left: 2em;
}
Le titre et le chapeau sont alignés. ex -->
La déclaration suivante pourrait être utilisée dans une feuille de styles d'impression
pour éviter d'imprimer la barre de navigation d'une page (dans l'idée de n'imprimer
que le contenu d'une page...)
#navigation {
display: none;
}
en savoir plus : http://pompage.net/pompe/impression/
Note
La différence entre display: none et visibility: hidden est que un élément rendu
invisible avec visibility: hidden occupe la même place (vide dans ce cas) que lorsqu'il
est visible. Alors qu' un élément avec display: none disparait sans occuper d'espace
comme s'il était absent du code HTML.
ex -->
18
Tables
en savoir plus : http://pompage.net/pompe/autableau/
Note
Les tables HTML devrait idéalement être utilisée uniquement pour présenter des
donnés tabulaires.
Autres types display
list-item par défaut, c'est le type d'un élément <li>, en fait list-item s'apparente à
block mais il rajoute la notion de 'marker' (la puce d'un élément de liste).
19
Mise en Page CSS
Il faut commencer par identifier les blocs qui constituent le squelette de la page à
maquetter, le bandeau, le menu, les colonnes, le pied de page etc...
Il faut ensuite utiliser le bon mode de positionnement pour agencer ces différents
blocs.
Positionnement
La propriété position définit le mode de positionnement et peut prendre les valeurs

suivantes : absolute, relative, static ou fixed
La valeur par défaut est static. Les éléments ne sont pas positionné, leur position
dépend de l'ordre de leur apparition dans le code HTML.
relative est similaire à static, mais les éléments peuvent être déplacés relativement à
leur position d'origine à l'aide des propriétés top, right, bottom et left.
Ils laissent un trou là où ils auraient du être s'ils n'avaient pas été positionné.
ex -->
absolute sort un élément du flux HTML (ne prend pas de place et n'affecte pas les
éléments qui suivent) et le place dans un référentiel où il peut être positionné avec
les propriétés top, right, bottom et left. Par défault, ce référentiel a pour origine le
coin en haut à gauche de la page HTML
ex -->
tout élément (<div>, <p> etc...) dont la propriété position vaut absolute, fixed ou
relative, crée un nouveau référentiel pour les éléments positionné en absolu qu'il
contient.
ex -->
fixed est similaire à absolute, mais le référentiel est la fenêtre du navigateur et non
pas la page HTML, c'est a dire que l'élément reste théoriquement exactement où il se
trouve si on déplace la page avec un ascenceur (scrollbar). En théorie seulement car
si cette technique marche dans Mozilla ou Opéra, elle ne marche pas du tout dans IE.
Mise en page en absolu
On pourrait créer une page avec deux colonnes de contenu à l'aide de

positionnement absolu de la façon suivante :
<div id="menu">
<ul>
<li><a href="page1.html">option1</a></li>
</ul>
</div>
20
<div id="contenu">
<h1>Titre</h1>
<p>Lorem ipsum qualisque scribentur mea ne, quodsi aeterno vis an. Laudem
labitur an ius, eam no debet veniam eruditi. Delenit pericula splendide cum ei, an per
eros elaboraret, no vix partem senserit. Sea an eros possit</p>
<p>Sed an agam mazim oporteat, vim ex accusam mediocritatem. Ea nihil
sententiae mel, ad vel accusam offendit, sea at nobis mucius. Ei has malis luptatum
persecuti, ei dicta impedit tincidunt usu, enim voluptua ei quo. Ea sit utamur latine
imperdiet, mentitum repudiare quaerendum ius et.</p>
<p>Sed an agam mazim oporteat, vim ex accusam mediocritatem. Ea nihil
sententiae mel, ad vel accusam offendit, sea at nobis mucius. Ei has malis luptatum
persecuti, ei dicta impedit tincidunt usu, enim voluptua ei quo. Ea sit utamur latine
imperdiet, mentitum repudiare quaerendum ius et.</p>
</div>
avec les CSS:
#menu {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
#contenu {
margin-left: 200px;
}
Le menu est positionné en absolu en haut à gauche de la page avec une largeur de
200 pixels.
La colonne de contenu principal a une marge gauche de 200 pixels, pour faire de la
place au menu. Si cette marge gauche a une valeur inférieure, on constate que le
menu chevauche le contenu principal sans interférence, ils ne sont pas au même
étage !
Simple non ? Un autre avantage est l'indépendance total de l'ordre des éléments dans
le code HTML avec le rendu graphique. C'est utile pour placer la zone de contenu en
premier dans le source pour les utilisateurs de lecteurs d'écrans.
ex -->
On peut ajouter une troisième colonne comme ceci :
#menu {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
21
#encadres {
position: absolute;
top: 0;
right: 0;
width: 200px;
}
#contenu {
margin: 0 200px; /* marges haut et basse à zéro, marges gauche et droite à
200px */
}
Le problème majeur de l'utilisation d'éléments positionnés en absolu c'est qu'ils ne

sont plus dans le flux, ils existent dans leur bulle. Il devient très dur de les faire
cohabiter dans une page dynamique (c'est à dire dont le contenu et les dimensions
peuvent varier).
Exemple : si on reprend notre exemple précédent et qu'on ajoute un pied de page, on

voit que si l'une des colonnes positionnée est plus grande que la colonne centrale
le pied de page est recouvert...
Pourquoi ? Parce que le pied de page se trouve dans le flux après la colonne centrale.
Sa position dépend de la hauteur de celle-ci, pas des colonnes positionées.
Si on veut utiliser des colonnes tout en gardant une certaine flexibilité, avec un pied
de page par exemple, il faut utiliser des flottants.
Flotter et Flottants
Flotter un élément le déporte sur la gauche ou la droite aussi loin que possible ( les
limites du bloc parent ou d'un autre flottant ) ; le contenu environnant lui fait de la
place.
Le type display d'un élément flotté devient block .
Si on reprend notre example précédent et qu'on change les CSS par :
#menu {
float: left;
width: 200px;
}
#navigation2 {
float: right;
width: 200px;
}
#content {
margin: 0 200px;
}
22
On remarque que les flottants doivent précéder la colonne centrale dans le code HTML
pour que les colonnes soient alignées.
Pour forcer un élément à apparaitre en dessous d'un flottant il faut utiliser la propriéte
clear.
clear : left pour un flottant gauche, clear : right pour un flottant droit, clear both pour
les deux types de flottants.
donc si on ajoute:
#footer {
clear: both;
}
Et voilà! Un pied de page qui apparaitra toujours en dessous de la colonne la plus

longue.
@import
Importer
@import permet d'importer des styles CSS dans une page HTML comme <link> :
<style type="text/css" media="all">

@import url(monkey.css);
</style>
@import permet aussi d'importer des styles dans un fichier CSS externe (dans ce cas
là, @import doit être placé au début du fichier)
L'intérêt de cette méthode est que les anciens navigateurs (et notamment le plus
utilisé d'entre eux Netscape 4.x) ne comprennent pas cette directive et ne chargeront
pas les styles. On peut ainsi fournir un contenu non stylé aux vieux navigateurs et les
styles graphiques aux navigateurs modernes sans détection javascript.
Types de média
la directive @media sélectionne le type de média auquel on destine les CSS.
Exemple:
@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
23
}
}
Note
On peut aussi écrire <link rel="stylesheet" type="text/css" href="impression.css"

media="print" />
Les différents types de média sont :
all - tous (défaut si rien n'est spécifié)

aural - lecteurs d'écran
handheld - PDA
print - imprimante
projection - (rétro)projecteurs.
screen - écrans d'ordinateur.
Note
Les seuls types supportés par IE sont : all, screen et print.
24
2. Méthodologie
2.1 Outils et Navigateurs
J'utilise Firefox lors de la phase de conception à cause du très bon support CSS des
navigateurs Mozilla et du nombre d'outils gratuits disponibles pour ce navigateur (les
extensions : https://addons.update.mozilla.org/).
Il existe une extension indispensable qui s'appelle "Web Developer", disponible ici :
http://www.chrispederick.com/work/firefox/webdeveloper/
parmi les fonctions les plus intéressantes :
- désactiver/activer les CSS
- indiquer quels images n 'ont pas d'attribut ALT
- afficher les IDs et les Classes
- affichage des blocs
- validation en ligne et locale du (X)HTML et des CSS
Une fois que la page est découpé, je teste sous IE6 (notre cible principale) et d'autres
navigateurs ( IE 5.0 et IE 5.5, IE Mac, Safari, Netscape )
Des packages de IE 5.0 et IE 5.5 pour PC sont téléchargeables à :

http://www.skyzyx.com/downloads/
Ils rendent possible la coexistence des plusieurs versions de IE sur une même
machine
25
2.2 Découpe
Les éléments (X)HTML ont des styles par défaut (exemple un paragraphe <p> a une
marge haute et basse).
Ces styles peuvent varier d'un navigateur à l'autre. Je commence toujours ma
découpe en réinitialisant les styles par défaut, ce qui facilite grandement la phase de
conception, notamment lorsqu'on travaille avec des formulaires HTML.
On réinitialise les styles comme ceci:
/* Toutes les marges et remplissages sont mis à zéro */

/* sauf l'élément paragraphe <p> car la toolbox utilise cet élément */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,blockquote,fieldset,input { margin:0;
padding:0 }
/* on utilise les listes pour structurer nos menus - on élimine donc la puce */
ul,ol { list-style:none }
/* si on ne veut pas de bordure bleue sur les images-liens */

a img,:link img,:visited img { border:none }
2.3 Relier les CSS à l'(X)HTML

Ecriture recommandée :
<style type="text/css" media="screen" href="css/mise_en_page.css" />

<style type="text/css" media="screen" href="css/page_libre.css" />
<style type="text/css" media="print" href="css/impression.css" />
2.4 Hacks
En CSS, on appelle "hack" le fait d'exploiter un bug d'un navigateur (en général dans
l'interprétation des sélecteurs) pour corriger un autre bug (de rendu graphique).
Exemples de hacks utilisés pour IE:
- le sélecteur étoile hack
* html p { color: green; }
Seul IE (IE 5, IE 5.5, IE 6 et IE Mac) reconnait cet écriture, et il est donc le seul à
appliquer ce style.
- les commentaires conditionnels (une fonction propriétaire Microsoft) permet de

cibler la version d'IE à laquelle on délivre un bout de HTML
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
<!--[if IE] >

< link rel="stylesheet" href=" ie.css" media="screen" />
<![endif]-- >
Seul IE PC utilisera la feuille de syle ie.css

26
- Hack du modèle de boite (pour IE5.0 et IE5.5 PC)
* html p {
font-size: 75%; /* tous les IE voient ceci grace au sélecteur étoile hack*/
f\ont-size: 90%; /* IE 5.0 et Ie 5.5 ne voient pas cette ligne a cause de
l'antislash présent dans le nom de la propriete */
}
Exemples de hacks utilisés pour IE Mac :
- Antislash hack:
/* debut du hack : IE mac ne voit pas ce qui suit \*/

p { color : green; }
/* fin du hack */
autre utilisation possible, en combination avec le sélecteur étoile on peut écrire

des styles uniquement pour IE PC :
/* debut du hack \*/

* html p { color: green; }
/* fin du hack */
Seul IE PC affichera des paragraphes de couleur verte.
- filtre IE5 Mac :

<style type="text/css">
@import "css/layout.css";
@import "css/styles.css";
/*\*//*/
@import "css/iemac.css";
/**/
</style>
IE5 Mac est le seul navigateur à utiliser iemac.css
27
2.5 Bugs d'Internet Explorer
Pour les anglophones, Il existe une référence extraordinaire qui documente les bugs
des navigateurs PC ( principalement IE )
Le site s'appelle "Position is everything" : http://www.positioniseverything.net
Modèle de boite érroné (IE 5.0 et IE 5.5)
Texte inzoomable
Taille du texte incorrecte (IE 5.0 et IE 5.5)
Flottants à double marge
Modèle de flottant érroné
28
3 Références et Ressources
3.1 En Français
Traduction des recommendations techniques CSS1 et CSS2 :

http://www.yoyodesign.org/doc/w3c/css1/index.html
http://www.yoyodesign.org/doc/w3c/css2/cover.html
Les standards du web:

http://www.cybercodeur.net/weblog/presentations/dwws/index.html
http://developpeur.journaldunet.com/dossiers/standards-web.shtml
Liste des propriétés CSS :

http://dicolive.media-box.net/docCSS/css.php?orderByType=1
Accessibilité:
http://www.acces-pour-tous.net/
http://www.accessiweb.org/
http://openweb.eu.org/
Ressources et Techniques:
http://pompage.net/
http://openweb.eu.org/
http://www.opquast.com/
Validation:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator-uri.html
3.2 En Anglais
Techniques et astuces:
http://www.alistapart.com
http://css-discuss.incutio.com/
Bugs des navigateurs:

http://www.positioniseverything.net
Methodologie et tutoriels :
http://css.maxdesign.com.au/
29

Cours Pratique XHTML Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cours Pratique XHTML Css

Uploaded by

Copyright:

Available Formats

Formation Pratique au Découpage CSS/XHTML

HTML et CSS : Standards Web

Les avantages des standards :

- Développement et maintenance simplifiés : les CSS peuvent être regroupées dans

La validation est une étape importante du développement Web. Beaucoup d'erreurs

Il n'y a que des avantages à valider son HTML et sa CSS.

(X)HTML : Validateur de code (X)HTML du W3C

CSS : Validateur de code CSS du W3C

Cascading Styles Sheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Les styles se trouvent dans la section <head> de la page HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<link rel="stylesheet" type="text/css" href="styles.css">

<link rel="stylesheet" type="text/css" href="/jsp/css/styles.css">

#colonne-verte { background-image: url(/images/col-verte.gif); }

Sélecteurs, Propriétés et Valeurs

En HTML on a des balises, en CSS on a des Sélecteurs.

Il y a beaucoup d'unités spécifiques utilisées en CSS, les plus utilisées sont :

en utilisant un code hexadécimal commençant par #. L'écriture compressée #123

par exemple un titre bleu sur un fond jaune s'écrit ainsi :

body { color: red; } spécifie la couleur rouge pour l'ensemble du texte de la

La taille de la police en px, en em ou en %. Attention à ne pas utiliser une balise <p>

spécifie la graisse de la police.

spécifie si une police est italique ou non.

spécifie le type de soulignage d'une section de texte ; valeurs possibles : overline,

Cette propriété contrôle la casse du texte ; valeurs possibles : capitalize, uppercase,

capitalize : première lettre en majuscule

La propriété line-height spécifie l'interlignage ou la hauteur de l'espacement entre les

La propriété text-align contrôle l'alignement du texte à l'intérieur d'un bloc ; valeurs

Une marge c'est de l'espace extérieur à l'élément, un padding c'est de l'espace

Chacun des quatres côtés de l'élément peuvent être contrôlés individuellement en

en savoir plus : http://openweb.eu.org/articles/dimensions_boites_css/

La propriété border-style spécifie le style graphique de la bordure ; valeurs possibles :

La propriété border-width indique l'épaisseur de la bordure ; valeur généralement en

La propriété border-color spécifie la couleur.

Jusqu'ici nous avons seulement parlé de sélecteurs HTML -- comme BODY, H1 ou P

<h1>Les Classes et les IDs</h1>

<p class="intro">Ceci est un paragraphe de classe intro</p>

<p class="intro">Voici un autre paragraphe de classe intro</p>

en savoir plus : http://developpeur.journaldunet.com/tutoriel/css/040407-css-

.uneClasse { color: red; }

.uneAutreClasse { color: red; }

h2, .uneClasse, .uneAutreClasse { color: red; }

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold; }

Ces CSS rendent superflue l'utilisation de classes ou d'ids supplémentaires lorsqu'elles

En séparant les sélecteurs par des espaces :

Les pseudo classes dénotent l'état particulier d'un sélecteur.

:link pour un lien non visité

Le pseudo élément first-letter désigne la première lettre d'un élément. first-line

Before and after

La valeur de la propriété content peut être open-quote, close-quote, des caractères

Malheureusement IE ne supporte pas les pseudo sélecteurs :before et :after !

Par cascading dans Cascading Styles Sheet on entend le résultat du cumul de

<p>De quelle couleur suis-je ?</p>

<p>De quelle couleur suis-je ?</p>

Pour régler ce genre de conflit, on se réfère au concept de spécificité : chaque

p { border-width: 1px 5px 10px 20px; }

border-width, border-color et border-style peuvent aussi être condensé avec la seule

p { border: 1px red solid; }

p { margin: 1em 0 1em 0; }

Ces propriétés peuvent être condensées avec la propriété background :

Elle regroupe les propriétés suivantes :