Les Feuilles de Style en Cascade

Les Feuilles de style en Cascade
C.S.S
(Cascading Style Sheet)
Ben Nasr Salem
Un peu d'histoire
Depuis
le dbut du Web, les principaux

fabricants de navigateurs ont tent de se
crer un public captif en crant des
extensions HTML propritaires, restitue
uniquement par leurs produits respectifs.
Le Web s'est ainsi divis en deux camps :
IE et Netscape.
Pour
Un peu d'histoire
que leurs sites soient accessibles

aux deux principaux navigateurs, les
dveloppeurs Web ne pouvaient opter que
pour des choix aussi insatisfaisants les
uns que les autres :
n'utiliser qu'une syntaxe commune aux deux navigateurs, et se retrouver

avec un site trs pauvre, se dmarquant peu de la concurrence ;
ne s'adresser qu' l'un des deux camps et sacrifier ainsi une grande partie
de son audience et de sa clientle potentielle ;
faire deux versions du mme site, au prix d'un travail bien plus important et
forcment plus coteux.
Mais
aujourd'hui, les choses ont bien

chang. Depuis 1994, un organisme de
standardisation, le W3C , met en oeuvre
des normes Web.
Ainsi les fabricants de navigateurs,
commencer par Microsoft, Netscape,
Frefox, Opera, etc font prsent
preuve d'une volont commune de
respecter ces normes
Introduction
CSS
est un langage de style qui dfinit la

prsentation des documents HTML.
Par exemple, CSS couvre les polices, les
couleurs, les marges, les lignes, la
hauteur, la largeur, les images d'arrireplan, les positionnements volus et bien
d'autres choses.
HTML peut tre utilis pour la prsentation
des sites Web, mais...
Mais
CSS offre plus d'options et se

montre plus prcis et sophistiqu.
CSS est pris en charge par tous les
navigateurs actuels.
Les C.S.S
Permettent
de sparer le fond de la forme

Assurent une compatibilit plus grande
Permettent une maintenance facile
Les
CSS par lexemple

Exemple 1 - Exemple 2 - Exemple 3
3 pages web au contenu identique

mais la prsentation diffrente
Code
de la page HTML (presque)

identique dans les trois cas
Les
C.S.S grent la mise en page
Quelques
exemples de mise en page :
http://www.pompage.net/traduction/csspratique/
C.S.S : Une cascade de style

Dans
les balises
<p style="text-align: right; color: black" >
Les feuilles de style permettent de grer la mise en page
des divers lments dune page web </p>
Mais
aussi
Dans la page
Dans un fichier de style
La balise <style>
<p style="text-align: right; color: black" > Les feuilles
de style permettent de grer la mise en page des divers
lments dune page Web </p>
<p style=" text-align: right; color: black" > Bien sur, une
page Web peut tre compose de nombreux paragraphes, comme
nimporte quel texte.</p>
<p style=" text-align: right; color: black" > Mais alors, il
devient fastidieux de devoir saisir nouveau toutes les
informations de style ! </p>
<p style=" text-align: right; color: black" > Heureusement,
les CSS nous permettent dviter ce travail inutile </p>
Mettons le style une fois pour toute dans la page :

La balise <style>
La balise <style>
<html>
<head>
<style type=" text/css" title=" mes_styles" media="all" >
p { text-align: right; color: black }
</style>
</head>
<body>
<p> Les feuilles de style permettent de grer la mise en
page des divers lments dune page Web </p>
<p> Bien sur, une page Web peut tre compose de nombreux
paragraphes, comme nimporte quel texte.</p>
<p> Mais alors, il devient fastidieux de devoir saisir
nouveau toutes les informations de style ! </p>
<p> Heureusement, les CSS nous permettent dviter ce
travail inutile </p>
</body>
</html>
Rgle = h2 { font-size: 16pt ; }
Le "slecteur" en place de "tag" (balise) du code pur HTML

