Sie sind auf Seite 1von 51

Sadok Ben Yahia, PhD sadok.benyahia@fst.rnu.

tn Dpartement des Sciences de lInformatique FST

Les CSS: pourquoi

Objectif: fournir un mcanisme pour associer diffrents styles


un mme document

Article

Prsentations

Contenu

...

Exemple
il arrive frquemment que l'on attribue certains lments des
caractristiques de mise en forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en gras et en couleur bleue. Appeler cette mise en forme "titre" lappliquer chaque nouveau chapitre

Cette dfinition de mise en forme particulire, on va l'appeler feuille de


style.

Ide reprise de MS-WORD

<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1> <H2><B><FONT COLOR="green">- A -</FONT></B></H2> <H3><B><FONT COLOR="red">...a....</FONT></B></H3> <H1><B><FONT COLOR=blue>Titre2</FONT></B></H1> <H2><B><FONT COLOR="green">- B-</FONT></B></H2> <H3><B><FONT COLOR="red">...b....</FONT></B></H3>

STYLE des titres STYLE des sous-titres STYLE du texte STYLE des titres STYLE des sous-titres STYLE du texte

Utilit et avantages
Sparation du contenu et de la mise en forme. Cohsion de la prsentation tout au long du site avec les feuilles de style
externes.

Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et


cela en quelques lignes plutt que de devoir changer un grand nombre de balises.

Un "langage" neuf, comprhensible, simple et logique par rapport au Html


et ses diffrentes versions.

Utilit et avantages
Une faon d'criture concise et nette par rapport au Html qui devient vite
fouillis.

Rduire le temps de chargement des pages.

