CSS level 1

Language de feuilles de style pour documents HTML

Permet une séparation claire de la structure et du style
 

 

W3C Recommendation depuis le 17 décembre 1996

Spécification à: http://www.w3.org/TR/REC-CSS1

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

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>

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 }

Héritage

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 }

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 }

Sélecteur contextuel

Exemple 1:

H1 EM { color: red }

Exemple 2:

UL LI { font-size: small }
UL UL LI { font-size: x-small }

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 }

Commentaires

Identiques à ceux de C:

EM { color: red }  /* red, really red!! */

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% }

La cascade

Combinaison de feuilles de style par l'auteur:

@import url(http://www.style.org/marine);
/* surchage du style importé */
H1 { color: red }

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 }

Le modèle de formattage

Modèle de boîtes:

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

        |    element width    |
|              box width                |

Le modèle de formattage (2)

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

Deux types principaux d'éléments:

Les propriétés de CSS1

Les unités

Evolution future

CSS2 en préparation comprend:

http://www.w3.org/Style