h2 { font-size: 16pt ; }
La "dclaration" s'applique l'ensemble
font-size: 16pt
qui son tour se compose de deux parties :
La "proprit" ici ...... h2 { font-size: 16pt ; }
La "valeur" ici ....... h2 { font-size: 16pt ; }
et enfin :
Le mot "bloc" s'applique un ensemble prcis qui pourrait se
limiter
{ font-size: 16pt ; }
La balise <style>
<style
type="text/css"
title="mes_styles"
media="all" >
p
{
text-align : right;
color : black
}
</style>
Voyons <style>
plus
en
dtail
La balise <style>
<style
type="text/css"
title="mes_styles"
media="all" >
p
{
text-align : right;
color : black
}
</style>
Les informations de la
balise sont de type
texte
(optionnel)
La balise <style>
<style
type="text/css"
title="mes_styles"
media="all" >
p
{
text-align : right;
color : black
}
</style>
Nom donn (choisi)

aux informations de
style
(optionnel)
La balise <style>
<style
type="text/css"
title="mes_styles"
media="all" >
p
Indique quel mdia

sapplique la feuille
de style.
(optionnel)
text-align : right;
color : black
</style>
all
screen
print
projection
tv
braille
La balise <style>
<style
type="text/css"
title="mes_styles"
media="all" >
p
{
lment pour lequel on

dfini le style
text-align : right;
color : black
}
</style>
dlimiteurs de dbut et
de fin de style
La balise <style>
<style
type="text/css"
title="mes_styles"
media="all" >
P
proprit
valeur pour
cette proprit
text-align : right ;
color : black
}
</style>
La balise <style>
<style
type="text/css"
title="mes_styles"
media="all" >
P
{
color : black
}
h1
{
text-align : center ;
}
</style>
Il est possible de dfinir

le style de plusieurs
lments
feuille de style externe
et si le site possde plusieurs pages ?

On cre une feuille de style externe,
lie chaque page Web qui lutilise
<html>
<head>
< link rel="stylesheet"
href="style.css"
type="text/css">
</head>
Lier une feuille de style externe

<html>
<head>
href="style.css"
type="text/css"
media="screen" >
</head>
cest une
feuille de style
qui est lie

<html>
<head>
href="style.css"
type="text/css"
media="screen" >
</head>
Ou se trouve la feuille de style ?

Ici, dans le fichier style.css
du rpertoire courant

<html>
<head>
href="style.css"
type="text/css"
media="screen" >
</head>
Une feuille de style, cest

un fichier texte

<html>
<head>
href="style.css"
type="text/css"
media="screen" >
</head>
Pour quel mdia la feuille de

style est-elle valable ?
(optionnel, par dfaut : tous)
le fichier style.css
Il
comporte les informations de style sur

les diffrents lments
Fichier style.css
P
{
color : black
}
h1
{ text-align : center }
des styles en cascade
Mais au fait, pourquoi

en cascade
?
re
Cascade
styles dfinis en cascade

du plus loign au plus proche
Que se passe-t-il en cas de redfinition en cascade ?
feuille de style externe

balise <style> dune page
attribut style dans une balise
du prioritaire
au + prioritaire
Quelques proprits pour

commencer ?
Aprs cette prsentation gnrale,
voyons quelques exemples
body
p
h1,
h2, h3, h4, h5, h6
body
Couleur
Placer
du texte & du fond
une image de fond
Rajouter
des marges
Un peu de couleur
color
la proprit color permet de fixer la couleur du

texte.
Comment
manipuler les couleurs ?
liste de couleur standard

Un code hexadcimal long #00FF45
Un code hexadcimal court
#0F3
Un code rgb, de 0 255
rgb(0,0,100)
un code rgb, en pourcentage rgb(10%,10%,30%)
transparent
Un peu de couleur (suite)

Liste
des couleurs standard :
aqua, black, blue, fuchsia, gray, green,

lime, maroon, navy, olive, purple, red,
silver, teal, white, yellow
Un peu de couleur (de fond)

background-color
la proprit background-color permet de fixer la
couleur de fond de la page.
body
{
background-color : rgb(0,0,0) ;
color : white
}
Une image de fond

background-image
permet de spcifier une image de fond
background-repeat
limage de fond doit-elle tre rpte ?
background-position
O placer limage de fond ?
background-attachment
Limage de fond bouge-t-elle en mme temps que la page ?
background-image
none
url()
background-repeat
repeat
no-repeat
repeat-x
repeat-y
background-position
no-repeat
repeat-x
repeat-y
repeat
background-repeat
positionnement fixe ou mobile

