Cours CSS

Sadok Ben Yahia, PhD
sadok.benyahia@fst.rnu.tn
Département des Sciences de l’Informatique

FST
Les CSS: pourquoi
 Objectif: fournir un mécanisme pour associer différents styles
à un même document
Article
Présentations
Contenu
...
Exemple
 il arrive fréquemment que l'on attribue à certains éléments des

caractéristiques 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"  l’appliquer à chaque nouveau chapitre
 Cette définition de mise en forme particulière, on va l'appeler feuille de

style.
 Idée reprise de MS-WORD
<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1> STYLE des titres

<H2><B><FONT COLOR="green">- A -</FONT></B></H2> STYLE des sous-titres
<H3><B><FONT COLOR="red">...a....</FONT></B></H3> STYLE du texte
<H1><B><FONT COLOR=blue>Titre2</FONT></B></H1> STYLE des titres
<H2><B><FONT COLOR="green">- B-</FONT></B></H2> STYLE des sous-titres
<H3><B><FONT COLOR="red">...b....</FONT></B></H3> STYLE du texte
Utilité et avantages
 Séparation du contenu et de la mise en forme.
 Cohésion de la présentation 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 plutôt que de devoir changer un grand nombre de
balises.
 Un "langage" neuf, compréhensible, simple et logique par rapport au Html

et à ses différentes versions.
Utilité et avantages
 Une façon d'écriture concise et nette par rapport au Html qui devient vite
