Table of contents

HTML 4.0.

by Arnaud Le Hors
page 0/17
CSS level 1

Language de feuilles de style pour documents HTML

Permet une séparation claire de la structure et du style
=> plus grande indépendance avec le media utilisé.

W3C Recommendation depuis le 17 décembre 1996
Spécification à: http://www.w3.org/TR/REC-CSS1

page 1/17
Règles de style

Exemple: 

H1 { color: blue }

Une règle comprend deux parties:

  1. un sélecteur: le lien entre HTML et CSS
  2. une déclaration: une propriété et une valeur
page 2/17
Intégration de style dans HTML

Utilisation de LINK, STYLE, et/ou style: 

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Titre</TITLE>
  <LINK rel="stylesheet" type="text/css" 
    href="http://style.com/cool" title="Cool">
  <STYLE type="text/css">
    @import url(http://style.com/basic);
    H1 { color: blue }
  </STYLE>
 </HEAD>
 <BODY>
  <H1>Titre en bleu</H1>
  <P style="color: green">Un paragraphe vert.
 </BODY>
</HTML>
page 3/17
Groupements
Sélecteurs:
H1, H2, H3 { font-family: helvetica }
Déclarations:
H1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt; 
  font-family: helvetica; 
  font-variant: normal;
  font-style: normal;
}
Autre:
H1 { font: bold 12pt/14pt helvetica }
page 4/17
Héritage
  • En général les propriétés sont héritées du père
  • Par exemple EM est bleu dans: 
    H1 { color: blue }

<H1>Le titre <EM>est</EM> important!</H1>
  • Style sur BODY == "style par défaut": 
    BODY { 
  color: black;
  background: url(texture.gif) white;
}
  • Exceptions: background, pourcentages...
page 5/17
Le sélecteur class

Exemple: 

H1.important { color: #FF0000 }

<H1 class="important">Attention!</H1>

Sélection de tous les éléments de même classe: 

.important { color: #FF0000 }
page 6/17
Le sélecteur ID

Exemple: 

#z98y { letter-spacing: 0.3em }

<P ID="z98y">Il fait vraiment un temps
  incroyable.</P>

Equivalent à (ID est unique!): 

P#z98y { letter-spacing: 0.3em }
page 7/17
Sélecteur contextuel

Exemple 1: 

H1 EM { color: red }
  • Affecte uniquement les éléments EM dans un H1

Exemple 2: 

UL LI { font-size: small }
UL UL LI { font-size: x-small }
  • Règle 1: éléments LI ayant au moins un ancêtre UL
  • Règle 2: éléments LI ayant au moins deux ancêtres UL
  • Conflit: le sélecteur le plus spécifique l'emporte
page 8/17
Mixage de sélecteurs

Exemple: 

.reddish H1     { color: red }
#x78y CODE      { background: blue }
DIV.sidenote H1 { font-size: large }
H1 B, H2 B, H1 EM, H2 EM { color: red }
page 9/17
Commentaires

Identiques à ceux de C: 

EM { color: red }  /* red, really red!! */
page 10/17
Pseudo-classes et pseudo-éléments

Sélection indépendante de la structure HTML

Pseudo-classes: 
A:link { color: red }     /* unvisited */
A:visited { color: blue }
A:active { color: lime }
Pseudo-éléments: 
P:first-line { font-style: small-caps }
P:first-letter { font-size: 200% }
page 11/17
La cascade

Combinaison de feuilles de style par l'auteur: 

@import url(http://www.style.org/marine);
/* surchage du style importé */
H1 { color: red }
  • Facilite le partage des feuilles de style

Combinaison des feuilles de style de l'auteur avec celle de "l'utilisateur".

L'auteur peut interdire la surchage par l'utilisateur: 

H1 { color: black ! important }
page 12/17
Le modèle de formattage (1)

Modèle de boites: 

 _______________________________________
|           margin (transparent)        |
|   _________________________________   |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

        |    element width    |
|              box width                |
page 13/17
Le modèle de formattage (2)

A chaque élément correspond une ou plusieurs boites.

Deux types principaux d'éléments:

  • block-level éléments => changement de flot
  • inline éléments => même flot
page 14/17
Les propriétés de CSS1
  • Polices de caractères
  • Couleurs et fonds
  • Propriétés textuelles (alignement, indentation...)
  • Propriétés de boites (marges, encadrement...)
  • Propriétés spéciales ('display', 'white-space'...)
page 15/17
Les unités
  • Longueurs:
    • relatives: "0.5em", "1ex", "10px"
    • absolues: "0.5in", "3cm", "12pt"..
  • Pourcentages: "120%"
  • Couleurs: "black", "#f00", "rgb(255,0,0)"...
page 16/17
Evolution future

CSS2 en préparation comprend:

  • support pour diffèrents types de media
  • support pour l'impression
  • feuilles de styles orales
  • positionnement relatif et absolu

http://www.w3.org/Style

page 17/17