Intégration graphique en XHTML / CSS

© Proxym-IT
http://twitter.com/proxymit
conforme aux standards W3C
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
Intégration graphique
en HTML et CSS
Département Web2.0
Préparer et animer par Mahmoud N’bet
INTÉGRATION GRAPHIQUE
EN XHTML ET
CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
(X)HTML
Présentation
Les normes du
XHTML
la sémantique
web
Le rendu par
défaut des
éléments HTML
CSS2
Définition
Les sélecteurs, Les
propriétés et les
valeurs
Bonnes pratiques
Cascade CSS et
priorité des sélecteurs
Trucs et astuces
Les Layouts

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Introduction
• La création des sites Internet
repose sur plusieurs composantes,
dont les plus importantes pour l'intégration
graphique sont :
– Une structure de page codée en "langage" compris par
les navigateurs internet : le HTML ou xHTML
– Une mise en forme des éléments graphiques (images,
blocs, fonds d'écran... ) : la feuille de style, ou CSS
– Une mise en page et un formatage (mots en gras,
soulignés, texte justifié… )

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
L’intégration graphique
• L'intégration graphique consiste à transposer un
support passif (une image, une idée, une
maquette graphique) qui doit être transposé sur
internet pour en faire un élément interactif (afin
de pouvoir cliquer sur les textes, faire défiler des
images, envoyer un
formulaire… ).

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Présentation de XHTML
• Le HTML à l’origine est un langage composé de balises
interprété par le navigateur.
• Au fil des ans, il s’est avéré que le HTML ne
corresponde pas à toutes les attentes des utilisateurs
en terme de modularité, de maintenance et de
présentation.
• D’où la création du XHTML (eXtended HyperText
Markup Language) en 2002, XHTML est un pont entre
deux technologies, il a repris l’essentiel de la syntaxe
du HTML en rajoutant les contraintes imposés par le
XML.

© Proxym-IT
Avantages et exigences du XHTML
 Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
à mettre à jour.
 Une séparation entre la contenu et sa présentation.
 Un standard qui peut être soumis à validation et permet de se décharger
des spécificités des différents navigateurs
 Il facilite la mise en place d’un web sémantique qui a pour objectif de
rendre accessible les informations d’une manière standard afin de faciliter
l’indexation des informations aussi bien aux humains qu’aux robots.
 Une préoccupation accrue par rapports aux jeux de caractères et à
l’internationalisation.
 Un langage plus rigoureux qui ne tolère pas les bidouillages.
 Le langage continue à évoluer et n’est pas figé

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Le document minimal XHTML
• Il est obligatoire de placer un minimum des
éléments dans chaque page XHTML. Ce qui donne
un document XHML minimal du type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> My Title </title>
<link type="text/css" rel="stylesheet" href="demo.css" />
</head>
<body>
…
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

© Proxym-IT
Règles de formatages des balises
• XHTML est strict sur les points suivants et ne tolère plus les
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
imprécisions du HTML.
1. Tous les balises sont en minuscules.
<a href=”ma-page.html”>correct</a>
<A HREF=”ma-page.html”>incorrect</A>
2. Tous les balises sont fermés. On utilise des tags auto-fermants pour les
éléments simple.
<li>Elément liste correct</li>
<li>Elément liste incorrect
<img src=”max” alt=”une image correcte” />
un retour chariot: <br />
3. Emboîter les balises
<a><b><c>correct</c></b></a>
<a><b><c>incorrect</a></b></c>

© Proxym-IT
<a href="http://www.site.com/script.html?d=1&v=val">Lien correct</a>
<a href="http://www.site.com/script.html?d=1&v=val">Lien incorrect</a>
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
D’autres contraintes XHTML
<img src=”max” alt=”une image correcte” />
<img src=”max” alt=incorrecte />
<balise attribut=" valeur de l'attribut " />

<balise attribut="valeur de l'attribut" />
<option sected="selected">correct</option>
<option selected>incorrect</option>

alt="Une image de mon album"

alt="Une image
de mon album"

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Encore des règles pour être
compatible
• Et en plus, XHTML interdit l'inclusion de certains
éléments dans d'autres:
1. <a> ne peut contenir d'autres éléments <a>
2. <pre> ne peut contenir les éléments <big>, <img>,
<object>, <small>, <sub> ou <sup>
3. <button> ne peut contenir les éléments <button>,
<form>, <fieldset>, <iframe>, <input>, <isindex>,
<label>, <select> ou <textarea>
4. <label> ne peut contenir d'autres éléments <label>
5. <form> ne peut contenir d'autre éléments <form>
6. Un élément de nature « inline » <a>, <span>, <em> …
ne peut contenir d'autres éléments de nature « block »
<div>, <p> …

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
la sémantique web
• Le langage HTML définit la
structure d’une page à l'aide des
éléments (les balises) porteurs de
sens (la sémantique).
• La sémantique web, on peut la
considérer comme le sens des
balises.
elle permet d'étudier leur rôle
dans le code en ne considérant en
aucun moment l'effet d'une balise
sur l'affichage.
<h1>Important</h1>
<hr />
<h4>Moins important</h4>
<p>contenu d'une <strpng>paragraphe</strpng></p>
<div>Bloc</div>
Important <h1>
Moins important
Paragraphe <p>
Bloc <div>

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
la sémantique web
• <p> : définit un paragraphe ou des images.
• <h1..6> : définit des titres de moins en moins importants
dans l'organisation du document.
• <ul> et <li> : définit une liste non ordonnée.
• <ol> et <li> : définit une liste ordonnée.
• <strong> : définit une forte expression sur un ou des mots.
• <em> : définit une insistance moyenne sur un ou des mots.
• <q> : définit une courte citation dans un paragraphe.
• <blockquote> : définit une longue citation.
• <cite> : désigne l'auteur d'une citation ou une référence vers une autre source.
• < abbr> : définir une forme abrégée.
• <sup> et <sub> : servent respectivement à mettre en exposant et en indice.
• <code> : indique un fragment de code informatique.
Vous pouvez également voir la spécification HTML sur le site de W3C.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
la sémantique web
Web 1.0
Web
statique
Web 2.0
Web
intelligent
Web 3.0
Web
sémantique

© Proxym-IT
Le rendu par défaut des éléments XHTML
• même lorsqu'aucun style
Important <h1>
Moins important
Paragraphe <p>
Bloc <div>
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
CSS n'est défini, chaque
élément hérite d'un
affichage par défaut (rendu
initial) qui peut être
légèrement différent d'un
navigateur à un autre.
• Pour un langage comme
HTML, chaque élément a
un comportement bien
défini. <h1>Important</h1>
<hr />
<h4>Moins important</h4>
<p>contenu d'une <strong>paragraphe</strong></p>
<div>Bloc</div>

© Proxym-IT
Le rendu par défaut des éléments
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
HTML
• Dans un monde idéal de compatibilité, tous les
navigateurs et agents-utilisateurs appliqueraient sur les
éléments HTML des feuilles de styles CSS initiales
recommandées par le W3C.
p{
display: block;
margin: 1em 0;
h1 { }
display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}
Voici un extrait de la feuille de
style par défaut appliquée par
Firefox sur les éléments
HTML :
body{
display: block;
margin: 8px;
}

© Proxym-IT
Le rendu par défaut : Le «display»
• La propriété CSS « display » définit le type de
rendu de boîte à utiliser pour un élément donné.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
• html, body, h1, h2..h6, p, div { display: block; }
• head { display: none; }
• span, a, strong, em { display: inline; }
• input, select { display: inline-block; }

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Le CSS
• CSS est un autre langage qui vient compléter
le HTML. Son rôle est de mettre en forme vos
pages web.
On peut écrire du code en langage CSS à trois
endroits différents :
1. Dans un fichier .css (recommandé)
2. Dans l'en-tête <head> du fichier HTML
3. Directement dans les balises (non recommandé)

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Définition
• Dans un code CSS comme celui-ci, on trouve trois
éléments différents :
• Les sélecteurs : on écrit les éléments dont on veut
modifier l'apparence.
• Les propriétés : les « effets de style » de la page sont
rangés dans des propriétés.
• Les valeurs : pour chaque propriété CSS, on doit
indiquer une valeur.
Syntaxe générale : sélecteur{
propriété : valeur ;
}
Déclaration : propriété + valeur
Règle : sélecteur + déclaration

© Proxym-IT
Les sélecteurs en CSS permettent de cibler précisément n'importe
quel élément d'une page. Il peut être un sélecteur d’élément, une
classe, un ID ou un sélecteur d’attribut.
<balise id="myId" class="myClass" attr="valeur" >
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les sélecteurs CSS
…
– balise : sélecteur d’élément
</balise>
– .myClass : Sélecteur de classe
– #myId : Sélecteur d’identifiant CSS
– balise.myClass, balise#myId
– * : sélecteur universel
– A B : une balise contenue dans une autre
– A > B : première balise fille contenue dans une autre
– A + B : une balise qui en suit une autre
– A[attr] : une balise qui possède un attribut nommé « attr »
balise, .myClass, #myId, [attr*="valeur"] {
/* declarations CSS */
}

