2. 22/04/2017Ettaieb Abdessattar
● Les exemples que nous avons vu jusque là n’utilisent pas
de Styles.
● La présentation est adoptée par défaut et elle est très
basique.
● C’est normal XHTML ne s’occupe que du contenu d’un
document.
● La présentation est déléguée aux feuilles de style.
● Les styles peuvent être contenus directement dans le
document XHTML lui-même ou dans un ou plusieurs
document CSS séparé. Nous vous recommandons de
toujours utiliser un ou plusieurs document CSS séparé (un
par média par exemple)
3. 22/04/2017Ettaieb Abdessattar
● 1994 - Les styles ont été utilisés quasiment depuis le début
du WEB. Une License a été déposé par le W3C
garantissant l’usage libre des styles.
● 1996 - CSS Niveau 1 : contient les fonctionnalités
essentielles, telles que le formatage de texte, la
spécification des typographies et les marges.
● 1996-1998 - CSS Positioning : spécification intermédiaire
entre la norme 1 et la norme 2, permet le positionnement
précis des éléments sur la page.
4. 22/04/2017Ettaieb Abdessattar
● 1998 - CSS Niveau 2 : intègre les spécifications CSS-1 et
CSS-P, en y ajoutant des propriétés liées à l'accessibilité et
au type de média utilisé (écran, imprimante, dispositif
braille, TV, ...).
● 1999 - Un brevet intitulé "Style sheets for publishing
systems" a été déposé Microsoft, sans effet car la License
du W3C lui est antérieure.
● La version courante est CSS niveau 3. Parmi les grandes
nouveautés on peut citer le support du format SVG
permettant l'inclusion de formes vectorielles, le
LayoutModule permettant de composer une page selon un
modèle de grille (comme on le ferait avec des tableaux).
5. 22/04/2017Ettaieb Abdessattar
● Séparation des données et de la mise en forme
(présentation)
● Facilité de maintenance.
● Facilité de portage pour un autre site
● Simplification et lisibilité du code
● Uniformisation du code entre les pages du même site et
entre différents médias (e.g., impression, écran)
● Améliorer l’accessibilité
6. 22/04/2017Ettaieb Abdessattar
● Il y a deuxmanières d’associer des feuilles
styles à un document XHTML :
Usage de l’élément LINK
Usage de l’élément STYLE
● L’un ou l’autredes deux éléments doit être placé
dans l’élément
HEADER.
<link href= "css_url" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">@import url("css_url"); </style>
7. 22/04/2017Ettaieb Abdessattar
● Comme le nom l’indique, les styles peuvent être “en
cascades”, i.e., la possibilité de combiner des déclarations
de styles externe, interne ou inline.
● La priorité est accordée à la déclaration la plus proche de
l’élément à styliser en cas de conflit sur une même
propriété
● Ordre décroissant de priorité : [feuille utilisatrice,] inline,
interne, externe.
● Un élément imbriqué hérite des propriétés de son/ses
parents, sauf les propriétés redéfinies pour cet élément.
● EXEMPLE : Si on déclare un élément BODY avec une
couleur de fond bleue, un paragraphe sans style
spécifique et dont le parent direct est la balise body aura
une couleur de fond bleue
8. 22/04/2017Ettaieb Abdessattar
● Une couleur en CSS est la combinaison des 3 couleurs
primaires (dans l’ordre) : le RED (rouge), le GREEN (vert)
et le BLUE (bleue) - RGB
● Chacune des composantes primaires
est indiquée par une valeur
comprise entre 0 et 255.
● La syntaxe de spécification des couleurs est :
#RRGGBB – RR, GG et BB étant des valeurs
hexadécimales (de 00 à FF) rgb (R, G, B) – R, G et B des
valeurs décimales (de 0 à 255)
rgb (R% , G% , B%) avec R, G et B des valeurs comprises entre
0 et 100
9. 22/04/2017Ettaieb Abdessattar
● La combinaison des valeurs entre 0 et 255 du rouge, du
vert et du bleu donne un total de plus de 16 millions de
couleurs différentes.
● color : indique la couleur du texte
● background-color : spécifie la couleur de fond
11. 22/04/2017Ettaieb Abdessattar
Pour toutes les données numériques (tailles de police, les
espaces entre paragraphes ou les marges) on dispose de :
● Données absolues:
pt pour point(= 1/72
pouce) pc pour
Pica(= 12 points) in
pour pouce (= 2,54
cm) mm pour
millimètre
cm pour centimètre
● Données relatives:
em pour "en relation avec la taille de police propre à l'élément"
ex pour "en relation avec la hauteur de la lettre x propre è
l´élément"
px pour pixel
15. 22/04/2017Ettaieb Abdessattar
LES SÉLECTEURS
● Sélecteur : “pattern” qui sélectionne l’élément ou le groupe
d’éléments sur lesquels va s’appliquer le style.
● Types de sélecteur possibles :
Une balise
Un nom de classe (introduit par .)
Un identifiant d’élément (introduit par #)
16. 22/04/2017Ettaieb Abdessattar
LES SÉLECTEURS
Sélecteur de type BALSE
balise {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
Sélectionne tous les éléments
"balise"
EXEMPLE
p {
font-family:"Arial Narrow", Arial;
color:#0000FF;
background-color:#DDDDDD;
}
17. 22/04/2017Ettaieb Abdessattar
HTML: <element class="class-value">…</element>
CSS: .class-value {
...
}
LES SÉLECTEURS
Sélecteur de type nom de CLASS
.classe {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
Tous les éléments HTML ont un
attribut class
18. 22/04/2017Ettaieb Abdessattar
EXEMPLE : exemple-
02.css
LES SÉLECTEURS
● Sélectionne tous leséléments de la
page dont l’attribut class vaut
class-value.
● Plusieurs éléments (et de balises
différentes) peuvent appartenir à la même classe
21. 22/04/2017Ettaieb Abdessattar
EXEMPLE : exemple-
03.css
85
LES SÉLECTEURS
● Sélectionne l’élément de la page dont l’attribut id
vaut tag-id.
● Unique pour chaque page !
23. 22/04/2017Ettaieb Abdessattar
RÈGLES D’APPARIEMENT
EXEMPLE : exemple-04.css
Sélecteur Appariement
E N’importe quel élément E
E F N’importe quel élément F qui est descendant de E
E > F N’importe quel élément F qui est enfant de E
E F N’importe quel élément F qui est immédiatement précédé de E
E[att=val] N’importe quel élément E ayant un a tribut att dont la valeur
est val
E.myclass N’importe quel élément E de la classe myclass
#myid L’élément dont l’id est myid
24. 22/04/2017Ettaieb Abdessattar
● Des pseudo-éléments sont des éléments dans un fichier
HTML qui ne sont pas clairement définis.
● Pseudo-formats sur les liens :link, :visited, :hover,
:active, :focus.
● Pseudo-formats sur les paragraphes :first-line, :first-
letter, :first-child.
● Pseudo-formats pour le texte généré automatiquement
:before,
:after.
● Pseudo-formats pour la numérotation automatique.
28. 22/04/2017Ettaieb Abdessattar
EXEMPLE : exemple-06.css et
exemple-07.css
● font-family: times, arial, serif, sans-serif,
monospace;
● font-style: normal | italic | oblique;
● font-weight: normal | bold | bolder | lighter |
100 –900
● font-size: size;
29. 22/04/2017Ettaieb Abdessattar
● text-indent: indentation de la première ligne d’un
paragraphe.
● text-align: right | left | center | justify;
● text-decoration: none | underline | overline | line-through
● text-transform: none | capitalize | uppercase |lowercase;
● line-height: ajuste l’espace verticalpour chaque
ligne de texte en fonction de la taille de la
police de caractères.
EXEMPLE : exemple-06.css et exemple-07.css