bla bla bla blabla bla bla bla

background-attachment: fixed;

background-attachment: scrool;
(valeur par dfaut)
comment avoir une image au milieu ?

background-position : x y
Dtermine la position de limage de fond
par rapport au coin suprieur gauche
Exemples de positionnement
background-position: 50% 50% ;
background-position: 100% 100%;
background-position: 10px
Exemples de positionnement
background-position: 10px
Mesures en C.S.S
%
(pourcentage)
la taille / position de llment est calcule de
faon relative
px
(pixel)
Le pixel est la plus petit unit de lcran
em
1em = 100%, 1.2em = 120%,
pt
correspond une unit dimprimerie
Mesures en C.S.S
! Prciser lunit de mesure est obligatoire !
sauf pour la valeur 0, identique quelque
soit lunit utilise
// Valide
background-position: 10px 50% ;
// Valide
background-position: 0 50% ;
// Valide
background-position: 10 50% ;
// Non Valide
En C.S.S, en cas derreur, la proprit errone est ignore
Un peu de marge
margin : 1em ;
margin-right
margin-left
margin-right
margin-bottom
:
:
:
:
1em ;
2em ;
0.9em ;
2em;
Nous reviendrons sur les marges un peu plus tard
Quelques proprits sur les fontes
font-size
permet de fixer la taille de la police

les units de mesures vues prcdemment sont utilisables
il existe aussi des tailles relatives prdfinies :
xx-small
x-small
small
medium,
large,
x-large,
xx-large,
larger,
smaller

font-family
permet de spcifier le type de police que lon

souhaite afficher
! Toutes les polices ne sont pas disponibles
sur tous les ordinateurs !
Il est possible de spcifier plusieurs polices,
dans lordre ou lon souhaite les utiliser

font-family
familles de polices gnriques :
serif,
sans-serif,
monospace,
cursive,
fantasy.
exemple :
font-family : "times new roman", serif, sans-serif

font-weight
prcise le niveau de gras de la police :

normal,
bold,
100, 200, ...
font-style
prcise le style de fonte :

normal
italic
oblic
exemple : afficher du texte en italique et en gras

font-weight : bold ;
font-style : italic ;

font-variant
utilise une fonte normale ou en petite capitale :

normal,
small-caps.
font
raccourci permettant de tout spcifier
exemple : utilisation du raccourci font

font : italic bold 1em cursive ;
Quelques proprits sur les textes

text-align
permet de grer lalignement du texte
right,
left,
center,
justify.
text-decoration
comment doit apparatre le texte
none
underline
overline
line-through
blink
(aucun)
(soulign)
(surlign)
(barr)
(clignotant)
Quelques proprits sur les textes

text-transformation
on peut appliquer des transformations au texte
capitalize
uppercase
lowercase
none
(1ere lettre de chaque mot en majuscule)

(transformer en majuscule)
(transformer en minuscule)
(aucune)
text-indent
Indentation de dbut de paragraphe
exemple :
P {
text-transformation : lowercase ;
text-indent
: 1em;
}
Ah oui, au fait
h1
h2
h3
h4
h5
{text-decoration
{text-decoration
{text-decoration
{text-decoration
{text-decoration
:
:
:
:
:
underline
underline
underline
underline
underline
}
}
}
}
}
peut scrire
h1,h2,h3,h4,h5,h6 {text-decoration : underline }
2me Cascade
styles dfinis en cascade
Imbrication des lments
<html>
<html>
<head>
</head>
<head>
<body>
<body>
<h3>Un titre</h3>
<h3>
la, un petit texte exemple,
<p>
mais sans paragraphe
<p>La, un autre petit texte,
<strong>
<strong>mais qui fait parti
dun paragraphe</strong></p> les styles non redfinis sont
rpercuts dans tous les lments
</body>
contenus
</html>
D.O.M : Document Object Model
Changer le style
Comme dit prcdemment
p {text-decoration : underline }
strong {text-decoration : underline }
peut scrire
p,strong {text-decoration : underline }
Mais attention
p strong {text-decoration : underline }
possde un autre sens :