Palier certaines insuffisances du langage Html (contrle des polices,


contrle de la distance entre les lignes, contrle des marges et des indentations (sans devoir utiliser de tableaux) et ainsi augmenter la crativit des crivains du Web.

Dfinition d'un style


La dfinition de base d'un style est simple :

balise { proprit de style: valeur; proprit de style: valeur }

Exemple : H3 { font-family: Arial; font-style: italic }

Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique.

Exemple: Fizzics1.html (sans feuilles de style)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD>

<BODY>
<H1>New Advances in Physics</H1> <H2>Turning Gold into Lead</H2> In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A>. ... </BODY></HTML>

Rsultat

Exemple: Fizzics1.html (avec feuilles de style)


<HEAD>
<TITLE>Document Title</TITLE> <STYLE TYPE="text/css"> <!-BODY { background: URL(images/confetti-background.jpg) } H1 { text-align: center; font-family: Blackout }

H2 { font-family: MeppDisplayShadow }
STRONG { text-decoration: underline } --> </STYLE> </HEAD>

Rsultat

Dfinition d'un style : Attention !!!!


Les proprits de style sont entoures par des "{" et pas des [ ou des parenthses.

Le couple "proprit de style/valeur" est spar par un double-point (:).

Chaque couple "proprit de style/valeur" est spar par un point-virgule (;).

Pas de limite pour le nombre de couples "proprits de style/valeur".

Dfinition d'un style : Attention !!!!


L'espace entre proprits de style et valeur non obligatoire ( lisibilit du code
source).

Ecrire vos styles sur plusieurs lignes :


H3 {font-family: Arial; font-style: italic; font-color: green}

Attribuer plusieurs valeurs une mme proprit: H3 {font-family: Arial, Helvetica,


sans-serif}

Attribuer un mme style plusieurs balises.: H1, H2, H3 {font-family: Arial; fontstyle: italic}

Dfinition du style : A l'intrieur des balises <HEAD></HEAD>


<HTML><HEAD> on va utiliser des feuilles de style <STYLE type= "text/css <!-La ou les feuille(s) de style --> </STYLE> si le browser ne connat pas les CSS il va les considrer comme des commentaires ce qui suit est du texte et qu'il > s'agit de cascading style sheets (css)

</HEAD>
<BODY>

Dfinition du style : A l'intrieur des balises <Body></Body>


<HTML> <BODY>

<H1 style="font-family: Arial; font-style: italic"> Fac des Sciences </H1> </BODY> </HTML> Le style Arial, italique n'affectera que cette seule balise H1

la syntaxe est lgrement diffrente de la prcdente

<STYLE type="text/css"> H1 { "font-family: Arial; font-style: italic" }

</STYLE>
fonctionne aussi. peu conforme l'esprit des feuilles de style (dfinir un style dtermin valable pour la globalit du document

Dfinition du style : Styles externes


Dfinir une prsentation de style valable pour plusieurs pages crer une page externe qui regroupera toutes les feuilles de style, et faire le lien
Fichier .css (momstyle.css) <HTML> <HEAD> --- Les diffrentes feuilles de style --</HEAD> <BODY> </BODY> </HTML>
prcise qu'il y trouvera une feuille de style externe. avertit le browser qu'il faudra raliser un lien

<HTML> <HEAD> <LINK rel=stylesheet type="text/css" href=monstyle.css">

</HEAD>
l'information est du texte et du genre cascading style sheets (css).

le chemin d'accs et le nom du fichier lier

Atelier : feuille de style externe


feuille de style : une page fond blanc, avec une police de caractre par
dfaut Verdana noire, un titre de premier niveau bleu marine centr, un titre de deuxime niveau bleu dcal de 15 pixels, des liens passant du vert au gris avec un petit effet rouge non soulign au passage de la souris

html,body,p,ul,li,td { font-size : 10pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; }

h1 { font-size : 20pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : navy; text-align: center; }

h2 { font-size : 14pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : blue; padding-left:15px; }

a:link {color: green; text-decoration:underline;} a:visited {color: gray; text-decoration:underline;} a:hover {color:red; text-decoration:none;}

Notion de Classe
Affecter des styles diffrents une mme balise les classes
balise { proprit de style: valeur } balise.nom_de_classe { proprit de style: valeur } .nom_de_classe { proprit de style: valeur }
(.) devant le nom de classe est indispensable

faire appel une classe

<balise class="nom_de-classe"> .... </balise>

Je souhaite mettre ce qui est important dans le texte en gras et en bleu. : .essentiel { font-weight: bold; font-color: #000080 }

dans le document Html, <P class=".essentiel"> ... blabla ... </P> <H1 class=".essentiel">Titre 1</H1> <TABLE><TR><TD class=".essentiel">cellule</TD></TD>...

Notion de pseudo-classe
Applicable concrtement la balise A

Celle ci peut connatre plusieurs contextes de formes selon que le lien est inactif, visit, ou en train d'tre visit. on peut dfinir alors pour chacun des tats de la balise une mise en forme particulire.
Exemple: A:link {font-family:Arial; color:"#0099FF"; font-size:12px; cursor:text;} A:visited {font-family:Arial; color:blue; font-size:12px; cursor:text;} A:active {color:red;} A:hover {color:red; text-decoration:none;}

Principe de l'hritage (ID)


Certains lments de la page HTML hritent des proprits des styles dfinis.
Exemple 1 style de H1 : couleur turquoise en arrire-plan est applique Lapplication de la balise H1 dans le corps de la page peut tre combine avec d`autres balises : <H1> Le principe de <I> l'hritage </I> </H1> la balise italique hritera des proprits du style H1 (affiche galement la couleur de fond turquoise). Exemple 2

Style 1 : mon propre style Style 2 : mon propre style + style 1 Style 3 : mon propre style +style 1 + style 2

Les feuilles de style en cascade


En cas de concurrence entre plusieurs lments de style notion de "cascade"
ou d'ordre de priorit.

La concurrence provient des diffrentes possibilits de localisation de feuilles de


style :

CSS importe (dans un fichier externe avec l'extension .css) CSS Globale (dans la balise HEAD du document) CSS Intra-lignes (dans le BODY du document)
Rgle de priorit appliquer pour la prsentation du document la feuille de style la plus proche de l'lment.

un style spcifi dans le BODY sera retenu par rapport un style dclar dans un fichier externe.

cependant

contourner ces rgles de priorit par la dclaration ! important

Rgle de priorit : Quel fond dcran


<HEAD> <STYLE TYPE="text/css"> <!-BODY { background-color : #0000FF } --> </STYLE> </HEAD> <BODY STYLE="background-color:#FF0000; "> Le fond d'cran sera ???? <HEAD> <STYLE TYPE="text/css"> <!-BODY { background-color : #0000FF ! important;} --> </STYLE> </HEAD> <BODY STYLE="background-color:#FF0000; "> Le fond d'cran sera ????

Les balises structurales DIV et SPAN

balises Structurales qui craient ainsi des petits blocs particuliers dans le document sans devoir repasser par les lments structurels du Html classique.

DIV est une balise de division qui permet de dfinir un bloc de texte particulier ( permet de regrouper plusieurs paragraphes ou de dlimiter une zone comportant plusieurs paragraphes). Procdures :

1. Intgrer chaque grande portion de document dans une balise DIV


particulire.

2. Utiliser une feuille de style pour chaque DIV.

DIV : exemples
<html> <HEAD> <STYLE type="text/css"> .zone{font-size: x-small} </STYLE> </HEAD> <BODY> La balise <DIV> <DIV class=zone> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </DIV> </Body> </html> <HTML> <HEAD> <STYLE type="text/css"> .zone{font-size: x-small} </STYLE> </HEAD> <BODY> La balise <DIV> <DIV class=zone> <P>Commentaire :</P> <P>N'oubliez pas l'attribut class!</P> </DIV> </BODY> </HTML>

SPAN
balise de marquage : considrer une petite portion particulire de texte. Elle va servir mettre en valeur des citations, des exemples, des extraits ... Frquemment utilise avec des feuilles de style intra-lignes.

<HTML> <HEAD> <STYLE type="text/css"> .element{font-size: x-large; color: navy} </STYLE> </HEAD> <BODY> <P> Un monde de <SPAN class=element> gants</SPAN> </P> </BODY> </HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML> <HEAD> <TITLE>The 23rd Psalm</TITLE> <STYLE> <!-SPAN { float: left; font-family: "Cushing Book"; font-size: 75pt }

-->
</STYLE> </HEAD> <BODY>

<H2 ALIGN="CENTER">
The 23rd Psalm (King James Version)</H2> <SPAN>T</SPAN>he LORD is my shepherd; I shall not want. He maketh me to lie down in green pastures: he leadeth me beside the still waters.

Position absolue ou relative ?


Grce au CSS, il est dsormais possible de positionner, au pixel prs, du texte

ou une image avec les feuilles de style

Position spcifie le type de positionnement du document. Il en existe 3 types:

Static (le type par dfaut)

Absolue

relative

Position absolue
La position absolue {position: absolute} se dtermine par rapport au coin suprieur gauche de la fentre du browser.

Les coordonnes de ce point sont top = 0 et left = 0.

Il y a 3 options pour top et left : auto (par dfaut), pixels (vous prcisez la valeur suivie de px), pourcentage (la mme chose suivie de %).

Les coordonnes d'un point de haut en bas pour top et de gauche droite pour left.

utiliser SPAN ou DIV DIV est prfrable pour les grands textes qu'elle fera prcder et suivre d'un saut de ligne; SPAN, conue comme simple marqueur, sera utilise pour encadrer un paragraphe.

Position relative
La position relative {position: relative} se dtermine par rapport d'autres lments

de la page, par exemple un lment du code Html.

Un positionnement relatif sera donc trait dans le flux du document (trait de bas en

haut), et fera rfrence pour son positionnement l'lment qui lui est

immdiatement suprieur. Cette proprit est valable pour tous les types de balises.

Exemples : Positionnement
Absolue <html> <head> .toto { Image : 1.jpg

position:absolute; top:10px; left:10px; }


<BODY BGCOLOR="#000080" TEXT="#FF0000"> <IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50> <B><DIV CLASS="toto">Toto et titi</DIV></B> </body> </html> relative <html> <head> .toto { position:relative; top:10px; left:10px; } <BODY BGCOLOR="#000080" TEXT="#FF0000"> <IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50> <B><DIV CLASS="toto">Toto et tata</DIV></B> </body> </html>

Attributs : Clip

Applicable uniquement aux lments de position absolue.

spcifier la zone de visibilit du document l'endroit o le document contenu dans

les balises pourra ne plus tre visible s'il dpasse les paramtres de largeurs et de

hauteurs fixs par clip.

La syntaxe :

clip:rect(haut,droite,bas,gauche)

varie selon les navigateurs

Clip : Exemple

L'image 1.jpg +CLIP <HEAD> <STYLE TYPE="text/css"> <!-.toto { position:absolute; top:10px; left:10px;

clip:rect(0, 25, 25, 0);


} --> </STYLE> </HEAD> <BODY BGCOLOR="#000080" TEXT="#FF0000"> <DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV> </BODY> les de l'image ont disparu !

Lattribut Z-index
Dfinit l'empilement des feuilles de styles indique l'axe vertical d'empilement, ou la

priorit d'affichage entre lments superposs.

S'applique tous les lments de position relative ou absolue.

Plus l'index est grand, plus l'lment est situ dessus. Plus il est bas, plus il est situ

dessous.

Deux lments de mme index vont se superposer trs pratique pour afficher du

texte sur une image, ou vice-versa.

Lattribut Z-index
<STYLE TYPE="text/css"> <!-.toto { position:absolute; top:10px; left:10px; } .titi { position:absolute; top:30; left:30; z-index:2; } --> </STYLE> </HEAD> <BODY BGCOLOR="#000080" TEXT="#FF0000"> <DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV> <DIV CLASS="titi"><IMG SRC="2.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV>

Placer le z-index:2 sur la classe Toto

Les couleurs Prdfinies


16 noms rservs de couleur disponibles dans la spcification CSS1 Ces couleurs prdfinies issues de Html 4.0 (prises de la palette VGA)

blue #0000FF (0,0,255)

fuchsia #FF00FF (255,0,255)

lime #00FF00 (0,255,0)

maroon #800000 (128,0,0)

purple #800080 (128,0,128)

red #FF0000 (255,0,0)

white #FFFFFF (255,255,255)

yellow #FFFF00 (255,255,0)

aqua #00FFFF (0,255,255)

black #000000 (0,0,0)

gray #808080 (128,128,128)

green #008000 (0,128,0)

navy #000080 (0,0,128)

olive #808000 (128,128,0)

silver #C0C0C0 (192,192,192)

teal #008080 (0,128,128)

Codification des couleurs en CSS


Par un nom fonctionnel (voir liste). Par la valeur hexadcimale compose de 6 chiffres prcde d'un dise # :
#000000, #FFFFCC. soit comme en Html mais sans les guillemets.

Par une valeur hexadcimale 3 chiffres Chaque chiffre est alors


implicitement dupliqu : ainsi #fd3 est quivalent #ffdd33.

Par la notation fonctionnelle rgb qui prend 3 arguments en l'occurrence 3


nombres entiers compris entre 0 et 255 ou 3 pourcentages entre 0% et 100%. . color : rgb(255,0,0); color : rgb(50%,50%,50%);

Codification des couleurs en CSS : Liste


Pourcentage
aqua black blue fuschia gray green lime rgb(0%,100%,100%) rgb(0%,0%,0%) rgb(0%,0%,100%) rgb(100%,0%,100%) rgb(50%,50%,50%) rgb(0%,50%,0%) rgb(0%,100%,0%)

Nombre entier
rgb(0,255,255) rgb(0,0,0) rgb(0,0,255) rgb(255,0,255) rgb(128,128,128) rgb(0,128,0) rgb(0,255,0) #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00

Hexadecimal
#0FF #000 #00F #F0F #888 #080 #0F0

maroon
navy olive purple red silver teal white yellow

rgb(50%,0%,0%)
rgb(0%,0%,50%) rgb(50%,50%,0%) rgb(50%,0%,50%) rgb(100%,0%,0%) rgb(75%,75%,75%) rgb(0%,50%,50%) rgb(100%,100%,100 %) rgb(100%,100%,0%)

rgb(128,0,0)
rgb(0,0,128) rgb(128,128,0) rgb(128,0,128) rgb(255,0,0) rgb(192,192,192) rgb(0,128,128) rgb(255,255,255) rgb(255,255,0)

#800000
#000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFFFF #FFFF00

#800
#008 #880 #808 #F00 #BBB #088 #FFF #FF0

Les styles de police


font-family : dfinit un nom de police ou une famille de police <nom> ou <famille> police prcise (Arial, Times, Helvetica...) ou famille (serif, sans-serif, cursive, fantasy, monospace)

H3 {font-family: Arial}
font-style : dfinit le style de l'criture normal ou italique ou oblique

H3 {font-style: italic}
font-weight : dfinit l'paisseur de la police normal ou bold ou bolder ou lighter ou valeur numrique soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)

P {font-weight: bold}

Les styles de police


font-size : dfinit la taille de la police xx-small ou x-small ou small ou mdium ou large ou x-large ou xx-large ou larger ou smaller ou taille prcise en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

P {font-size: 12pt}
font-variant : dfinit une variante par rapport la normale normal ou small-caps P {font-variant: small-caps}

font : raccourci pour les diffrentes proprits de police

{font: bold italic}

Les styles du texte


text-align : dfinit l'alignement du texte left ou center ou right

H1 {text-align: center}
text-indent : dfinit un retrait dans la premire ligne d'un bloc de texte souvent utilis avec <P>, n'oubliez pas dans ce cas </P>. spcifi en inches (in) ou en centimtres (cm) ou en pixels (px)

P {text-indent: 1cm}

text-decoration : dfinit une dcoration (?) du texte, soit barr, clignotant, etc. blink ou underline ou line-through ou overline ou none

A:visited {text-decoration: blink }

Les styles du texte


text-transform : dfinit la casse du texte (majuscule, minuscule) uppercase (met les caractres en majuscules) ou lowercase (met les caractres en minuscules) ou capitalize (met le premier caractre en majuscule)

P {text-transform: uppercase}
Color : dfinit la couleur du texte par exemple en hexadcimal H3 {color: #000080}

word-spacing : dfinit l'espace entre les mots en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

P {word-spacing: 5pt}

Les styles du texte


letter-spacing : dfinit l'espace entre les lettres spcifi en points (pt), inches (in),

centimtres (cm), pixels (px) ou pourcentage (%)

P {letter-spacing: 2pt}

line-height : dfinit l'interligne soit l'espace entre les lignes du texte en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

P {line-height: 10pt}

Les styles du texte


Width : dtermine la longueur d'un lment de texte ou d'une image en points

(pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

H1 {width: 200px}
height : dtermine la hauteur d'un lment de texte ou d'une image en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

H1 {heigh: 100px}
white-space : espace ou blanc normal ou pre ou nowrap PRE

{white-space: pre}

Les arrire-plans
background-color : dfinit la couleur de l'arrire-plan couleur (par exemple en hexadcimal) ou transparent

H1 {background-color: #000000}
background-image : dfinit l'image de l'arrire-plan URL de l'image

BODY {background-image: image.gif}


background-repeat : dfinit la faon de rpter l'image d'arrire-plan repeat ou no-repeat ou repeat-x (x = nombre de rptitions horizontales) ou repeat-y (y = nombre de rptitions verticales)

P {background-image: image.gif; background-repeat: repeat-4}

Les arrire-plans
background-attachment : spcifie si l'image d'arrire-plan reste fixe avec les dplacements de l'cran scroll ou fixed BODY {background-image: image.gif; background-attachement: fixed}

background-position : spcifie la position de l'image d'arrire-plan par rapport au coin suprieur gauche de la fentre {1, 2} {top ou center ou bottom , left ou center ou right} ou en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

BODY {background-image: img.gif; background-position: right top}


background : raccourci pour les diffrentes proprits d'arrire-plan

P {background: image.gif fixed repeat}

Les marges
margin-top: dtermine la valeur de la marge suprieure en unit de longueur ou auto { margin-top: 5px}

margin-right : dtermine la valeur de la marge droite en unit de longueur ou auto

{ margin-right: 5px }
margin-bottom :dtermine la valeur de la marge infrieure en unit de longueur ou auto

{ margin-bottom: 5px }

Les marges
margin-left : dtermine la valeur de la marge gauche en unit de longueur ou auto { margin-left: 5px }

Margin : regroupe les diffrentes proprits de la marge

Les bords et les "enrobages"


border-top-width : donne l'paisseur du bord suprieur thin ou medium ou thick ou spcifi par l'auteur H3 {border-top-width: thin}

border-right-width: donne l'paisseur du bord droit thin ou medium ou thick ou spcifi par l'auteur

H3 {border-right-width: medium}
border-bottom-width: donne l'paisseur du bord infrieur thin ou medium ou thick ou spcifi par l'auteur

H3 {border-bottom-width: thick}

Les bords et les "enrobages"


border-left-width : donne l'paisseur du bord gauche thin ou medium ou thick ou spcifi par l'auteur H3 {border-left-width: 0.5cm}

border-width : regroupe les diffrentes proprits de border-width

border-color : dtermine la couleur de la bordure

H3 {border-color: yellow}

Les bords et les "enrobages"


border-style : dtermine le style du trait de la bordure none ou solid ou dotted ou dashed ou double ou groove ou ridge ou inset ou outset {border-style: solid dashed}

border : regroupe toutes les proprits des bords

padding-top : valeur de remplissage haut entre l'lment et le bord en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

H3 {padding-top: 3px}

Les bords et les "enrobages"


padding-right : valeur de remplissage droite entre l'lment et le bord en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%) H3 {padding-right: 3px}

padding-bottom : valeur de remplissage bas entre l'lment et le bord en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

H3 {padding-bottom: 3px}
padding-left : valeur de remplissage gauche entre l'lment et le bord en points (pt), inches (in), centimtres (cm), pixels (px) ou pourcentage (%)

H3 {padding-left: 3px}

Les listes
list-style-type : dtermine le type de puces ou de numrotation disc ou circle ou square decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha OL {list-style-type: square}

list-style-image : permet de remplacer les puces par une image url ou none

OL {list-style-image: image.gif}
list-style-position : spcifie si les puces sont l'intrieur ou l'extrieur du texte inside ou outside

UL {list-style-position: inside}
list-style : regroupe toutes les proprits de liste