CSS : Cascading Style sheets Sadok Ben Yahia, PhD [e-mail] D

1
CSS Cascading Style sheetsSadok Ben Yahia,
PhDsadok.benyahia_at_fst.rnu.tn Département des
Sciences de lInformatiqueFST
2
Les CSS pourquoi

• Objectif fournir un mécanisme pour associer
  différents styles à un même document

3
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" ?
  lappliquer à 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

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

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

6
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 ltH3gt auront comme style Arial et italique.

7
Exemple Fizzics1.html (sans feuilles de style)

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
  Transitional//EN"gt
• ltHTMLgt
• ltHEADgt ltTITLEgtNew Advances in Physicslt/TITLEgt
  lt/HEADgt
• ltBODYgt
• ltH1gtNew Advances in Physicslt/H1gt
• ltH2gtTurning Gold into Leadlt/H2gt
• In a startling breakthrough, scientist B.O. "Gus"
  Fizzics
• has invented a ltSTRONGgtpracticallt/STRONGgt
  technique for
• transmutation! For more details, please see
• ltA HREF"give-us-your-gold.html"gtour
  transmutation thesislt/Agt.
• ...
• lt/BODYgtlt/HTMLgt

8
Résultat
9
Exemple Fizzics1.html (avec feuilles de style)

• ltHEADgt
• ltTITLEgtDocument Titlelt/TITLEgt
• ltSTYLE TYPE"text/css"gt
• lt!--
• BODY background URL(images/confetti-backgro
  und.jpg)
• H1 text-align center
• font-family Blackout
• H2 font-family MeppDisplayShadow
• STRONG text-decoration underline
• --gt
• lt/STYLEgt
• lt/HEADgt

10
Résultat
11
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".

12
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

13
Définition du style A l'intérieur des balises
ltHEADgtlt/HEADgt

• ltHTMLgtltHEADgt
• ltSTYLE type "text/css gt
• lt!--
• La ou les feuille(s) de style
• --gt
• lt/STYLEgt
• lt/HEADgt
• ltBODYgt    

14
Définition du style A l'intérieur des balises
ltBodygtlt/Bodygt

• ltHTMLgt ltBODYgt
• ltH1 style"font-family Arial
• font-style italic"gt
• Fac des Sciences lt/H1gt
• lt/BODYgt
• lt/HTMLgt
•  

?    la syntaxe est légèrement différente de la
précédente
   ?   ltSTYLE type"text/css"gt H1