Le style nest appliqu strong que sil est imbriqu dans
une balise p
Exemple
p>strong {color : red}
<p>La couleur<strong>rouge</strong>
est applique ici,
mais aussi <del><strong>la</strong></del></p>
<strong>Mais pas la</strong>
<p>
<strong>
<del>
<strong>
De mme
p>strong {text-decoration : underline }
Le style nest appliqu strong que sil est descendant

direct de p
Exemple
p>strong {color : red}
<p>La couleur<strong>rouge</strong>
est applique ici,
mais pas <del><strong>la</strong></del></p>
<p>
<strong>
<del>
<strong>
De mme
p+strong {text-decoration : underline }
Le style nest appliqu strong que sil suit

immdiatement une balise p
Exemple
p {text-indent : 1em}
p+p {text-indent : 0}
Le premier paragraphe dun texte sera indent,

mais pas les suivants
Les Pseudo-lments
Un
pseudo-lment est une

caractristique qui permet de rajouter du
dtail de style.
On
reconnat un pseudo-lment par

lutilisation de : dans la dfinition du
style correspondant
Quelques exemples :
Quelques pseudo-lments
:first-letter
ne sapplique que sur la premire lettre de
lensemble
:first-line
ne sapplique que sur la premire ligne de

lensemble
Utilisation dun pseudo-lment:

P:first-letter { color : red; font-size : large };
Des classes et des ID

(parce que sil y a des pseudo-classes,
cest bien quil doit y avoir des classes)
Les classes
Si
certains types dlments devaient tre

affichs diffremment ?
exemple : changement de style dun <p>
Et bien, cest possible !

il
existe un attribut class

Applicable tous les lments
permettant de spcifier un style particulier
<p class= x >Ceci est le premier paragraphe de larticle
</p>
<p class= y > Ceci est le deuxieme
larticle </p>
paragraphe de
<p class= z> Ceci est le premier paragraphe de larticle

</p>
et du cot du style
P {
color : black;
background-color : white;
}
P.x {
font-size : smaller ;
text-align : justify;
}
P.y:first-letter {
font-size
: 1.2em ;
}
.petit { font-size : 0.7em }
et du cot du style
P {
color : black;
}
P.x {
}
P.y:first-letter {
font-size
: 1.2em ;
}
.petit { font-size : 0.7em }
Encore une fois, le style cascade de

la classe la plus gnrale vers une
classe particulire
Il est possible de cumuler
classe et pseudo-classe
on peut dfinir une classe

sans prciser quel
lment elle sapplique
Les identifiants
(Appelez moi par mon nom !)
On
peut dfinir un identifiant unique pour

un lment
On peut associer un style cet identifiant
<p id=parag1> Ce paragraphe sert juste de
memo pour prendre de bonnes habitudes dans le
codage.</p>
et du cot du style
P {
color : black;
}
P#parag1 {
}
et du cot du style
P {
color : black;
}
P#parag1 {
}
. pour classe
# pour identifiant
Mais alors, classe ou identifiant ?

Un
identifiant doit tre unique
Utilis pour se rfrer un lment particulier

informations de position (on y vient, patience)
Une
Il
classe peut servir plusieurs fois
on peut y mettre les proprits de style
est possible de cumuler class et id
Modles daffichage en C.S.S

Mise en boite
Les types de blocs

<h3>Titre</h3>
<P>ceci est le premier paragraphe. <em>Cette phrase
peut tre trs importante</em>, mais <strong>celle-ci
lest plus encore</strong></P><h3>Autre
titre</h3><h4>titre (encore)</h4><h4>titre
(toujours)</h4>
Titre
Ceci est le premier paragraphe
Mais,
Celle-ci lest plus encore
Autre titre
Titre (encore)
Titre (toujours)
Cette phrase peut tre trs importante
Deux types dlments
Les lments bloc
Les lments blocs sempilent les uns sur les autres

Un lment bloc peut contenir dautres lments blocs
Un lment bloc peut contenir des lments en ligne
exemples : p, h1, h2, h3, h4, h5, h6, div
Les
lments en ligne
Les lments en ligne se placent les uns cot des autres