© Proxym-IT
Les sélecteurs d’attribut ciblent un élément en utilisant la présence
d’un certain attribut ou de la valeur d’un attribut.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les sélecteurs CSS
– A[attr] : une balise qui possède un attribut nommé « attr ».
– A[attr="valeur"] : une balise avec un attribut et une valeur exacte
– A[attr*="leu"] : une balise avec un attribut et une valeur qui contient au moins une occurrence
de « leu » (l'attribut doit cette fois contenir dans sa valeur le mot « leu », [ peu importe sa
position ]).
– A[attr^="va"] : une balise avec un attribut et une valeur qui commence par « va ».
– A[attr$="eur"] : une balise avec un attribut et une valeur qui se termine par « eur ».
– A[attr~="val"] : une balise, un attribut avec des valeurs séparés par des espaces, l’une d’elle doit
être « val ».
– A[attr|="val"] : une balise avec un attribut et une valeur exacte « val » ou commence par « val »
suivi de « - » (Principalement pour les sous-code de langues. type « Fr-FR »).
– root : Représente l’élément HTML
<balise attr="valeur" >
…
</balise>

© Proxym-IT
Les sélecteurs CSS : Les pseudo-formats
Les pseudo-classes CSS:
Une pseudo-classe CSS est un mot-clé ajouté au sélecteur pour indiquer un état
particulier de l’élément qui doit être sélectionné.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
– :hover : cible un élément survolé
– :active : cible un élément activé par l’utilisateur (au moment du clic)
– :visited : cible un lien déjà visité par l’utilisateur
– :link : cible les liens non visités
– :focus : cible un élément pointé.
Souligner un élément <a> lors du
survole:
.myLink{
…
}
.myLink:hover{
text-decoration: underline;
}
Sélecteur:pseudo-classe{
}