fouillis.
 Réduire le temps de chargement des pages.
 Palier certaines insuffisances du langage Html (contrôle des polices,
contrôle de la distance entre les lignes, contrôle des marges et des
indentations (sans devoir utiliser de tableaux) et ainsi augmenter la
créativité des écrivains du Web.

Définition d'un style
La définition de base d'un style est simple :
balise { propriété de style: valeur; propriété 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>
Résultat
Exemple: Fizzics1.html (avec feuilles de style)
<HEAD>
<TITLE>Document Title</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
Résultat
Définition d'un style : Attention !!!!
 Les propriétés de style sont entourées par des "{" et pas des [ ou des parenthèses.
 Le couple "propriété de style/valeur" est séparé par un double-point (:).
 Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).
 Pas de limite pour le nombre de couples "propriétés de style/valeur".

Définition d'un style : Attention !!!!
 L'espace entre propriétés 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 même propriété: H3 {font-family: Arial, Helvetica,

sans-serif}
 Attribuer un même style à plusieurs balises.: H1, H2, H3 {font-family: Arial; font-
style: italic}
Définition du style : A l'intérieur des balises <HEAD></HEAD>
<HTML><HEAD>
ce qui suit est du texte et qu'il
on va utiliser des <STYLE type= "text/css“ > s'agit de cascading style sheets
feuilles de style (css)
 si le browser ne connaît pas les CSS il va

les considérer comme des commentaires
</STYLE>
</HEAD>
<BODY>
Définition du style : A l'intérieur des balises <Body></Body>
<HTML> <BODY>
<H1 style="font-family: Arial;
font-style: italic">
Fac des Sciences </H1>
</BODY> Le style Arial, italique n'affectera que

cette seule balise H1
</HTML>
 la syntaxe est légèrement différente de la précédente
 <STYLE type="text/css">
H1 { "font-family: Arial; font-style: italic" }
</STYLE>
fonctionne aussi.
 peu conforme à l'esprit des feuilles de style (définir un style déterminé valable
pour la globalité du document
Définition du style : Styles externes
Définir une présentation de style valable pour plusieurs pages
 créer une page externe qui regroupera toutes les feuilles de style, et faire le
lien
avertit le browser qu'il
faudra réaliser un lien
Fichier .css (momstyle.css)
<HTML> <HEAD>
<HTML>
<LINK rel=stylesheet type="text/css" href=“monstyle.css">
<HEAD>
</HEAD>
--- Les différentes
feuilles de style ---
l'information est du
</HEAD> texte et du genre
cascading style
<BODY> sheets (css).
</BODY>
le chemin d'accès et
</HTML> précise qu'il y trouvera
une feuille de style
le nom du fichier à
externe. lier
Atelier : feuille de style externe
 feuille de style : une page à fond blanc, avec une police de caractère par
défaut Verdana noire, un titre de premier niveau bleu marine centré, un
titre de deuxième niveau bleu décalé 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 { h1 { h2 {
font-size : 10pt; font-size : 20pt; font-size : 14pt;
font-family : Verdana, Arial, font-family : Verdana, Arial, font-family : Verdana, Arial,
Helvetica, Geneva, sans-serif; Helvetica, Geneva, sans-serif; Helvetica, Geneva, sans-serif;
color : black; color : navy; color : blue;
text-align: center; padding-left:15px;
background-color : white;
}
} }
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 différents à une même balise  les classes
balise { propriété de style: valeur }  balise.nom_de_classe { propriété de style: valeur }

.nom_de_classe { propriété 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 concrètement à la balise A
Celle ci peut connaître plusieurs contextes de formes selon que le lien est
inactif, visité, ou en train d'être visité.  on peut définir alors pour chacun
des états de la balise une mise en forme particulière.
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'héritage (ID)
 Certains éléments de la page HTML héritent des propriétés des styles définis.
Exemple 1
style de H1 : couleur turquoise en arrière-plan est appliquée
L’application de la balise H1 dans le corps de la page peut être combinée avec

d`autres balises : <H1> Le principe de <I> l'héritage </I> </H1>
 la balise italique héritera des propriétés 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 éléments de style  notion de "cascade"
ou d'ordre de priorité.
 La concurrence provient des différentes possibilités de localisation de feuilles de

style :
CSS importée (dans un fichier externe avec l'extension .css)
CSS Globale (dans la balise HEAD du document)
CSS Intra-lignes (dans le BODY du document)
Règle de priorité appliquer pour la présentation du document la feuille de style la plus

proche de l'élément.
un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un
fichier externe.
cependant
contourner ces règles de priorité par la déclaration ! important
Règle de priorité : Quel fond d’écran
<HEAD>

</STYLE>
</HEAD>
<BODY STYLE="background-color:#FF0000;
">
Le fond d'écran sera… ????
<HEAD>

</STYLE>
</HEAD>
<BODY STYLE="background-color:#FF0000; ">
Le fond d'écran sera… ????

Les balises structurales DIV et SPAN
 balises Structurales qui créaient ainsi des petits blocs particuliers dans le
document sans devoir repasser par les éléments structurels du Html
classique.
DIV est une balise de division qui permet de définir un bloc de texte
particulier ( permet de regrouper plusieurs paragraphes ou de délimiter une
zone comportant plusieurs paragraphes).
Procédures :
1. Intégrer chaque grande portion de document dans une balise DIV

particulière.
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>
.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 : considérer une petite portion particulière

de texte.
•Elle va servir à mettre en valeur des citations, des exemples,
des extraits ...
•Fréquemment utilisée avec des feuilles de style intra-lignes.
<HTML>
<HEAD>
.element{font-size: x-large; color: navy}
</STYLE>
</HEAD>
<BODY>
<P> Un monde de <SPAN class=element> géants</SPAN>
</P>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>The 23rd Psalm</TITLE>
<STYLE>

</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 ?
 Grâce au CSS, il est désormais possible de positionner, au pixel près, du texte
ou une image avec les feuilles de style
Position spécifie le type de positionnement du document. Il en existe 3 types:
Static (le type par défaut)
Absolue
relative
Position absolue
La position absolue {position: absolute} se détermine par rapport au coin supérieur
gauche de la fenêtre du browser.
Les coordonnées de ce point sont top = 0 et left = 0.
Il y a 3 options pour top et left :

auto (par défaut),
pixels (vous précisez la valeur suivie de px),
pourcentage (la même chose suivie de %).
Les coordonnées d'un point de haut en bas pour top et de gauche à droite pour left.
utiliser SPAN ou DIV
DIV est préférable pour les grands textes qu'elle fera précéder et suivre d'un saut de ligne;
SPAN, conçue comme simple marqueur, sera utilisée pour encadrer un paragraphe.
Position relative
La position relative {position: relative} se détermine par rapport à d'autres éléments
de la page, par exemple un élément du code Html.
Un positionnement relatif sera donc traité dans le flux du document (traité de bas en
haut), et fera référence pour son positionnement à l'élément qui lui est
immédiatement supérieur. Cette propriété est valable pour tous les types de balises.
Exemples : Positionnement
Absolue
Image : 1.jpg
<html> <head>
.toto {
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; }
<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 éléments de position absolue.
spécifier la zone de visibilité du document l'endroit où le document contenu dans
les balises pourra ne plus être visible s'il dépasse les paramètres de largeurs et de
hauteurs fixés par clip.
La syntaxe : clip:rect(haut,droite,bas,gauche)
 varie selon les navigateurs

Clip : Exemple
L'image 1.jpg +CLIP
<HEAD>

</STYLE>
</HEAD>
<DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0 WIDTH=50
HEIGHT=50></DIV>
</BODY>
L’attribut Z-index
Définit l'empilement des feuilles de styles indique l'axe vertical d'empilement, ou la
priorité d'affichage entre éléments superposés.
S'applique à tous les éléments de position relative ou absolue.
 Plus l'index est grand, plus l'élément est situé dessus. Plus il est bas, plus il est situé
dessous.
Deux éléments de même index vont se superposer  très pratique pour afficher du
texte sur une image, ou vice-versa.

L’attribut Z-index

</STYLE>
</HEAD>
<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 Prédéfinies
16 noms réservés de couleur disponibles dans la spécification CSS1
 Ces couleurs prédéfinies issues de Html 4.0 (prises de la palette VGA)
blue fuchsia lime maroon

#0000FF #FF00FF #00FF00 #800000
(0,0,255) (255,0,255) (0,255,0) (128,0,0)
purple red white yellow

#800080 #FF0000 #FFFFFF #FFFF00
(128,0,128) (255,0,0) (255,255,255) (255,255,0)
aqua black gray green

#00FFFF #000000 #808080 #008000
(0,255,255) (0,0,0) (128,128,128) (0,128,0)
navy olive silver teal

#000080 #808000 #C0C0C0 #008080
(0,0,128) (128,128,0) (192,192,192) (0,128,128)
Codification des couleurs en CSS
Par un nom fonctionnel (voir liste).
Par la valeur hexadécimale composée de 6 chiffres précédée d'un dièse # :

#000000, #FFFFCC.
soit comme en Html mais sans les guillemets.
Par une valeur hexadécimale à 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 Nombre entier Hexadecimal
aqua rgb(0%,100%,100%) rgb(0,255,255) #00FFFF #0FF
black rgb(0%,0%,0%) rgb(0,0,0) #000000 #000
blue rgb(0%,0%,100%) rgb(0,0,255) #0000FF #00F
fuschia rgb(100%,0%,100%) rgb(255,0,255) #FF00FF #F0F
gray rgb(50%,50%,50%) rgb(128,128,128) #808080 #888
green rgb(0%,50%,0%) rgb(0,128,0) #008000 #080
lime rgb(0%,100%,0%) rgb(0,255,0) #00FF00 #0F0
maroon rgb(50%,0%,0%) rgb(128,0,0) #800000 #800
navy rgb(0%,0%,50%) rgb(0,0,128) #000080 #008
olive rgb(50%,50%,0%) rgb(128,128,0) #808000 #880
purple rgb(50%,0%,50%) rgb(128,0,128) #800080 #808
red rgb(100%,0%,0%) rgb(255,0,0) #FF0000 #F00
silver rgb(75%,75%,75%) rgb(192,192,192) #C0C0C0 #BBB
teal rgb(0%,50%,50%) rgb(0,128,128) #008080 #088
white rgb(100%,100%,100 rgb(255,255,255) #FFFFFF #FFF
%)
yellow rgb(100%,100%,0%) rgb(255,255,0) #FFFF00 #FF0
Les styles de police
 font-family : définit un nom de police ou une famille de police <nom> ou
<famille>
police précise (Arial, Times, Helvetica...) ou famille (serif, sans-serif, cursive,
fantasy, monospace)
 H3 {font-family: Arial}
font-style : définit le style de l'écriture normal ou italique ou oblique
 H3 {font-style: italic}
font-weight : définit l'épaisseur de la police normal ou bold ou bolder ou lighter ou
valeur numérique soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
 P {font-weight: bold}
Les styles de police
font-size : définit la taille de la police xx-small ou x-small ou small ou médium ou
large ou x-large ou xx-large ou larger ou smaller ou taille précise en points (pt),
inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
 P {font-size: 12pt}
font-variant : définit une variante par rapport à la normale normal ou
small-caps
 P {font-variant: small-caps}
font : raccourci pour les différentes propriétés de police
{font: bold italic}

Les styles du texte
 text-align : définit l'alignement du texte left ou center ou right
 H1 {text-align: center}
text-indent : définit un retrait dans la première ligne d'un bloc de texte
souvent utilisé avec <P>, n'oubliez pas dans ce cas </P>. spécifié en inches
(in) ou en centimètres (cm) ou en pixels (px)
 P {text-indent: 1cm}
text-decoration : définit une décoration (?) 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 : définit la casse du texte (majuscule, minuscule)

 uppercase (met les caractères en majuscules) ou
 lowercase (met les caractères en minuscules) ou
 capitalize (met le premier caractère en majuscule)
 P {text-transform: uppercase}
Color : définit la couleur du texte par exemple en hexadécimal
 H3 {color: #000080}
word-spacing : définit l'espace entre les mots en points (pt), inches (in),
centimètres (cm), pixels (px) ou pourcentage (%)
 P {word-spacing: 5pt}
Les styles du texte
letter-spacing : définit l'espace entre les lettres spécifié en points (pt), inches (in),
centimètres (cm), pixels (px) ou pourcentage (%)
 P {letter-spacing: 2pt}
line-height : définit l'interligne soit l'espace entre les lignes du texte en
points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
 P {line-height: 10pt}
Les styles du texte
Width : détermine la longueur d'un élément de texte ou d'une image en points
(pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
 H1 {width: 200px}
height : détermine la hauteur d'un élément de texte ou d'une image en points
(pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
 H1 {heigh: 100px}
white-space : espace ou blanc normal ou pre ou nowrap PRE
{white-space: pre}
Les arrière-plans
 background-color : définit la couleur de l'arrière-plan
couleur (par exemple en hexadécimal) ou transparent
 H1 {background-color: #000000}
background-image : définit l'image de l'arrière-plan URL de l'image
 BODY {background-image: image.gif}
background-repeat : définit la façon de répéter l'image d'arrière-plan

repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou
repeat-y (y = nombre de répétitions verticales)
 P {background-image: image.gif; background-repeat: repeat-4}

Les arrière-plans
background-attachment : spécifie si l'image d'arrière-plan reste fixe avec les
déplacements de l'écran scroll ou fixed
 BODY {background-image: image.gif; background-attachement: fixed}
background-position : spécifie la position de l'image d'arrière-plan par rapport

au coin supérieur gauche de la fenêtre {1, 2}
{top ou center ou bottom , left ou center ou right} ou en points (pt),
inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
 BODY {background-image: img.gif; background-position: right top}
 background : raccourci pour les différentes propriétés d'arrière-plan
 P {background: image.gif fixed repeat}

Les marges
margin-top: détermine la valeur de la marge supérieure en unité de longueur ou
auto
 { margin-top: 5px}
margin-right : détermine la valeur de la marge droite en unité de longueur ou

auto
 { margin-right: 5px }
 margin-bottom :détermine la valeur de la marge inférieure en unité de

longueur ou auto
 { margin-bottom: 5px }
Les marges
margin-left : détermine la valeur de la marge gauche en unité de longueur ou

auto
 { margin-left: 5px }
Margin : regroupe les différentes propriétés de la marge

Les bords et les "enrobages"
 border-top-width : donne l'épaisseur du bord supérieur thin ou medium ou thick
ou spécifié par l'auteur
 H3 {border-top-width: thin}
border-right-width: donne l'épaisseur du bord droit thin ou medium ou thick ou

spécifié par l'auteur
 H3 {border-right-width: medium}
 border-bottom-width: donne l'épaisseur du bord inférieur thin ou medium ou

thick ou spécifié par l'auteur
 H3 {border-bottom-width: thick}
 border-left-width : donne l'épaisseur du bord gauche thin ou medium ou thick
ou spécifié par l'auteur
 H3 {border-left-width: 0.5cm}
border-width : regroupe les différentes propriétés de border-width
 border-color : détermine la couleur de la bordure
 H3 {border-color: yellow}
 border-style : détermine 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 propriétés des bords
 padding-top : valeur de remplissage haut entre l'élément et le bord en

 H3 {padding-top: 3px}
 padding-right : valeur de remplissage droite entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
 H3 {padding-right: 3px}
 padding-bottom : valeur de remplissage bas entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
 H3 {padding-bottom: 3px}
 padding-left : valeur de remplissage gauche entre l'élément et le bord en

 H3 {padding-left: 3px}
Les listes
 list-style-type : détermine le type de puces ou de numérotation 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 : spécifie si les puces sont à l'intérieur ou à l'extérieur du

texte inside ou outside
 UL {list-style-position: inside}
 list-style : regroupe toutes les propriétés de liste

Cours CSS

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Cours CSS

Загружено:

Авторское право:

Доступные форматы

Sadok Ben Yahia, PhD

Département des Sciences de l’Informatique

 il arrive fréquemment que l'on attribue à certains éléments des

Appeler cette mise en forme "titre"  l’appliquer à chaque nouveau chapitre

 Cette définition de mise en forme particulière, on va l'appeler feuille de

 Idée reprise de MS-WORD

<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1> STYLE des titres

 Séparation du contenu et de la mise en forme.

 Cohésion de la présentation tout au long du site avec les feuilles de style

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

 Un "langage" neuf, compréhensible, simple et logique par rapport au Html

 Réduire le temps de chargement des pages.

 Palier certaines insuffisances du langage Html (contrôle des polices,

contrôle de la distance entre les lignes, contrôle des marges et des

indentations (sans devoir utiliser de tableaux) et ainsi augmenter la

créativité des écrivains du Web.

La définition de base d'un style est simple :

balise { propriété de style: valeur; propriété de style: valeur }

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

Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document,

 Le couple "propriété de style/valeur" est séparé par un double-point (:).

 Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).

 Pas de limite pour le nombre de couples "propriétés de style/valeur".

 Ecrire vos styles sur plusieurs lignes :

 Attribuer plusieurs valeurs à une même propriété: H3 {font-family: Arial, Helvetica,

La ou les feuille(s) de style

--> si le browser ne connaît pas les CSS il va

<H1 style="font-family: Arial;

Fac des Sciences </H1>

</BODY> Le style Arial, italique n'affectera que

 la syntaxe est légèrement différente de la précédente

H1 { "font-family: Arial; font-style: italic" }

a:link {color: green; text-decoration:underline;}

balise { propriété de style: valeur }  balise.nom_de_classe { propriété 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. :

dans le document Html,

Applicable concrètement à la balise A

des états de la balise une mise en forme particulière.

L’application de la balise H1 dans le corps de la page peut être combinée avec

 la balise italique héritera des propriétés du style H1 (affiche également la couleur

Style 1 : mon propre style

 La concurrence provient des différentes possibilités de localisation de feuilles de

Règle de priorité appliquer pour la présentation du document la feuille de style la plus

Le fond d'écran sera… ????

Le fond d'écran sera… ????

1. Intégrer chaque grande portion de document dans une balise DIV

2. Utiliser une feuille de style pour chaque DIV.

• balise de marquage : considérer une petite portion particulière

•Fréquemment utilisée avec des feuilles de style intra-lignes.

 Grâce au CSS, il est désormais possible de positionner, au pixel près, du texte

ou une image avec les feuilles de style

Position spécifie le type de positionnement du document. Il en existe 3 types:

Static (le type par défaut)

Les coordonnées de ce point sont top = 0 et left = 0.

Il y a 3 options pour top et left :

utiliser SPAN ou DIV

de la page, par exemple un élément du code Html.

Applicable uniquement aux éléments de position absolue.

spécifier la zone de visibilité du document l'endroit où le document contenu dans

hauteurs fixés par clip.

La syntaxe : clip:rect(haut,droite,bas,gauche)