Un lment en ligne peut contenir dautres lments en
ligne
Un lment en ligne ne peut pas contenir dlments bloc.
exemples : em, strong, span
Deux types dlments
Les lments bloc
Les lments blocs sempilent les uns sur les autres

Un lment bloc peut contenir dautres lments blocs
Un lment bloc peut contenir des lments en ligne
exemples : p, h1, h2, h3, h4, h5, h6, div
Les
lments en ligne
Les lments en ligne se placent les uns cot des autres

Un lment en ligne peut contenir dautres lments en
ligne
Un lment en ligne ne peut pas contenir dlments bloc.
exemples : em, strong, span
DIV & SPAN

Containers
gnriques.
Pour dfinir un style applicable seulement
une partie de la page et non plus une
balise <HTML> prcise, vous pouvez
placer un attribut style dans une balise
<DIV> ou dans une balise <SPAN>.
Ces balises dfinissent une zone de texte
donne, donc tout ce qui se trouve entre
la balise de dbut et la balise de fin
adopte le style dfini.
DIV & SPAN

La
seule diffrence entre <DIV> et

<SPAN> est que la premire entrane un
saut de ligne et la seconde pas.
<SPAN> modifie ainsi le style de n'importe
quelle partie de texte situe l'intrieur
d'un paragraphe ( mme un mot isol ou
une lettre seule ! )
DIV & SPAN

Exemple
<SPAN
style="color: green"> Ce texte est

vert, mais <SPAN style="color: red"> ce
texte est rouge. </SPAN> Nous revenons
au vert, mais... </SPAN>
... c'est termin pour le vert et nous
retournons la couleur par dfaut de cette
page.
exemple dutilisation de DIV

<div id="menu" >
Ici, on peut mettre tout ce qui concerne les
menus de navigation.
</div>
<div id="principal" >
Ici, cest le contenu principal de la page
(par exemple)
</div>
<div id ="pied_page" >
Et la, cest le pied de page, ou on peut
mettre les informations lgales
</div>
les proprits des boites
prenons lexemple de cette boite. Elle

contient du texte, mais que peut-on
dire de plus ?

dire de plus ?
proprit
margin
Elle possde une certaine marge avec

les boites qui la suive et la prcde
proprit
border

dire de plus ?
Elle possde une bordure blanche,
mais qui aurait aussi bien pu tre verte,
en pointill ou invisible
proprit
padding

dire de plus ?
Et cette bordure peut tre plus ou
moins rapproche du contenu
proprits de bordure
border-color
gre la couleur de la bordure
border-width
thin, medium, thick

taille spcifie
border-style
None, hidden,
dotted, dashed, solid, double,
groove, ridge, inset, outset
proprits de bordure (suite)
on peut aussi rgler individuellement les

diffrentes bordures
border-top-width
border-bottom-width
border-left-width
border-right-width
Comme pour font, il existe un raccourci

border
taille des marges

margin
permet de rgler la taille de la marge

margin-top
margin-bottom
margin-left
margin-right
padding
permet de rgler la taille du padding

padding-top
padding-bottom
padding-left
padding-right
Des marges automatiques

margin
: auto
permet normalement de rgler les marges au mieux

pour centrer llment.
Malheureuseument, Internet Explorer nest pas de cet
avis
Positionnement C.S.S
(Quest ce quon en fait de toutes ces boites ?)
Les proprits de dimension

width
Permet de spcifier la largeur dune boite
height
Permet de spcifier la hauteur dune boite
height
width
Les proprits de placement

<html>
<head>
position
absolute
relative
fixed
<style type="text/css">
<!-div#toto {
border-style: solid;
position : relative;
}
#titi{height: 500px;}
-->
</style>
<title>Nouveau fichier 3</title>
</head>
<body><div id="toto"> testde div</div>
<div id="titi"></div>
<h3>Titre</h3>
<h3>Autre titre</h3>
<h4>titre (encore)</h4>
<h4>titre (toujours)</h4>
</body>
</html>
Les proprits de placement (2)

