Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6

22/04/2017Ettaieb Abdessattar
Abdessattar
Ettaieb
Cours Introduction a la
programmation Web

● 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)

● 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.

● 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).

● 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é

● 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>

● 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

● 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

● 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

Couleur Couleur (Hexa) Couleur (RGB)
#000000 rgb (0, 0, 0)
#FF0000 rgb (255, 0, 0)
#00FF00 rgb (0, 255, 0)
#0000FF rgb (0, 0, 255)
#FFFF00 rgb (255, 255, 0)
#00FFFF rgb (0, 255, 255)
#FF00FF rgb (255, 0, 255)
#C0C0C0 rgb (192, 192, 192)
#FFFFFF rgb (255, 255, 255)
EXEMPLES DE COULEURS

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

valeu
r2
pou
r
les
propriét
és
selecteur {
propriété1:valeur1;
propriété2:valeur2;
...
}
Déclaration des valeurs
valeur1 et
propriete1 et propriete2 d’un
sélecteur.
● Les Une feuillede style consiste en un ensemble
de règles qui définissent le formatage des
éléments (balises) d'un document HTML.
● Une règle CSS se présente comme suit :

EXEMPLE :
h1 {
font-family: Times;
font-size: 1.5em;
color:#0000FF;
}
p {
font-family:"Arial Narrow", Arial;
color:#0000FF;
background-color:#DDDDDD;
}
Voir exemple-01.css

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 #)

LES SÉLECTEURS
Sélecteur de type BALSE
balise {
propriete1 : valeur1 ;
}
Sélectionne tous les éléments
"balise"
EXEMPLE
p {
font-family:"Arial Narrow", Arial;
color:#0000FF;
background-color:#DDDDDD;
}

HTML: <element class="class-value">…</element>
CSS: .class-value {
...
}
LES SÉLECTEURS
Sélecteur de type nom de CLASS
.classe {
}
Tous les éléments HTML ont un
attribut class

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

83

HTM
L:
<element id="tag-id">…</element>
CS
S:
#tag-id {
...
}
LES SÉLECTEURS
Sélecteur de type nom de identifiant : ID
#identifiant {
}
Tous les éléments HTML ont un
attribut id

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 !

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

● 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.

● list-style-type: none | disc | circle |
square etc.
● list-style-position: inside | outside
● list-style-image: url(lien vers une
image)

Cours Dev. Web de Mr. Ramzi Guetari - UVT

Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6

Contenu connexe

Tendances

Similaire à Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6

Plus de Abdessattar Ettaieb

Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6