More Related Content Similar to Intégration graphique en XHTML / CSS (20) Intégration graphique en XHTML / CSS1. © 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
2. © Proxym-IT
http://twitter.com/proxymit
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
(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
3. © Proxym-IT
http://twitter.com/proxymit
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
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é… )
4. © Proxym-IT
http://twitter.com/proxymit
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
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… ).
5. © Proxym-IT
http://twitter.com/proxymit
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
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.
6. © Proxym-IT
http://twitter.com/proxymit
Avantages et exigences du XHTML
Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et
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
à 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é
7. © Proxym-IT
http://twitter.com/proxymit
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
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>
8. © Proxym-IT
http://twitter.com/proxymit
Règles de formatages des balises
• XHTML est strict sur les points suivants et ne tolère plus les
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
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>
9. © Proxym-IT
http://twitter.com/proxymit
<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>
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
D’autres contraintes XHTML
<img src=”max” alt=”une image correcte” />
<img src=”max” alt=incorrecte />
<balise attribut=" valeur de l'attribut " />
<!-- après analyse -->
<balise attribut="valeur de l'attribut" />
<option sected="selected">correct</option>
<option selected>incorrect</option>
<!-- construction correcte -->
alt="Une image de mon album"
<!-- construction incorrecte -->
alt="Une image
de mon album"
10. © Proxym-IT
http://twitter.com/proxymit
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
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> …
11. © Proxym-IT
http://twitter.com/proxymit
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
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>
12. © Proxym-IT
http://twitter.com/proxymit
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
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.
13. © Proxym-IT
http://twitter.com/proxymit
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
la sémantique web
Web 1.0
Web
statique
Web 2.0
Web
intelligent
Web 3.0
Web
sémantique
14. © Proxym-IT
http://twitter.com/proxymit
Le rendu par défaut des éléments XHTML
• même lorsqu'aucun style
Important <h1>
Moins important
Paragraphe <p>
Bloc <div>
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
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>
15. © Proxym-IT
http://twitter.com/proxymit
Le rendu par défaut des éléments
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
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;
}
16. © Proxym-IT
http://twitter.com/proxymit
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é.
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
• html, body, h1, h2..h6, p, div { display: block; }
• head { display: none; }
• span, a, strong, em { display: inline; }
• input, select { display: inline-block; }
17. © Proxym-IT
http://twitter.com/proxymit
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
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é)
18. © Proxym-IT
http://twitter.com/proxymit
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
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
19. © Proxym-IT
http://twitter.com/proxymit
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" >
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
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 */
}
20. © Proxym-IT
http://twitter.com/proxymit
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.
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
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>
21. © Proxym-IT
http://twitter.com/proxymit
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é.
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
– :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{
propriété : valeur ;
}
22. © Proxym-IT
http://twitter.com/proxymit
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.
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
– :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{
propriété : valeur ;
}
23. © Proxym-IT
http://twitter.com/proxymit
.profilBox a.video{} .profilBox a.view {}
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
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{}
24. © Proxym-IT
http://twitter.com/proxymit
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
Exemples
.composantItem h2{
margin: 0 0 18px;
}
.col-4{
width: 33.3333%;
}
.show-grid [class^="col-"] {
padding:5px;
margin-bottom:8px;
}
25. © Proxym-IT
http://twitter.com/proxymit
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
Exemples
Blockqute:before{
content: " ";
}
Blockqute:after{
content: " ";
}
26. © Proxym-IT
http://twitter.com/proxymit
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
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
27. © Proxym-IT
http://twitter.com/proxymit
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
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 ;
28. © Proxym-IT
http://twitter.com/proxymit
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
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;
}
29. © Proxym-IT
http://twitter.com/proxymit
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.
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
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...
30. © Proxym-IT
http://twitter.com/proxymit
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
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
31. © Proxym-IT
http://twitter.com/proxymit
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
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)….
32. © Proxym-IT
http://twitter.com/proxymit
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
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
33. © Proxym-IT
http://twitter.com/proxymit
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
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
34. © Proxym-IT
http://twitter.com/proxymit
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
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; }
35. © Proxym-IT
http://twitter.com/proxymit
/* propriétés communes */
}
#shop .contentBlock {
/* propriétés spécifiques */
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
.contentBlock{
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
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 {
margin: 1em 0.5em; font-size:1em; color: #2B8ADB;
}
h2 {
margin: 1em 0.5em; font-size:1em; color: #2B8ADB;
}
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>
36. © Proxym-IT
http://twitter.com/proxymit
#subnav { /* Styles */ }
#subnav li { /* Styles */ }
#subnav li.subnavitem { /* Styles */ }
#subnav li a { /* Styles */ }
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
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">
<!--[if IE 7]>
<link href="style-ie7.css" rel="stylesheet">
<![endif]-->
37. © Proxym-IT
http://twitter.com/proxymit
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
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%;
}
38. © Proxym-IT
http://twitter.com/proxymit
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
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;
}
39. © Proxym-IT
http://twitter.com/proxymit
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
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…
40. © Proxym-IT
http://twitter.com/proxymit
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
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;
}
41. © Proxym-IT
http://twitter.com/proxymit
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
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 ».
42. © Proxym-IT
http://twitter.com/proxymit
Le « layout » avec N colonnes fixes
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
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; }
43. © Proxym-IT
http://twitter.com/proxymit
Le « layout » avec N colonnes fixes
#layout{ width:900px; margin:0 auto; }
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
1. Avec une seule colonne
2. Avec deux colonnes
<html>
<head></head>
<body>
<div id="layout">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
<div id="content">
<div class="leftSideBar"></div>
<div id="content"></div>
</div>
<div id="content">
<div id="content"></div>
<div class="rightSideBar"></div>
</div>
#content{ overflow : hidden; }
.leftSideBar{ float:left; width:200px; }
.rightSideBar{ float:right; width:160px; }
.contentBody{ float:left; width:540px; }
44. © Proxym-IT
http://twitter.com/proxymit
Le « layout » avec N colonnes fixes
#layout{ width:900px; margin:0 auto; }
3. Avec trois colonnes
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
1. Avec une seule colonne
2. Avec deux colonnes
<html>
<head></head>
<body>
<div id="layout">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
<div id="content">
<div class="leftSideBar"></div>
<div id="content"></div>
</div>
<div id="content">
<div id="content"></div>
<div class="rightSideBar"></div>
</div>
<div id="content">
<div class="leftSideBar"></div>
<div class="contentBody"></div>
<div class="rightSideBar"></div>
</div>
#content{ overflow : hidden; }
.leftSideBar{ float:left; width:200px; }
.rightSideBar{ float:right; width:160px; }
.contentBody{ float:left; width:540px; }
45. © Proxym-IT
http://twitter.com/proxymit
Le « layout » avec N colonnes fixes
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
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 ?
46. © Proxym-IT
http://twitter.com/proxymit
Le « layout » avec N colonnes fixes
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
VS
VS
Mais, c'est quoi la différence entre ces layouts
html ?
<div id="content">
<div class="leftSideBar"></div>
<div id="content"></div>
<div class="rightSideBar"></div>
</div> #content{ display:table, width:100%; }
#content > div { display:table-cell; }
47. © Proxym-IT
http://twitter.com/proxymit
Un « layout » fluide avec N colonnes
Avec trois colonnes
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
Avec une seule colonne
Avec deux colonnes
<html>
<head></head>
<body>
<div id="layout">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
<div id="content">
<div class="leftSideBar"></div>
<div id="content"></div>
</div>
<div id="content">
<div class="rightSideBar"></div>
<div id="content"></div>
</div>
<div id="content">
<div class=« leftSideBar"></div>
<div class="rightSideBar"></div>
<div id="content"></div>
</div>
#content{ overflow : hidden; }
.leftSideBar{ float:left; width:200px; }
.rightSideBar{ float:right; width:160px; }
.contentBody{ margin: 0 200px 0 160px; }
48. © Proxym-IT
http://twitter.com/proxymit
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
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-6{ width: 50%; }
.cell-7{ width: 58.3333%; }
.cell-8{ width: 66.6666%; }
.cell-9{ width: 75%; }
.cell-10{ width: 83.3333%; }
.cell-11{ width: 91.6666%; }
.cell-12{ width: 100%; }
Editor's Notes Nodejs est un logiciel permettant d'exécuter du JavaScript côté serveur, contrairement à ce qu'on a l'habitude de voir avec le javascript côté client. Le XHTML est compatible avec les anciennes versions du HTML et accompagne le passage aux technologies modulaires et extensibles du XML. Le XHTML est compatible avec les anciennes versions du HTML et accompagne le passage aux technologies modulaires et extensibles du XML. Les attributs sont toujours avec des guillemets
La minimisation des attributs est interdite
Les éléments <script> et <style> sont déclarés comme possédant un contenu de données textuelles analysées (PCDATA : Parsed Character DATA)
Automatiquement, les agents utilisateurs sup primeront les espaces de début et de fin des valeurs d'attributs et si plusieurs espaces se suivent, ils seront remplacés par un unique espace.
L'utilisation de l'eperluette dans une valeur d'attribut doit se faire par l'intermédiaire de sa référence d'entité caractère, &
Les retours à la ligne dans les valeurs d'attributs sont à proscrire Le terme sélecteur désigne la partie précédant le bloc de déclaration, à gauche de l’accolade ouvrante. Il peut être un sélecteur d’élément p, une classe .list-inline, un ID #product ou un sélecteur d’attribut [class*="col-"]. Le terme sélecteur désigne la partie précédant le bloc de déclaration, à gauche de l’accolade ouvrante. Il peut être un sélecteur d’élément p, une classe .list-inline, un ID #product ou un sélecteur d’attribut [class*="col-"]. Certains styles, tels que le type de caractère, sa couleur, l'alignement du texte, etc., se transmettent automatiquement des blocs HTML "parents" vers leurs "enfants". D'autres styles tels que la bordure, et les marges (margin et padding) ne se transmettent pas. 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.
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. La spécification CSS 2.1 met à notre disposition de puissantes possibilités de gestion des surfaces grâce à la propriété display. La spécification CSS 2.1 met à notre disposition de puissantes possibilités de gestion des surfaces grâce à la propriété display.