position
absolute Le bloc est plac de faon absolue
div#toto {
position : absolute;
top
: 50% ;
left
: 100px;
}
height
pour les positions absolute et relative, il existe

deux proprits
top
left
qui permettent de spcifier o doit se placer le coin
top, left
haut gauche du bloc
width
Le placement flottant
la
proprit float peut prendre trois

valeurs
none
left
right
cette
proprit indique comment le bloc

flotte par rapport aux suivants.
Une boite verte dot dun contenu

plus long. Une boite verte dot dun Une boite jaune
contenu plus long. Une boite verte
flautante
dot dun contenu plus long. Une
boite verte dot dun contenu plus
Une boite verte dot dun contenu plus long. Une
long.
boite verte dot dun contenu plus long.Une boite
verte dot dun contenu plus long.Une boite verte
dot dun contenu plus long.Une boite verte dot
dun contenu plus long.
bloc flottant
bloc flottant
bla bla bla bla bla bla bla bla bla bla
toto
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
div#toto { float : left }
bloc non flottant
toto
bla bla bla bla bla bla bla bla
div#toto { float : none }
Visualisation C.S.S
La proprit visibility
visibility
peut prendre deux valeurs :
visible
hidden
un
lement hidden devient invisible,

mais la place quil occupe lcran est
tout de mme rserve.
proprit visibility : visible

bla bla bla bla bla bla bla bla bla bla bla
proprit visibility : hidden

La proprit display
indique le comportement que
doit adopter llment
Display
none : indique que les lments concerns ne seront pas

affichs.
inline : indique que les lments seront de type "en ligne" (=
s'utilisent dans les paragraphes) comme le sont par exemple
les balises html <q>, <del> ou encore <strong>.
block : indique que les lments seront de type "bloc" (=
structurent la page web en blocs) comme par exemple les
balises <h1> ou <p>.
list-item : les lments seront ici de type bloc mais seront ici
prcds de puces comme avec la balise <li>.

Les Feuilles de Style en Cascade

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

Les Feuilles de Style en Cascade

Uploaded by

Copyright:

Available Formats

Les Feuilles de style en Cascade

Ben Nasr Salem

le dbut du Web, les principaux

que leurs sites soient accessibles

n'utiliser qu'une syntaxe commune aux deux navigateurs, et se retrouver

aujourd'hui, les choses ont bien

est un langage de style qui dfinit la

CSS offre plus d'options et se

de sparer le fond de la forme

CSS par lexemple

3 pages web au contenu identique

de la page HTML (presque)

C.S.S grent la mise en page

exemples de mise en page :

C.S.S : Une cascade de style

Mettons le style une fois pour toute dans la page :

Rgle = h2 { font-size: 16pt ; }

Le "slecteur" en place de "tag" (balise) du code pur HTML

Nom donn (choisi)

Indique quel mdia

lment pour lequel on

Il est possible de dfinir

feuille de style externe

et si le site possde plusieurs pages ?

Lier une feuille de style externe

Lier une feuille de style externe

Ou se trouve la feuille de style ?

Lier une feuille de style externe

Une feuille de style, cest

Lier une feuille de style externe

Pour quel mdia la feuille de

comporte les informations de style sur

des styles en cascade

Mais au fait, pourquoi

styles dfinis en cascade

feuille de style externe

Quelques proprits pour

h2, h3, h4, h5, h6

du texte & du fond

une image de fond

la proprit color permet de fixer la couleur du

manipuler les couleurs ?

liste de couleur standard

Un peu de couleur (suite)

des couleurs standard :

aqua, black, blue, fuchsia, gray, green,

Un peu de couleur (de fond)

Une image de fond

positionnement fixe ou mobile

bla bla bla blabla bla bla bla

bla bla bla blabla bla bla bla

comment avoir une image au milieu ?

background-position: 50% 50% ;

background-position: 100% 100%;

background-position: 50% 50% ;

background-position: 100% 100%;

Le pixel est la plus petit unit de lcran

1em = 100%, 1.2em = 120%,

correspond une unit dimprimerie

background-position: 10px 50% ;

En C.S.S, en cas derreur, la proprit errone est ignore

Nous reviendrons sur les marges un peu plus tard

Quelques proprits sur les fontes