"font-family Arial font-style italic"
lt/STYLEgt fonctionne aussi.
?  peu conforme à l'esprit des feuilles de style
(définir un style déterminé valable pour la
globalité du document
15
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
•  

• ltHTMLgt ltHEADgt
• ltLINK relstylesheet type"text/css"
  hrefmonstyle.css"gt
• lt/HEADgt

16
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

h1 font-size 20pt font-family Verdana,
Arial, Helvetica, Geneva, sans-serifcolor
navy text-align center
html,body,p,ul,li,td font-size 10pt
font-family Verdana, Arial, Helvetica, Geneva,
sans-serif color black background-color
white
h2 font-size 14pt font-family Verdana,
Arial, Helvetica, Geneva, sans-serif color
bluepadding-left15px
alink color green text-decorationunderline
avisited color gray text-decorationunderline
ahover colorred text-decorationnone
17
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
ltbalise class"nom_de-classe"gt .... lt/balisegt
faire appel à une classe
  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, ltP class".essentiel"gt
... blabla ... lt/Pgt ltH1
class".essentiel"gtTitre 1lt/H1gt
ltTABLEgtltTRgtltTD class".essentiel"gtcellulelt/TDgtlt/TD
gt...
18
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 Alink font-familyArial
color"0099FF" font-size12px cursortext
Avisited font-familyArial colorblue
font-size12px cursortext Aactive
colorred Ahover colorred
text-decorationnone
19
Principe de l'héritage (ID)

• Certains éléments de la page HTML héritent des
  propriétés des styles définis.

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

21
Règle de priorité Quel fond décran

• ltHEADgt ltSTYLE TYPE"text/css"gt lt!-- BODY
  background-color 0000FF --gt lt/STYLEgt
  lt/HEADgt ltBODY STYLE"background-colorFF0000
  "gt
• Le fond d'écran sera ????

• ltHEADgt ltSTYLE TYPE"text/css"gt lt!-- BODY
  background-color 0000FF ! important --gt
  lt/STYLEgt lt/HEADgt ltBODY STYLE"background-color
  FF0000 "gt
• Le fond d'écran sera ????

22
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
• Intégrer chaque grande portion de document dans
  une balise DIV particulière.
• Utiliser une feuille de style pour chaque DIV.

23
DIV exemples
lthtmlgt ltHEADgt ltSTYLE type"text/css"gt
.zonefont-size x-small lt/STYLEgt lt/HEADgt
ltBODYgt La balise ltDIVgt ltDIV classzonegt bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla
lt/DIVgt lt/Bodygt lt/htmlgt
ltHTMLgt ltHEADgt ltSTYLE
type"text/css"gt .zonefont-size
x-small lt/STYLEgt lt/HEADgt
ltBODYgt La balise ltDIVgt ltDIV
classzonegt ltPgtCommentaire lt/Pgt
ltPgtN'oubliez pas l'attribut class!lt/Pgt
lt/DIVgt lt/BODYgt lt/HTMLgt
24
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.

ltHTMLgt ltHEADgt ltSTYLE
type"text/css"gt .elementfont-size
x-large color navy lt/STYLEgt
lt/HEADgt ltBODYgt ltPgt Un monde de
ltSPAN classelementgt géantslt/SPANgt lt/Pgt
lt/BODYgt lt/HTMLgt
25

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
  Transitional//EN"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtThe 23rd Psalmlt/TITLEgt
• ltSTYLEgt
• lt!--
• SPAN float left
• font-family "Cushing Book"
• font-size 75pt
• --gt
• lt/STYLEgt
• lt/HEADgt
• ltBODYgt
• ltH2 ALIGN"CENTER"gt
• The 23rd Psalm (King James Version)lt/H2gt
• ltSPANgtTlt/SPANgthe LORD is my shepherd I shall not
  want.
• He maketh me to lie down in green pastures he
  leadeth me beside the still waters.

26
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

27
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.
28
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.

29
Exemples Positionnement
30
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 cliprect(haut,droite,bas,gauche)
  
• varie selon les navigateurs

31
Clip Exemple
L'image 1.jpg CLIP ltHEADgt ltSTYLE
TYPE"text/css"gt lt!-- .toto
positionabsolute top10px left10px
cliprect(0, 25, 25, 0) --gt lt/STYLEgt
lt/HEADgt ltBODY BGCOLOR"000080" TEXT"FF0000"gt
ltDIV CLASS"toto"gtltIMG SRC"1.jpg" BORDER0
WIDTH50 HEIGHT50gtlt/DIVgt lt/BODYgt
32
Lattribut 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.

33
Lattribut Z-index
ltSTYLE TYPE"text/css"gt lt!-- .toto
positionabsolute top10px left10px
.titi positionabsolute top30 left30
z-index2 --gt lt/STYLEgt lt/HEADgt ltBODY
BGCOLOR"000080" TEXT"FF0000"gt ltDIV
CLASS"toto"gtltIMG SRC"1.jpg" BORDER0 WIDTH50
HEIGHT50gtlt/DIVgt ltDIV CLASS"titi"gtltIMG
SRC"2.jpg" BORDER0 WIDTH50 HEIGHT50gtlt/DIVgt
Placer le z-index2 sur la classe Toto
34
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)

blue0000FF(0,0,255) fuchsiaFF00FF(255,0,255) lime00FF00(0,255,0) maroon800000(128,0,0)
purple800080(128,0,128) redFF0000(255,0,0) whiteFFFFFF(255,255,255) yellowFFFF00(255,255,0)
aqua00FFFF(0,255,255) black000000(0,0,0) gray808080(128,128,128) green008000(0,128,0)
navy000080(0,0,128) olive808000(128,128,0) silverC0C0C0(192,192,192) teal008080(0,128,128)
35
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)

36
Codification des couleurs en CSS Liste
    Pourcentage Nombre entier Hexadecimal 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
37
Les styles de police

• font-family définit un nom de police ou une
  famille de police ltnomgt ou ltfamillegt 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
38
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
39
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
  ltPgt, n'oubliez pas dans ce cas lt/Pgt. 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

? Avisited text-decoration blink
40
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
41
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
42
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
43
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
44
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
45
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
46
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

47
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
48
Les bords et les "enrobages"

• 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
49
Les bords et les "enrobages"

• 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 points (pt), inches (in),
  centimètres (cm), pixels (px) ou pourcentage ()
  

? H3 padding-top 3px
50
Les bords et les "enrobages"

• 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 points (pt), inches
  (in), centimètres (cm), pixels (px) ou
  pourcentage ()

? H3 padding-left 3px
51
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