© Proxym-IT
Les sélecteurs CSS : Les pseudo-formats
Les pseudo-élément CSS:
Comme les pseudo-classes, les pseudo-éléments sont ajoutés aux sélecteurs.
Au lieu de décrire un état spécial, ils permettent de cibler certaines parties du
document.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
– :before : utilisé pour insérer une partie du contenu avant que le contenu d'un élément.
– :after : utilisé pour insérer une partie du contenu après que le contenu d'un élément.
– :first-child : pour ajouter un style spécial au premier enfant de son parent.
– :last-child: pour ajouter un style spécial au dernière enfant de son parent.
– :first-line: pour ajouter un style spécial à la première ligne d'un texte.
– :first-letter : pour ajouter un style spécial à la première lettre d'un texte.
Exemple d’insérer une icône avant
le contenu d’un lien <a>:
.myLink{
…
}
.myLink:before{
content: url(smiley.png) ;
}
Sélecteur:pseudo-élément{
}

© Proxym-IT
.profilBox a.video{} .profilBox a.view {}
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Exemples .toolBar .nav{
…
}
#mainMenu li.active a{
color:#78BEA8;
background: … ;
}
.toolBar .nav li:last-child{
border-right: none;
}
.profilBox a{
color:#656565;
}
.profilBox a.marker{}
.profilBox a.edit{}
.profilBox p.desc:first-letter{}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Exemples
.composantItem h2{
margin: 0 0 18px;
}
.col-4{
width: 33.3333%;
}
.show-grid [class^="col-"] {
padding:5px;
margin-bottom:8px;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Exemples
Blockqute:before{
content: " ";
}
Blockqute:after{
content: " ";
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les propriétés CSS
Les boites :
• Width / height
• Margin
• Padding
• Background
• Border
– Border-style
– Border-color
– Border-width
• Text
– text-align
– text-indent
• line-height
• vertical-align
• overflow
• word-break
• Opacity
Les textes:
• Font
• font-family (fallback)
• font-size
• font-style
• font-wieght
• font-variant
• font-stretch
• Texte
• text-decoration
• text-transform
• text-shadow
• color
• letter-spacing
• outline
Texte...
Les positions:
• float
• clear
• Position : static | relative | absolute | fixed
• top
• right
• bottom
• left
• z-index
Divers
• Cursor
• Content
• quotes
margin
padding

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les boites
• Le modèle de boîte CSS définit les boîtes rectangulaires qui
sont générées pour les éléments de la structure HTML.
• Les boites ont quatre côtés : droit ("right"), gauche ("left"),
supérieur ("top") et inférieur ("bottom").
margin, padding, border-width: 1un 2un 3un 4un ;
border-color: #xxx #xxx #xxx #xxx ;

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les valeurs : Le mise en page
bacground-image : <image path> ;
background-repeat: no-repeat | repeat-x | repeat-y | repeat ;
background-attachment: fixed | scroll ;
background-position: x-pos, y-pos;
background-color: couleur ;
background: <image> <repeat> <attachment> <position> <color>;
border-style : style ;
border-width : taille ;
border-color : couleur ;
border: <width> <style> <color>;
position : static | relative | absolute | fixed;
top | right | bottom | left : position ;
z-index : nombre ;
.parent{
position: relative;
}
.child{
position:absolute; top: 12px; left: 20px;
}

© Proxym-IT
La propriété CSS font est un raccourci pour la définition de font-style, font-variant, font-weight,
font-size, line-height et font-family dans une seule règle dans la feuille de style.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les valeurs : Le mise en forme
• font-family : permet de spécifier le type de caractère qui doit être utilisé.
• font-size : permet de spécifier la taille de la police.
• line-height : détermine la hauteur des lignes au sein d'un élément.
• font-style : définir le style des caractères.
• font-stretch : définit la largeur du caractère dans une police.
• font-variant : permet d’afficher du texte en petites capitales.
font-style : italic | oblique | normal
font-wieght : normal | bold | bolder
font-variant : normal | small-caps
font-size : taille ;
Line-height : taille ;
font-family : font1, font2, … ; (Le fallback)
font: <style> <wieght> <width> <size>/<line-height> <family>;
Color : couleur ;
font-stretch : normal | condensed
letter-spacing : taille ;
word-spacing : taille ;
Ceci est un texte...

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les valeurs : Le mise en forme
font-wieght :
• normal
• bold
• bolder
• lighter
• 100 .. 900
font-stretch :
1. ultra-condensed
2. extra-condensed
3. semi-condensed
4. condensed
5. normal
6. Expanded
7. semi-expanded
8. extra-expanded
9. ultra-expanded

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les unités
• font-size / line-height / border-width : taille ;
Unités absolues:
 mm : Le millimètre
 cm : Le centimètre (1cm = 10 mm)
 in : Le pouce (en anglais « inch ») correspondant à 2,54 cm
 pt : Le point. Correspond à 1/72 in.
 pc : Le pica. Correspondant à 12 pt.
Unités relatives:
 em: Unité relative à la taille de police de l'élément, (1 em équivaut à 100% de cette taille).
Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la taille de la police de
l'élément parent.
 ex : Unité relative à la hauteur de la minuscule de l'élément
Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la hauteur de la minuscule
de l'élément parent.
 px : Le pixel. Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage.
 % : Le pourcentage est une unité relative à la taille de l'élément ou de son parent.
• color / border-color / background-colr : color ;
 Couleurs nommées: exemple : grey, red, green ….
 Couleurs en hexadecimal : exemple : #EDEDED, #FFAAAA, #CCC….
 Couleurs décomposées : rgb(128, 128, 128), rgb(123, 255, 255)….

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Cascade CSS et priorité des sélecteurs
1. La cascade CSS applique alors un poids à chaque
déclaration.
2. La spécificité des sélecteurs se calcule de cette manière:
On défini 3 nombre (A, B, C)
A. Nombre d’id dans le sélecteur
B. Nombre de classes, de pseudo-classes et d’attributs dans le sélecteur
C. Nombre d’éléments dans le sélecteur
3. Par exemple, prenons cette hiérarchie:
– « #toto » a une spécificité de 1,0,0
– « .inner ul li a » a une spécificité de 0,1,3
– « a:hover » a une spécificité de 0,1,1
.inner > ul > li > a#toto{ … }
#toto{ … }
.inner ul li a { … }
A:hover{ … }
[id=toto] est identique à #toto

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Cascade CSS et priorité des sélecteurs
Il existe 2 cas particuliers:
• La pseudo-classe :not() n’entre pas dans le calcul de
spécificité, mais son contenu oui. Ex: ul li:not(.class) a une
spécificité de 0,1,2 et non pas 0,2,2
• Les styles appliqués aux pseudo-éléments ne peuvent pas
êtres surclassés en modifiant les styles de l’élément lui-même.
Les styles d'un pseudo-élément ont donc la priorité
absolue.
En matière de spécificité, il existe également les styles inline (dans la balise HTML
via l’attribut style) qui surclassent tous les autres sélecteurs, et la
directive !important qui surclasse les styles inline.
Un style en ligne 1,0,0,0
Le « !important » 1,0,0,0,0
<ul style="padding: 0;">...</ul>
!important

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Bonne s pratiques
1. Rester organisé :
– Cela vous permettra de garder à l’oeil dans votre code.
– Toujours nommer les grandes zones de vos sites de la même manière.
2. Le format
– Le format de code choisi doit assurer: une bonne lisibilité :
3. Écrire les sélecteurs class et id sans noms d'éléments :
– pas de div#content{…}, p.details{…}, a.success
4. Préférez le tiret au souligné :
– Certains vieux navigateurs ont un peut mal avec les soulignés (underscore
« _ »), il est préférable d’utiliser un tiret « - » à la place.-
5. Ne pas nommer les classes CSS en fonction du rendu
visuel.
– Préfixer vos classes en fonction l’apparence de l’élément
(sélecteurs sémantiques) : Il est ainsi plus simple de se
retrouver dans l’HTML et dans le CSS.
6. Garder une sauvegarde de vos modèles :
– Une fois votre template considéré comme terminé, il peut être utile de
garder un sauvegarde comme modèle.
/* GLOBAL RESET */
* {
margin:0; padding:0;
}
a img{
border:none;
}
/* HTML GENERIQUE */
body {
font-family:"Lucida Sans",Verdana;
}
a:link, a:visited, a:active {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 { }
h1 a { }
h2 { }
/* ELEMENTS PRINCIPAUX DE MA PAGE */
#container{ … }
#header{ … }
#main{ … }
#aside{ … }
#footer{ … }
/* ELEMENTS SECONDAIRES */
#header .headerContent{ … }
#content .contentBloc{ … }
/* ELEMENTS DE FORMULAIRE*/
Label{ … }
input{…}
/* DIVERS */
.clear{ clear: both; }
/* Commentaire */
.selecteur-1,
.selecteur-2 {
display: block;
color: #333;
}
p { … }
.details { … }
.resume-blue { color: red; }
.resume{ color: red; }

© Proxym-IT
/* propriétés communes */
}
#shop .contentBlock {
/* propriétés spécifiques */
.contentBlock{
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Bonne s pratiques
5. Conventions de nommage :
– Préférer nommer vos classes et identifiants en
anglais
– utiliser des noms d’éléments génériques. Éviter
les nommages de type « .blocShop,
.addNewItemLink …. »
6. Éviter de se répéter => code plus court :
– Si 2 éléments ont les mêmes propriétés,
préférer les combinés.
– Toujours utiliser le rassemblement et les
raccourcis des éléments.
– Ne pas mettre de guillemets aux URL
6. Ne pas déclarer les valeurs héritées :
– Type : h1 {font-weight:bold; }
7. Appliquer bien l’avantage de la cascade:
– La cascade vous permet d'appliquer plusieurs
règles à un même élément.
8. Attribuer plusieurs noms de class:
– Vous pouvez attribuer plusieurs noms de class à
un même élément. Ce qui vous permet de
regrouper les règles qui définissent différentes
styles, et ensuite d'appliquer seulement celles
dont vous avez besoin.
h1, h2 {
margin: 1em 0.5em; font-size:1em; color: #2B8ADB;
}
/* Plutôt que*/
h1 {
}
h2 {
}
h1 {
margin-top: 5px;
margin-left:10px;
margin-right:10px;
margin-bottom:16px;
color: #336699;
border-width: 1px ;
border-style:solid;
border-color:#000;
}
/* Plutôt que*/
h1 {
margin: 5px 10px 16px;
color: #369;
border: 1px solid #000;
}
}
<li><a href="#" class="navLink myProfil"></a></li>
<li><a href="#" class="navLink sigout"></a></li>

© Proxym-IT
#subnav { /* Styles */ }
#subnav li { /* Styles */ }
#subnav li.subnavitem { /* Styles */ }
#subnav li a { /* Styles */ }
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Bonne s pratiques
10. Utiliser les sélecteurs
descendants
11. Ne jamais intégrer les images
liées au template comme des
balise <img />. Il faut
absolument les mettre en
background
12. Séparer les hacks spécifiques
navigateur.
13. Validez votre code avec le W3C.
<link href="style.css" rel="stylesheet">

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Trucs et astuces
Centrage Horizontalement
1. Élément bloc
– Pour centrer horizontalement un élément avec
CSS, vous devez spécifier la largeur de
l'élément, ainsi que ses marges horizontales.
2. Éléments hors du flux.
– Float:center ? N’existe pas : /
Généralement la question se pose lors de la
création d'un menu, une liste de liens.
3. Positionnement absolu.
#wrap{
width: 980px;
margin-left: auto;
margin-right: auto;
}
#wrapper{
/* masque les débordements et englobe le menu */
overflow: hidden;
}
#menu,#menu li {
/* float permet à l'élément de prendre la
largeur de son contenu */
float: left;
position: relative;
}
#menu {
/* on décale le menu vers la droite de la
moitié de la largeur disponible */
left: 50%;
}
#menu li {
/* on décale chaque item vers la gauche de la
moitié de la largeur du menu */
right: 50%;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Trucs et astuces
1. Arrêter les flottements.
– Un problème CSS très commun consiste
à savoir quoi faire pour empêcher qu'un
objet en flottement dans un conteneur
déborde la limite inférieure de ce
conteneur.
<div class="conteneur">
<div class="left"> … </div>
<div class="left"> … </div>
<div class="clear"></div>
</div>
 La manière traditionnelle de contrôler la situation consistait à ajouter un élément
de plus, soit un <div> ou un br, à la suite de l'élément en flottement et de le styler
avec « clear:both ».
 Une autre solution consiste à styler l’élément conteneur avec
« overflow:hidden », mais attention le « overflow:hidden »
permet de cacher tout ce qui dépasse.
 il existe une méthode plus économique en utilisant
le pseudo-format « :after ».
.clearfix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* Pour IEfix */
.clearfix {
clear: inline-both;
zoom: 1;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Trucs et astuces
La fusion des marges
Comme son nom l’indique, est un mécanisme qui fusionne automatiquement
certaines marges entre-elles.
1. Tout d’abord, cette fusion ne se produit que de manière verticale et ne s’applique
qu’au marges externes.
2. 4 règles où une fusion a lieu:
a) la marge haute d’un bloc et la marge haute de son premier enfant (de manière récursive)
b) la marge basse d’un bloc et la marge basse de son dernier enfant, si la hauteur est auto (de manière
récursive)
c) la marge basse d’un bloc et la marge haute de son suivant (qui n’est pas forcément un élément
frère)
d) la marge haute et basse d’un bloc sans contenu
Pour empêcher les fusions a et b, il suffit de convertir le parent
avec .parent { overflow: hidden } ou encore de lui appliquer
un padding ou une bordure même transparente.
Mais attention, Les marges d‘un élément flottant ne fusionnent jamais…

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Trucs et astuces
1. IE ne supporte pas Inline-block
– Une solution très simple consiste à styler
« zoom:1 » le sélecteur qui porte un
« display:inline-block ».
2. liste des liens justifiés grâce au modèle de
positionnement tabulaire
#wrap{
display:inline-block;
zoom: 1;
}
ul{
display:table;
}
ul > li{
display:table-cell;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Les « layouts »
• Afin de pouvoir positionner et mettre en
forme des blocs de contenu, il faut regrouper
les contenus en blocs dans le code HTML.
• Ensuite positionner
ces derniers afin de
construire ce qu’on
appelle le « layout ».

© Proxym-IT
Le « layout » avec N colonnes fixes
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
1. Avec une seule colonne
<html>
<head></head>
<body>
<div id="layout">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
#layout{ width:900px; margin:0 auto; }

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
2. Avec deux colonnes
<html>
<head></head>
<body>
<div id="layout">
</div>
</body>
</html>
<div id="content">
<div class="leftSideBar"></div>
</div>
<div id="content">
<div class="rightSideBar"></div>
</div>
#content{ overflow : hidden; }
.leftSideBar{ float:left; width:200px; }
.rightSideBar{ float:right; width:160px; }
.contentBody{ float:left; width:540px; }

© Proxym-IT
3. Avec trois colonnes
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
2. Avec deux colonnes
<html>
<head></head>
<body>
<div id="layout">
</div>
</body>
</html>
<div id="content">
</div>
<div id="content">
</div>
<div id="content">
<div class="contentBody"></div>
</div>
.contentBody{ float:left; width:540px; }

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
VS
VS
Mais, c'est quoi la différence entre ces layouts
html ?
Comment, on peut avoir des colonnes
avec des hauteurs équivalentes à la plus
importante entre eux ?

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
VS
VS
Mais, c'est quoi la différence entre ces layouts
html ?
<div id="content">
</div> #content{ display:table, width:100%; }
#content > div { display:table-cell; }

© Proxym-IT
Un « layout » fluide avec N colonnes
Avec trois colonnes
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Avec une seule colonne
Avec deux colonnes
<html>
<head></head>
<body>
<div id="layout">
</div>
</body>
</html>
<div id="content">
</div>
<div id="content">
</div>
<div id="content">
<div class=« leftSideBar"></div>
</div>
.contentBody{ margin: 0 200px 0 160px; }

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Le grid « layout »
Représentation virtuelle composée de
lignes, de colonnes et de cellules.
.container-12{ overflow:hidden; }
[class^=cell]{ float:left; }
.cell-1{ width: 8.3333%; }
.cell-2{ width: 16.6666%; }
.cell-3{ width: 25%; }
.cell-4{ width: 33.3333%; }
.cell-5{ width: 41.66666%; }
.cell-7{ width: 58.3333%; }
.cell-8{ width: 66.6666%; }
.cell-10{ width: 83.3333%; }
.cell-11{ width: 91.6666%; }
.cell-12{ width: 100%; }

Intégration graphique en XHTML / CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Intégration graphique en XHTML / CSS

Ähnlich wie Intégration graphique en XHTML / CSS (20)

Intégration graphique en XHTML / CSS

Hinweis der Redaktion