Les feuilles de style CSS2

Un tutoriel s'inspirant de...

• Spécification CSS2 du W3 Consortium (12 mai 1998)

• CSS2, feuilles de style HTML. Daniel Glazman.
  Éditions Eyrolles - ISBN: 2-212-09051-X
  

Exemples de feuilles de style en action

http://www.w3.org/StyleSheets/Core/preview

Un exemple de feuille de style

body {
    background: white;
    color: black;
}
/*   ceci est un commentaire dans une feuille de style.
     à partir de maintenant les commentaires à propos
     de cette feuille seront en bleu
*/
div.slide {
    background-color: white;
    margin: 1em;
    padding: .5em;
    border: solid;
    border-width: 1px;
    border-color: #6666ff;
}

/*  les feuilles de style suivent une syntaxe particulière.
    Ici, on vient de définir les divisions de classe slide, et en-dessous, 
    il y a les divisions de classe example. Le terme classe sera
    expliqué plus tard. Retenons pour l'instant qu'en HTML le code utilisé 
    pour avoir une division suivant le style de classe slide est :

        <div class=slide>bla bla bla<div>

    ce qui donnera le texte "bla bla bla" sur un fond blanc, dans une boîte ayant 
    une marge externe et interne d'une certaine valeur, et avec une bordure d'une
    certaine valeur et d'une certaine couleur.
    Tout ce qui en gras dans la définition ci-dessus constitue un bloc.
*/
div.example {
    width: 100%;
    color: black;
}

/*  Noter qu'un même nom de classe peut être attribué à des éléments HTML différents,
    ici, une div et un tt
*/
tt.example {
    color: maroon;
    margin-left: 1em;
}
pre {
    color: maroon;
    margin-left: 1em;
}

/*  pour toutes les sections <pre>...</pre> la couleur de premier plan 
    est le marron, avec une marge de tant, mais pour les sections de classe dtd
    la couleur de premier plan est noire, et il n'y a pas de marge
*/
pre.dtd {
    color: black;
    margin-left: 0;
}
div.deprecated-example {
    width: 100%;
    color: red;
    border: solid rgb(255,165,0); /* orange */
}

/*   de plus en plus fort : les paragraphes contenus dans une division
     de classe deprecated-example ont le noir comme couleur de premier plan
*/
div.deprecated-example p {
    color: black;
}

/*  la casse des identificateurs n'a pas d'importance
*/
DIV.subtoc {paDDinG: 1em; border: solid thin; margin: 1em 0;
    background: #ddd}

Notions de base

Jeu de caractactères

Unicode (ISO 10646)

Identificateurs

indépendants de la casse ; ne doivent pas être entourés par des guillemets ou des apostrophes
text-traNSFOrm white FONt-style italiC

Règles (de style)

composées à gauche d'un sélecteur, et à droite d'un bloc (de déclarations de styles)
H1 + P {color: blue; margin-left: 1em}

Règles "at"

le premier identificateur de la partie gauche (sélecteur) est immédiatement précédée d'un @
@import "feuille.css";

Déclarations

dans le bloc, un identificateur, suivi de deux-points, suivi d'une ou plusieurs valeurs
text-align: center
font-family: helvetica, sans-serif

Chaînes de caractères

"entre guillemets comme ceci" ou 'en utilisant l\'apostrophe, comme ceci'

Nombres

1.414 +5 .4 -0.9

Longueurs

exprimées en cm, mm, in (2.54cm), pt (1/72in), pc (12pt) pour les longueurs absolues, et en em, ex et px pour les longueurs relatives, voire en pourcentages
<HR style="width: 50%">

---

Uniform Resource Locators

BODY { background: url("http://somewhere.to/nowhere.jpg") }

Jeu de caractères

• Unicode (caractères codés sur 16 bits, norme ISO 10646), qui regroupe l'ensemble des jeux de caractères existants [http://www.unicode.org/]
  Dans une feuille de style CSS2, un caractère unicode est de la forme \ABCDEF (un antislash suivi d'au maximum 6 chiffres hexadécimaux)

• Les premiers caractères codés dans Unicode correspondent à l'ASCII (puis à iso-latin-8851) classique.
  <LINE-FEED> est ainsi codé indifférement \00000A ou \0A

• Une chaîne de caractères peut contenir le caractère antislash suivi d'un retour à la ligne, de manière à être plus lisible. Ces deux caractères seront ignorés.

  "cette ligne est plus facile \
  à éditer"
  "cette ligne est plus facile \
  à effacer"
  "cette ligne est plus facile \
  à repérer"
  

• Plus généralement, l'antislash est le caractère d'échappement.

  "voilà comment inclure un guillemet (un \") dans une chaîne"
  'mais on aurait pu faire comme ça (un "), si on voulait'
  'mais on n\'aurait pas pu faire autrement'
  

• Comment insérer un retour à la ligne dans une chaîne ?

  "comme\00000Aceci"
  "ou comme\0A cela"
  

• Le problème des espaces après les caractères Unicode. Les 4 chaînes suivantes sont équivalentes,

  "\000041ttention"
  "Attention"
  "\41 ttention"
  "\000041 ttention"
  

  mais pour produire "A ttention", il faut insérer une espace supplémentaire,

  "\000041  ttention"
  "\41  ttention"
  

Mais la feuille est elle-même codée dans un jeu de caractère...

• é è á à : lisez ces caractères en changeant le "character-set" de votre navigateur (et remettez-le ensuite à ISO-8859-1)

• Des indications de style embarquées (dans un document HTML, par exemple) doivent être rédigées dans le "character-set" du dit document.

• Des indications de style disponibles séparément sont gérées par l'algorithme suivant :
  1. accepter le charset contenu dans l'en-tête Content-Type du document envoyé par HTTP
  2. sinon, accepter le charset positionné (dans la feuille séparée) de la manière suivante (par ex.) :
     @charset "ISO-8859-1"
     positionné au tout début de la feuille (vous devinez pourquoi ?)
  3. sinon, accepter le charset en provenance de mécanismes éventuels au sein du langage qui fait appel à la feuille de style (par ex. l'attribut charset de LINK en HTML)

Règles

• Elles sont les éléments principaux des feuilles de style

• SELECTEUR { DECLARATION }

Blocs

• Une accolade ouvrante, des caractères, une accolade fermante

Déclarations

• IDENTIFICATEUR : une ou plusieurs valeurs

La grammaire de CSS1, CSS2, CSS....

Token

 IDENT             {ident} 
 ATKEYWORD         @{ident} 
 STRING            {string} 
 HASH              #{name} 
 NUMBER            {num} 
 PERCENTAGE        {num}% 
 DIMENSION         {num}{ident} 
 URI               url\({w}{string}{w}\)
                   |url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\) 
 UNICODE-RANGE     U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})? 
 CDO               <!-- 
 CDC               -->
 ;                 ; 
 {                 \{ 
 }                 \} 
 (                 \( 
 )                 \) 
 [                 \[ 
 ]                 \] 
 S                 [ \t\r\n\f]+ 
 COMMENT           \/\*[^*]*\*+([^/][^*]*\*+)*\/ 
 FUNCTION          {ident}\( 
 INCLUDES          ~= 
 DASHMATCH         |= 
 DELIM             any other character not matched by the above rules

Macros

 ident     {nmstart}{nmchar}* 
 name      {nmchar}+ 
 nmstart   [a-zA-Z]|{nonascii}|{escape} 
 nonascii  [^\0-\177] 
 unicode   \\[0-9a-f]{1,6}[ \n\r\t\f]? 
 escape    {unicode}|\\[ -~\200-\4177777] 
 nmchar    [a-z0-9-]|{nonascii}|{escape} 
 num       [0-9]+|[0-9]*\.[0-9]+ 
 string    {string1}|{string2} 
 string1   \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\" 
 string2   \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\' 
 nl        \n|\r\n|\r|\f 
 w         [ \t\r\n\f]*

Syntaxe

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property ':' S* value;
property    : IDENT S*;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;

Les longueurs relatives

• em correspond au cadratin français (cf. les demi-cadratins en poésie)

• ex est la référence pour le calcul des petites majuscules (comme dans CEDEX)

• Utilisées dans une règle, ces longueurs font référence (relative) aux longueurs des parents

• Attention, un pixel ne correspond pas à un point typographique (px!=pt)
  • Un pixel de référence est définit comme l'angle d'un véritable pixel sur un écran de densité 90dpi (90 pixels par pouce) à une distance d'un bras (environ 70cm), ce qui donne un angle de 0.0227 degrés environ

  • Un écran a un "pitch" de 0.28 environ (1px = 0.28mm = 1/90 pouce)

  • Une feuille étant lue à moins d'un bras de distance (disons 50cm), 1px = 0.21mm

  • À 300dpi, un pixel de ce type est rendu par trois points

  • À 600dpi, un pixel de ce type est rendu par cinq points

• À voir également : http://www.hpaa.com/css1/pxnpts.asp

Les pourcentages

• Utilisées dans une règle, ces pourcentages font référence (relative) aux longueurs des parents

• Un pourcentage négatif indique des débordements en marge, par exemple

L'application en cascades, première partie

Origine des définitions de style

Feuille de style définie dans un document externe et pouvant ansi être appliquée à plusieurs documents

<LINK rel="STYLESHEET" href="../styles/default.css" type="text/css">
<LINK rel="STYLESHEET" href="http://somewhere.to/nowhere.css" type="text/css">

Feuille de style définie localement en haut du document (voir le HEADer de ce document, version web uniquement)

<STYLE type="text/css" title="style local">
<!--
div.slide {
    background-color: white;
    margin: 1em;
    padding: .5em;
    border: solid;
    border-width: 3px;
    border-color: #ff9999;
}
-->
</STYLE>

Style appliqué localement à un élément HTML

<span style="font-style: italic">cet exemple</span>

Feuilles de style non développées par l'auteur

feuille du navigateur (appliquée en l'absence de tout style) et feuille(s) du lecteur

Importation de règles

Dans une feuille de style, il est possible d'importer les déclarations d'une autre feuille. On utilise pour ça une règle "at", par exemple 

/* fichier default.css */
@import "special.css"; /* noter le ; à la fin */
@import url(http://somewhere.to/nowhere.css);
P {color: blue}
/* noter que les @import doivent précéder les règles 
   classiques sous peine d'invalidité de la feuille de style
*/

Donner le choix au navigateur

Retour sur HTML4.0

<!ELEMENT LINK - o EMPTY >
<!ATTLIST LINK
  %attrs;
  charset  %Charset;      #IMPLIED
  href     %URI;          #IMPLIED
  hreflang %LanguageCode; #IMPLIED
  type     %ContentType;  #IMPLIED
  rel      %LinkTypes;    #IMPLIED
  rev      %LinkTypes;    #IMPLIED
  media    %MediaDesc;    #IMPLIED
>

<LINK REL="stylesheet" TYPE="text/css" HREF="foo.css">
<LINK REL="stylesheet" TYPE="text/css" HREF="bar1.css TITLE="Feuille Bar1">
<LINK REL="stylesheet" TYPE="text/css" HREF="bar2.css TITLE="Feuille Bar2">
<LINK REL="alternate stylesheet" TYPE="text/css" HREF="foobar.css TITLE="Feuille FooBar">
<LINK REL="alternate stylesheet" TYPE="text/css" HREF="foobar2.css TITLE="Feuille Bar2">

1. Si l'utilisateur veut ignorer tous les styles définis par l'auteur, OK
2. Sinon, proposer les choix alternatifs (avec au moins un choix préféré)
   Style: Bar1FooBarBar2
3. Si l'utilisateur ne choisit pas, prendre la feuille préférée
4. Utiliser toutes les alternatives ayant le même TITLE que la feuille retenue
5. Utiliser bien sûr les feuilles persistantes s'il en existe

Une ruse à implémenter sur votre serveur web

Si votre site web n'a aucune feuille de style, ne vous cassez pas la tête avec des LINK à insérer partout...

• Insérez à la volée un en-tête http :
  Link: <http://foo.bar.fr/foo/bar.css>; rel="stylesheet"

Sélecteurs simples

universel

* {font-family: helvetica}

de type d'éléments

P {color: blue}

d'ID

P#resume {margin-left: 1em; margin-right: 1em}

d'attribut

d'existence d'attribut

*[LANG] {font-style: italic}

d'uni-valeur d'attribut

*[LANG="en"] {font-style: italic}

de multi-valeur d'attribut

P[class~=basique] {font-style: italic}
<P CLASS="basique baroque">...

de valeur d'attribut linguistique

P[LANG|="fr"] {font-style: italic}
<P LANG=fr>voiture</P>
<P LANG=fr-ca>char</P>

de classe

P.basique {font-style: normal; color:black}
.basique {font-style: normal}
P[LANG="fr"].basique {font-style: italic; color:black}
P[LANG="fr"].basique.baroque {font-style: italic; color:silver}

Attention de bien respecter l'esprit des feuilles de style. Ne pas mélanger aspect physique et structure de document :
SPAN.adresse {font-style:italic; text-align: right}

• L'aggrégation de sélecteurs permet d'affiner sa sélection :
  A[HREF][NAME="truc"] {...}
  s'applique aux liens qui sont également une cible (nommée "truc")

Combinaisons

1. l'espace (et la tabulation ou la suite d'espaces) signifiant la descendance :
   P EM {font-weight: bold}
   

   <P> l'<span style="color: blue;"><em>emphasize</em></span> n'est plus en italique mais en gras (et en théorie).
   DIV * P correspond à tous les P au moins petit-fils d'un DIV

2. le signe supérieur > pour signifier la filliation (descendance directe père-fils) :
   P > EM {font-weight: bold}
   

   <P> l'<em>emphasize</em> est censé être graissé

3. le signe plus + pour signifier l'adjacence :
   H3 + P {font-style: italic} correspond au premier paragraphe P qui suit un en-tête H3

Pseudo-classes

1. TT:first-child {color: blue}
   <span>un essai sur <i>fils</i> italique du père span</span>
2. • A:link
   • A:visited
   • A:active
   • A:hover
3. :focus et :lang()
   *:lang(en) {font-style: italic}

Pseudo-éléments

1. P:first-line {font-weight: bold}
2. P.premier:first-lespaner {font-size: 200%}
3. H1:before {content: "Chapitre"}
4. P.footnote:after {content: "[Retour <a href=\"#top" attr(NAME) "\">dans le texte</a>]"}

   Texte faisant <a href="#fn1" name="topfn1">appel à une note de bas de page</a>...
   La dite note est automatiquement suivie de [Retour <a href="#topfn1">dans le texte</a>]

Regroupement de sélecteurs

H1 {font-family: helvetica}
H2 {font-family: helvetica}
H3 {font-family: helvetica}
H4 {font-family: helvetica}
H5 {font-family: helvetica}
H6 {font-family: helvetica}

Héritage

Un paragraphe vert ayant un mot en gras a bien ce mot gras vert (<b> a hérité du style de son <p> englobant)

<p style="color: green">Un paragraphe vert ayant un <b>mot</b> en gras...

Nota:Toutes les propriétés ne s'héritent pas ainsi, mais il est possible de forcer un héritage si besoin est.

Spécificités : quand plusieurs styles sont applicables

Soit la feuille de style (improbable) suivante :

LI {color: blue}
OL LI {color: red}
OL.bidule LI {color: fuchsia}
DIV TABLE#glou TD LI#gla {color: green}

Les déclarations !important

Ordre de cascade

Allez ! On mélange tout ce qui est au-dessus, et qu'est-ce qui sort ? Un algorithme de cascade des styles (pour chaque élément) :

1. s'il y a des déclarations de style applicables
   1. filtrer selon l'origine
      1. les déclarations normales du rédacteur ont précédence sur celles, normales du lecteur et elles-même sur celles du navigateur
      2. les déclarations !important du lecteur ont précédence sur celles du rédacteur
   2. garder la déclaration avec la plus grande spécificité
   3. si choix encore possible, garder la dernière déclarée
2. s'il n'y a pas de déclaration de style applicable, utilisée le style hérité
3. s'il n'y a pas de style hérité, appliquer le style par défaut

Justifications

Un paragraphe aligné à gauche. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-align: left">

Un paragraphe aligné à droite. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-align: right">

Un paragraphe centré. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-align: center">

Un paragraphe justifié. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-align: justify">

• justification : pas de directive sur la méthode (gestion des espaces entre les mots, entre les caractères)

• mauvaise gestion par certains navigateurs : la solution est de toujours ajouter une espace supplémentaire avant la fin de paragraphe. <p align=justify>comme ceci. </p>

• pas de gestion de la césure des mots

Indentations

Un paragraphe indenté. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-indent: 2em">

Un autre paragraphe indenté, et justifié. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-indent: 20%; text-align: justify">
Les 20% sont relatifs à la longueur du paragraphe sans indentation (en fait, la boîte englobante, cf. plus loin).

Un paragraphe indenté avec une valeur négative. Noter le débordement. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-indent: -1em">

Transformations

Un paragraphe souligné et surligné. L'est-il vraiment, d'ailleurs ? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-decoration: underline overline">
Autre valeurs possibles : line-through et blink et none

Un paragraphe avec chaque mot capitalisé. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-transform: capitalize">
Autre valeurs possibles : uppercase et lowercase et none (il y a toujours none ; noter l'absence de majuscule en début de cette paranthèse)

• La gestion de la langue est souvent mal gérée par les navigateurs dans ce cas. L'exemple de "ij" qui se met en double majuscule "IJ" en néerlandais.

Gestion des espaces et retours à la ligne

• Sont-ils signifiants (comme pour la balise <PRE>) ou non ?

• white-space: normal; les retours à la ligne sont considérés comme des espaces, et plusieurs espaces de suite sont réduits à une seule espace.

• white-space: pre; les retours à la ligne sont de vrais retours, et plusieurs espaces correspondent exactement au nombre d'espaces indiqués

• white-space: nowrap; comme pour normal, excepté qu'il n'y aura jamais de passage à la ligne (sauf à travers un \A)

Exemple avec pre Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Exemple avec nowrap Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Gestion de l'espace inter-mots

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-align: justify; word-spacing: 5em">
Il s'agit d'une espace en plus de l'espace standard.

Gestion de l'espace inter-lettres

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="text-align: justify; letter-spacing: 5em">
Il s'agit d'une espace en plus de l'espace standard.

• Noter que des valeurs négatives sont possibles.

L'ombre (une définition un peu... floue)

text-shadow:
  none |
    [<color> ||
     <length> <length> <length>? ,
    ]*
    [<color> ||
     <length> <length> <length>?]
  | inherit

• L'effet d'ombrage ne doit pas altérer la taille de la boîte qui contient l'élément concerné, mais peut dépasser

• un shadow-offset est obligatoire, et en option on peut avoir un effet de flou et une couleur (pas un éclairage, ni une absorption, ni...)

• Le flou est défini après les deux longueurs de l'offset, par son rayon

• Les pseudo-éléments :first-line et :first-letter sont concernés

• Les effets d'ombre s'accumulent les uns sur les autres

H1 { text-shadow: 0.2em 0.2em }
H2 { text-shadow: 3px 3px 5px red }
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
SPAN.glow { 
  background: white; 
  color: white;
  text-shadow: black 0px 0px 5px;
}

Direction du texte

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
<p style="direction: rtl;">

• deux valeurs possibles : ltr ou rtl

• autre algorithme possible via unicode-bidi. Exemple truqué (imaginez que carac1 et carac2 sont deux caractères d'un alphabet d'une langue qui s'écrit de droite à gauche) :

à gauche 1carac milieu 2carac à droite

à gauche 2carac milieu 1carac à droite

à gauche 2carac ueilim 1carac à droite

<p class=example style="direction: ltr;">à gauche
<span style="direction: rtl; unicode-bidi: normal">carac1
milieu carac2</span> à droite </p>

<p class=example style="direction: ltr;">à gauche
<span style="direction: rtl; unicode-bidi: embed">carac1
milieu carac2</span> à droite </p>

<p class=example style="direction: ltr;">à gauche
<span style="direction: rtl; unicode-bidi: bidi-override">carac1
milieu carac2</span> à droite </p>

Spécifications d'une police de caractère

font-style

• font-style: italic

• font-style: oblique (caractères normaux penchés d'un angle donné)

• font-style: normal

font-variant

• font-variant: small-caps

• font-variant: normal

font-weight

• font-weight: bold

• font-weight: normal

• font-weight: 100

• font-weight: 200

• font-weight: 300

• font-weight: 400

• font-weight: 500

• font-weight: 600

• font-weight: 700

• font-weight: 800

• font-weight: 900

• font-weight: bolder

• font-weight: lighter

font-stretch

• font-strecht: ultra-condensed

• font-strecht: extra-condensed

• font-strecht: condensed

• font-strecht: semi-condensed

• font-strecht: normal

• font-strecht: semi-expanded

• font-strecht: expanded

• font-strecht: extra-expanded

• font-strecht: ultra-expanded

• font-strecht: wider

• font-strecht: narrower

font-size

• font-size: xx-small

• font-size: x-small

• font-size: small

• font-size: medium

• font-size: large

• font-size: x-large

• font-size: xx-large

• font-size: larger (facteur d'échelle recommandé sur un écran : 1.2)

• font-size: smaller

• une longueur

• un pourcentage

font-size-adjust

• l'aspect d'une police est sa taille divisée par la hauteur de son caractère x minuscule

• plus cette valeur est élevée, et plus la police est lisible à petites tailles

• exemple : aspect(Verdana)=0.58 ; pour une fonte de taille 100, x mesure 58 ; aspect(Times)=0.46

• font-size-adjust: none ou font-size-adjust: <nombre>

• Les polices de la figure ci-dessus sont en 11pt, 72dpi.
  En dessous, elles ont été ajustées par rapport à Verdana.

font

[
  [ <'font-style'> || <'font-variant'> || <'font-weight'> ]?
  <'font-size'>
  [ / <'line-height'> ]?
  <'font-family'>
]
| caption | icon | menu | message-box | small-caption | status-bar | inherit 

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

• caption: police-système associée aux boutons

• icon: police-système associée aux labels des icônes

• menu: police-système associée aux menus déroulants...

• message-box: police-système associée aux fenêtres de dialogue

• small-caption: police-système associée aux labels plus petits

• status-bar: police-système associée aux barres de statut des fenêtres

Polices génériques

serif

Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit

sans-serif

MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica

cursive

Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery

fantasy

Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

monospace

Courier, MS Courier New, Prestige, Everson Mono

Choix d'une police de caractères lors de l'affichage

Algorithme

1. Construire (ou accéder à) la liste des polices de caractères auxquelles le navigateur peut prétendre :
   • polices installées localement sur la machine

   • polices déclarées grâce à la règle spéciale @font-face

   • polices codées plus ou moins en dur dans le navigateur

   • les 5 polices génériques (serif, sans-serif, cursive, monospace, fantasy)

2. Pour chaque élément faisant appel à une police donnée, vérifier (grâce à font-family) qu'on la possède, puis voir seulement ensuite si les autres descripteurs de la police (taille, graisse...) peuvent être rendus par une fonte donnée dans cette famille,

3. Si à l'étape précédente on ne trouve pas de police relevant de la font-family demandée, tenter intelligement de trouver une police semblable en examinant les descripteurs tels que la hauteur du x et autres,

4. Si l'étape précédente échoue, voir si l'on ne peut pas télécharger la police demandée via le réseau

5. Si l'étape précédente échoue, essayer avec les mêmes indices que l'avant-dernière étape de synthétiser la police,

6. Si toutes les étapes précédentes échouent, et que l'élément accepte une font-family alternative, refaire toutes les étapes avec cette autre police,

7. Si les étapes précédentes réussissent, mais que manque de pot pour un des caractères on ne dispose pas du glyphe correspondant, reprendre à la deuxième étape pour ce caractère (recherche d'une autre police si alternative possible). Les descripteurs de police indiquent quels caractères elles rendent, ce qui facilite la recherche,

8. Si on a toujours aucune police, utiliser une des polices internes (la plus adaptée). Si un caractère ne peut être affiché, l'indiquer clairement.

Description d'une police de caractères : @font-face

• Fait le lien entre les spécifications de polices par un auteur et les données (binaires) de la police

• Définit les descripteurs de spécifications de polices classiques

• Définit en outre l'URI à laquelle trouver les données de la police

• Définit en outre d'autres descripteurs utiles (notamment à certaines étapes de l'algorithme d'affichage)

Exemple

Soit la liste de polices suivantes désirées :

Swiss 721 light	light & light italic
Swiss 721	roman, bold, italic, bold italic
Swiss 721 medium	medium & medium italic
Swiss 721 heavy	heavy & heavy italic
Swiss 721 black	black, black italic, & black #2
Swiss 721 Condensed	roman, bold, italic, bold italic
Swiss 721 Expanded	roman, bold, italic, bold italic

Les descriptions de polices suivantes peuvent être proposées pour permettre leur téléchargement ensuite.

@font-face {
    font-family: "Swiss 721";
    src: url("swiss721lt.pfr"); /* Swiss 721 light */
    font-style: normal, italic;
    font-weight: 200;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721.pfr"); /* The regular Swiss 721 */
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721md.pfr"); /* Swiss 721 medium */
    font-style: normal, italic;
    font-weight: 500;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721hvy.pfr"); /* Swiss 721 heavy */
    font-style: normal, italic;
    font-weight: 700;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721blk.pfr"); /* Swiss 721 black */
    font-style: normal, italic;
    font-weight: 800,900; /* note the interesting problem that
                               the 900 weight italic doesn't exist */
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* The condensed Swiss 721 */
    font-stretch: condensed;
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* The expanded Swiss 721 */
    font-stretch: expanded;
}

Le descripteur unicode-range

• Permet de donner la liste des caractères (au sein de ISO 10646) qui peuvent être rendus par la police

unicode-range: U+20A7

un seul caractère (le symbole pour la pesète espagnole)

unicode-range: U+215?

tous les caractères de 2150 à 215F (les fractions)

unicode-range: U+00??

tous les caractères de 0000 à 00FF (Latin-1)

unicode-range: U+E??

de 0E00 à 0EFF

unicode-range: U+AC00-D7FF

de AC00 à D7FF

unicode-range: U+370-3FF, U+1F??

de 0370 à 03FF (Modern Greek) et de 1F00 à 1FFF (Ancient polytonic Greek).

unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F

Tous les caractères chinois de ISO 10646 excepté ceux qui sont uniquement japonais ou coréens. (U+3000-33FF, U+4E00-9FFF est plus typique)

Le téléchargement des polices

[  [format( [, ]*)]
  | 
]
[,  [format( [, ]*)]
  | 
]* 

Descripteurs supplémentaires

• panose-1: 2 4 5 2 5 4 5 9 3 3 standard pour la classification des polices TrueType (Latin, voire Grec et Cyrillique)

• stemv

• stemh

• slope

• cap-height

• x-height

• ascent

• descent

Descripteurs supplémentaires pour la synthèse des polices

• widths: U+4E00-4E1F 1736 1874 1692 (nécessite le descripteur units-per-em)

• widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792 1815 1848 1870 1492 1715 1745 1584 1992 1978 1770

• maximal bounding box (de la police complète) : bbox: <number>, <number>, <number>, <number>

• definition-src: URI

Descripteurs optionnels supplémentaires pour les alignements

• S'ils ne sont pas définis, le navigateur doit les deviner d'après les autres descripteurs (ascent, descent etc.)

• baseline: <number> (nécessite units-per-em)

• centerline (nécessite units-per-em)

• mathline (nécessite units-per-em)

• topline (nécessite units-per-em)

• Pour plus de détails (glyphes, units-per-em) lire la spécification complète

Les couleurs

• color: red

• background-color: white

Codage

• en RVB : color: #FFFF00

• en RVB : color: #FF0

• en RVB : color: rgb(255,255,0)

• en RVB : color: rgb(100%,100%,0%)

• par noms (la palette VGA de Windows) :
  • background-color: black (000000)

  • background-color: gray (808080)

  • background-color: silver (C0C0C0)

  • background-color: white (FFFFFF)

  • background-color: yellow (FFFF00)

  • background-color: lime (00FF00)

  • background-color: green (008000)

  • background-color: olive (808000)

  • background-color: aqua (00FFFF)

  • background-color: teal (008080)

  • background-color: blue (0000FF)

  • background-color: navy (000080)

  • background-color: purple (8000080)

  • background-color: fuchsia (FF00FF)

  • background-color: red (FF0000)

  • background-color: maroon (800000)

• Netscape reconnaît astucieusement d'autres noms de couleur...
  http://developer.netscape.com/docs/manuals/communicator/jsguide4/colors.htm

La palette web

Pourquoi une palette ?

• 256 couleurs disponibles au maximum

• certaines déjà utilisées ailleurs sur l'écran

• ne sont pas les mêmes d'un système d'exploitation à l'autre

• la suite sur le web et... en couleurs (http://webreference.com/dev/graphics/palette.html)

• 16x16 = (17x3x(6-1))+1
  I'm a curious Yellow (http://www.upenn.edu/computing/group/dmp/technical/colors/curious.html)

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF

330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF

660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF

990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF

CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF

FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Voir aussi cet utilitaire (http://the-light.com/colclick.html) pour choisir ses couleurs.

Couleurs fonctionnelles

Pour s'adapter au look and feel de votre lecteur...

ActiveBorder

Active window border.

ActiveCaption

Active window caption.

AppWorkspace

Background color of multiple document interface.

Background

Desktop background.

ButtonFace

Face color for three-dimensional display elements.

ButtonHighlight

Dark shadow for three-dimensional display elements (for edges facing away from the light source).

ButtonShadow

Shadow color for three-dimensional display elements.

ButtonText

Text on push buttons.

CaptionText

Text in caption, size box, and scrollbar arrow box.

GrayText

Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.

Highlight

Item(s) selected in a control.

HighlightText

Text of item(s) selected in a control.

InactiveBorder

Inactive window border.

InactiveCaption

Inactive window caption.

InactiveCaptionText

Color of text in an inactive caption.

InfoBackground

Background color for tooltip controls.

InfoText

Text color for tooltip controls.

Menu

Menu background.

MenuText

Text in menus.

Scrollbar

Scroll bar gray area.

ThreeDDarkShadow

Dark shadow for three-dimensional display elements.

ThreeDFace

Face color for three-dimensional display elements.

ThreeDHighlight

Highlight color for three-dimensional display elements.

ThreeDLightShadow

Light color for three-dimensional display elements (for edges facing the light source).

ThreeDShadow

Dark shadow for three-dimensional display elements.

Window

Window background.

WindowFrame

Window frame.

WindowText

Text in windows.

Les fonds

• Remplace <body bgcolor="#FFFFFF" background="../images/recbg.jpg"> par :

        BODY {
        background-color: #FFFFFF;
        background-image: url(../images/recbg.jpg);
        }
  

• <span class=example>background-<span style="background-color: transparent;">color:</span> transparent</span>

• La background-color est visible à travers les pixels transparents de la background-image

Héritage du fond

Répétitions

• background-attachment: fixed (ou scroll, valeur par défaut)

Positionnement

background-position: 50% 50%

L'image (plus ou moins son centre de gravité) est placé aux pourcentages spécifiés des largeurs et hauteurs de l'élément parent.

background-position: 2cm 5cm

idem avec des distances par rapport au coin supérieur gauche de l'élément parent

background-position: top right

top left et left top

signifient '0% 0%'.

top, top center, et center top

signifient '50% 0%'.

right top et top right

signifient '100% 0%'.

left, left center, et center left

signifient '0% 50%'.

center et center center

signifient '50% 50%'.

right, right center, et center right

signifient '100% 50%'.

bottom left et left bottom

signifient '0% 100%'.

bottom, bottom center, et center bottom

signifient '50% 100%'.

bottom right et right bottom

signifient '100% 100%'.

Corrections gamma

Aller voir la spécification

La notion de boîte

• ...liée aux media visuels

Le paragraphe contenant les indications de style se trouve dans une division en fond grisé pour montrer les différentes marges.

Noter ci-dessous l'effet sur les marges que fait parfois l'absence de cadre, selon le navigateur :

Ruse horrible : un cadre d'une largeur de 1 pixel et de la même couleur que celle de la boîte englobante !

Généralité des CSS : les raccourcis

padding: 20pt 40pt; équivaut à
padding-top:20pt; padding-right:40pt; padding-bottom:20pt; padding-left:40pt;

border: 10px solid blue; équivaut à
border-width: 10px; border-style: solid; border-color: blue;

Les différents types de cadres

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

border-style: hidden

Deux types d'éléments

• les éléments de type bloc, restitués dans un rectangle
  Exemples : <P> <DIV>...

• les éléments de type flot de texte, contenus dans des blocs
  Exemples : <B> <SPAN>...

Boîtes et blocs

La racine

• La racine du document (<HTML>...</HTML> dans le cas d'un document HTML) engendre une boîte contenant le bloc initial dans lequel d'autres blocs vont se positionner.

• Largeur et hauteur de cette boîte initiale peuvent être fixée a priori. Les positionnements et tailles des autres blocs en découlent.

Les boîtes anonymes

<DIV> <!-- bloc --> Some text <!-- flot de texte --> <P>More text <!-- bloc --> </DIV>

3 boîtes (source: spécification CSS2)

• DIV (une boîte de type bloc) ayant au moins un bloc comme enfant (P), les éventuels enfants de type flot de texte sont inclus dans des boîtes -anonymes- de type bloc.

• L'exemple suivant est identique pour des boîtes anonymes de type flot de texte

<P>Un peu de texte <B>en gras</B> pour voir</P>

• "Un peu de texte " et " pour voir" sont des boîtes -anonymes- de type flot de texte engendrées par la boîte de type bloc P.

• La boîte contenant "en gras" est de type flot de texte (balise B)

La propriété display

Les éléments HTML définissent déjà des types de boîtes, mais la propriété display permet de les redéfinir, voire de ne pas créer les boîtes.

inline

pour définir un flot de texte normal (lignes dans un paragraphe, par ex.)

block

pour définir une boîte de type bloc, comme une division, un paragraphe, un <pre>...</pre>

list-item

pour définir un article dans une liste (boîte de type bloc) ainsi que la boîte nécessaire à l'éventuelle numérotation

marker

une boîte spéciale pour numéroter et générer d'autres contenus : boîte formatée sur une seule ligne et sans marges extérieures

compact

une boîte qui est de type bloc ou de type flot de texte selon la largeur de la boîte suivante et de sa marge extérieure

run-in

comme pour compact, sans la condition sur la marge

none

aucune boîte n'est créée : la place de l'élément concerné n'est pas réservée et l'élément n'est pas restitué. À ne pas confondre avec visibility: hidden pour lequel la place est réservée et l'élément n'est pas restitué

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption

boîtes spéciales se comportant comme des éléments de tableaux

• Noter que la liste ci-dessus est de type <DL COMPACT>, ce qui doit se voir à l'article "none"

Inter-lignes et alignements verticaux

Pour illustrer ces propriétés, nous utilisons <p style="line-height: 2em"> qui définit un inter-ligne de deux lignes, ce qui permet ^{de jouer} avec _{les mots} dans les lignes en ayant toute la place voulue. Malheureusement, ni netscape4 ni explorer4 n'implémentent les alignements verticaux avec les propriétés légales du type <span style="vertical-align: -.5ex">, et nous avons du utiliser <sup> et <sub> pour la démontration.

Précisions sur line-height

• line-height appliquée à un élément de type bloc correspond à la hauteur minimale des boîtes de type flot de texte créées par le bloc

• line-height appliquée à un élément de type flot de texte correspond exactement à la hauteur de la boîte flot de texte correspondante

• line-height: normal correspondant à la taille des caractères utilisés dans la boîte correspondantes

• line-height: 2em, notez que les longueurs sont positives

• line-height: 2, on multiplie par deux la taille courante

• line-height: 40%, il s'agit d'un pourcentage relatif à la taille de la police de caractères courante

Précisions sur vertical-align

• vertical-align peut prendre une valeur parmi baseline sub super top text-top middle bottom text-bottom ou une longueur (positive ou négative), ou un pourcentage (positif ou négatif)

• baseline : aligner la ligne de base avec celle du parent. Si la boîte concernée n'a pas de ligne de base, aligner le bas de la boîte.

• sub : abaisse la ligne de base comme pour un indice (la taille des caractères n'est pas affectée)

• super : relève la ligne de base comme pour un exposant (la taille des caractères n'est pas affectée)

• top : aligne le haut de la boîte avec le haut de la boîte parent

• text-top : aligne le haut de la boîte avec le haut des caractères de la boîtes parent

• middle : le centre de la boîte concernée est alignée sur le bas de la boîte parent plus un demi-ex des caractères de la boîte parent

• Un pourcentage est un pourcentage de line-height

Le positionnement des (blocs de) boîtes

Stratégies de positionnement

Restitution normale

éléments de type bloc ou flot de texte classiques, positionnements relatifs des blocs ou flot de texte, et positionnement des boîtes run-in et compact

Restitution flottante

éléments restitués normalement, puis positionnés à droite ou à gauche le plus loin possible. Les autres éléments peuvent couler autour.

Restitution absolue

éléments qui n'ont aucun impact sur le positionnement des éléments restitués normalement, mais sont positionnés par rapport à certains d'entre eux

La propriété position

Il est possible de positionner des éléments où l'on veut dans une page web, grâce aux propriétés suivantes :

1. static : correspondant à la restitution "classique" d'un document HTML. Les propriétés left top ne signifient rien.
2. relative : en utilisant les valeurs de 4 autres propriétés (top right bottom left) l'élément est positionné relativement à sa position classique (telle que static l'aurait rendu)
3. absolute : cette fois-ci l'élément est positionné par rapport à sa boîte parente. Les propriétés left top right bottom sont fondamentales.
4. fixed : et cette fois par rapport à la boîte parente de toutes les autres, c'est-à-dire la fenêtre de restitution dans le cas d'un media visuel.

Restitution normale

En contexte de bloc

• Les boîtes y sont empilées verticalement les unes après les autres

• La distance entre deux boîtes verticales est contrôlée par les margin

• Ces marges ne s'additionnent pas mais se confondent (collapse)

• Selon la direction courante (ltr, rtl) le côté pertinent (gauche, droit) d'un bloc-fils touche le côté correspondant de son parent bloc

En contexte de flot de texte

• Les boîtes y sont empilées horizontalement les unes derrière les autres

• Leurs alignements horizontaux sont ajustables

• La largeur d'une boîte horizontale est déterminée par sa boîte-bloc parente

• Elle est au moins aussi haute que le plus haut de ses enfants (elle est plus haute que ce dernier quand les alignements horizontaux sont un peu complexes, fondés sur la baseline, par exemple)

• Quand un enfant d'une boîte flot de texte est moins haut que cette boîte, son alignement vertical est contrôlé par vertical-align:

• Quand les fils d'une boîte flot de texte représentant une ligne dépassent en longueur, on empile une autre ligne en-dessous. Un paragraphe (bloc) est donc un ensemble de lignes (flot de texte) empilées sans séparation verticale ni recouvrement.

• Quand la largeur totale des fils d'une ligne est plus petite que ce que peut offrir la ligne (contenue dans son bloc), text-align détermine la marche à suivre

• Dans le cas de lignes contenant des textes ayant des directions différentes, les choses se compliquent un peu

• Si une boîte flot de texte est coupée en deux par un passage à la ligne, les marges, bordures, et décorations éventuelles de cette boîte ne doivent pas intervenir à la coupure

    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>

Positionnement relatif

• Le positionnement relatif d'une boîte n'a pas d'effet sur la boîte suivante dans le flot

• La boîte est vraiment bougée telle quelle, y compris si une coupure de ligne intervenait

• Elle crée autour d'elle une nouvelle boîte de type bloc pour héberger ses enfants

<IMG style="float: left" SRC="tour.jpg" ALT="" WIDTH="147"
HEIGHT="162" BORDER="0"> L'image à gauche est flottante grâce à la
propriété ...

• L'intérêt des boîtes flottantes est que d'autres boîtes peuvent couler (ou non) autour d'elles

• Une boîte flottante doit avoir une largeur (width) explicite

• Une boîte qui flotte est de type bloc, et du côté où elle flotte, elle va se coller à son bloc-parent, ou à une autre boîte qui flotte comme elle (dans l'ordre du flot normal)

• S'il n'y a pas assez de place sur la ligne courante, la boîte qui flotte descend jusqu'à ce qu'une ligne ait assez de place pour l'accueillir

• Les boîtes flottantes étant retirées du flot n'affectent pas la position d'autres boîtes avant ou après elles. En revanche, les lignes créées à son niveau coulent de chaque côté, si possible

• Le même affichage de l'image flottante aurait lieu avec le code HTML suivant :

  L'image à gauche est
  <IMG style="float: right" SRC="tour.jpg" ALT="" WIDTH="147"
  HEIGHT="162" BORDER="0">  flottante grâce à la
  propriété ...
  

• Les marges de la boîte flottante ne s'agglutinent jamais avec les marges des boîtes adjacentes

• Les boîtes flottantes peuvent recouvrir plusieurs autres boîtes

• Elles montent le plus haut possible, dans la limite de leur bloc parent

• Elles montent le plus haut possible et vont le plus à gauche ou à droite possible, mais en cas de choix, c'est le plus haut possible qui est préférable

• Un bloc avec la propriété clear: left; (respt. right, both) voit sa marge externe haute augmenter jusqu'à ce retrouver en-dessous de toute boîte flottante à gauche (respt. à droite, n'importe où)

avec : P {clear: left;}

• Noter que l'empilement de DIV donne souvent des comportements incorrects dans le positionnement des matériaux flottants pour certains navigateurs. Faites de nombreux essai, et prennez une aspirine.
  L'exemple suivant (visible dans une autre page), pose ainsi des problèmes dans cette mise en page (les tirets rouges ne seront pas visibles, et l'impression de tous les transparents de ce cours est fortement affectée) :

  <P style="position: relative; margin-right: 10px; left: 10px;">
    Un exemple qui devrait avoir deux tirets rouge 
    <SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
    sur la gauche.
  

Débordements et clip

NOTA: ces exemples sont décevants sur certains navigateurs, et quand on les imprime, hélas.

Empilements

Utilisation de la propriété z-index. Une boîte est par-dessus une autre ayant un z-index inférieur.

Texte qui doit se trouver au-dessus. Texte qui doit se trouver au-dessous.

.over   { position: relative;
        top: 0px;
        left: 20px;
        z-index: 2;
        background-color: #ccffcc
        }
.under  { position: relative;
        top: 10px;
        left: -200px;
        z-index: 1;
        background-color: #ccccff
        }

Relations entre display, position et float

1. Si on a display: none, le navigateur doit ignorer les propriétés position et float. Dans ce cas, l'élément concerné ne crée pas de boîte

2. Sinon, si on a position: absolute ou position: fixed, alors display est positionné à block et float à none.
   La position de la boîte est déterminée par les propriétés top, right, bottom et left de la boîte-bloc parent

3. Sinon, si float a une valeur autre que none, display est positionné à block et la boîte flotte

4. Sinon, display garde ses propriétés telles que désirées par l'auteur

• Noter que la spécification CSS2 sur ces sujets reste assez complexe et que beaucoup de navigateurs ne l'implémentent pas correctement. Des libertés sont également laissées (et risquées) dans le cas de propriétés CSS2 qui changent dynamiquement...

Deux colonnes sans tableau : la page d'accueil de David Baron

Le HEADer

<head>
  <title>David Baron's Homepage</title>
  <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <link rel="stylesheet" href="style/forest" title="Forest"
    type="text/css">
  <link rel="stylesheet alternate" href="style/plain" title="Plain"
    type="text/css">
  <link rel="stylesheet alternate"
    href="http://www.w3.org/StyleSheets/Core/Ultramarine"
    title="Ultramarine" type="text/css">
  <link rel="stylesheet alternate"
    href="http://www.w3.org/StyleSheets/Core/Steely"
    title="Steely" type="text/css">
  <link rel="stylesheet alternate"
    href="http://www.w3.org/StyleSheets/Core/Oldstyle"
    title="Oldstyle" type="text/css">
  <link rel="stylesheet" href="style/index"
    type="text/css" media="screen">
  <link rel="alternate" type="text/html"
    title="Español" hreflang="es" href="index.html.es">
  <link rel="copyright" href="legal">
</head>

La feuille de style générale associée

/* WinNS4 */
BODY	{
	/* Reduce the huge margins, since I have 2 columns */
/*	margin: 0;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 2em;
	padding-bottom: 2em; */
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 2em;
	margin-bottom: 2em; 
	}

DIV.left	{
	/* make the left column a float */
	float: left;
	width: 50%;
	/* leave the alignment to the other attributes */
	margin: 0;
	padding: 0;
	border-top-width: 0;
	border-style: none;
	}

DIV.right	{
	float: right;
	width: 49.9%; /* no horizontal scrollbar on MSIE5 */
	margin: 0;
	padding: 0;
	border-top-width: 0;
	border-style: none;
	}

DIV.bottom	{
	padding-top: 2em; /* margin messes up NN 4.5 */
	}

H2	{
	margin-top: 0.5em;
	margin-bottom: 0.2em;
	/* for WinNS4 */
	font-weight: normal;
	}

H2 A, H2 A:link, H2 A:visited, H2 A:hover	{
	font-weight: normal;
	}

DIV.contain	{
	padding: 0;
	border-style: none;
	border-width: 0;
	margin: 0;
	}

DIV.imgicons	{
	margin: 0; /* want the box properties of the P */
	padding: 0;
	float: right;
	width: 150px; /* images are 88px wide, give padding */
	}

P.imgicons	{
	text-align: center;
	}

Le BODY

<body>

<h1 id="head"><span id="headname">David
Baron's</span> <span
id="headhp">Homepage</span></h1>

<p id="afterhead">[ <a
href="index.html.es">Español</a> | <a
href="index.html.eo">Esperanto</a> ]</p>

<div class="left">

<h2><a name="links">My Pages</a></h2>

<ul>
  <li><a href="about">About ...
  <li>...</li>
</ul>

<h2><a href="links/">General Links</a></h2>

<ul>
  <li><a href="links/Search">...
  <li>...</li>
</ul>

</div>

<div class="right">

<h2><a href="weather">Weather and Climate</a>
Links</h2>

<ul>
  <li><a href="links/WGeneral">General</a></li>
  <li><a href="links/WPhiladelphia">Philadelphia Area</a></li>
  <li>...</li>
</ul>

<h2>Quick Links</h2>

<ul>
  <li><a href="http://www.sas.upenn.edu/~jbaron/">
     My father's homepage and links</a></li>
  <li><a href="http://www.hotbot.com/">HotBot</a>,
  <a href="http://altavista.digital.com/">Altavista</a></li>
  <li>...</li>
</ul>

<h2>Weather Quick Links</h2>

...

</div>

<br clear="all">  <!-- Get around an IE 4.0 bug;
   this brings me down to HTML 4.0 transitional -->

<div class="bottom">

<p>
  There is no authoritative list of any set of information on the Web.
  The links presented in these pages represent ...

</p>
  
<p><a href="legal" rel="copyright">Legal
Information</a> (copyright statement, etc.) </p>

<p>LDB, <a rev="made" href="mailto:dbaron@fas.harvard.edu"
title="Send e-mail to David
Baron">dbaron@fas.harvard.edu</a></p>

</div>

</body>

Trois colonnes sans tableau : une ancienne page d'accueil de Jipo

NOTA: Les scripts javascript sont enlevés et seront présentés plus tard

Le HEADer

<head>
<title>Bienvenue chez Jipo, Conseil en
Télécommunications et Internet</title>

<META NAME="Author" CONTENT="Aymeric Poulain Maubant">
...
<META NAME="ROBOTS" CONTENT="ALL">
<META HTTP-EQUIV=Content-Language CONTENT=fr>

<!-- ne plante plus netscape (le pb des 20%) -->

<link REL="StyleSheet" HREF="styles/jipomain.css"
      TYPE="text/css" MEDIA="screen"
      TITLE="Feuille de style générale web Jipo">
<link REL="StyleSheet" HREF="styles/home.css"
      TYPE="text/css" MEDIA="screen"
      TITLE="Feuille de style mise en page d'accueil Jipo">
...

La feuille de style home.css

DIV.left        {
	position: absolute;
	top: 20px
        width: 20%;
        margin-top: 0;
        padding-top: 10;
        padding-bottom: 10;
        padding-left: 0;
        border-top-width: 0;
        border-right-width: 0;
        margin-right-width: 0;
        }

DIV.right        {
        float: right;
	text-align:     left; 
        width: 20%;
        margin-top: 0;
        padding-top: 0;
        padding-left: 30;
        border-top-width: 0;
        border-left-width: 0;
        margin-left-width: 0;
        border-right-width: 0;
        margin-right-width: 0;
        }

/* surtout ne pas enlever le commentaire ci-dessous
   sinon IE4 ne positionne pas la div du milieu ou
   il faut !
*/

/*
#ppweb {
visibility: hiddden;
}
*/


.inprog DIV {
  position: absolute;
  visibility: hidden; /* ne l'etait pas en v6 */
  top: 80px; /* cf DIV.right->margin-top de jipomain.css */
  left: 30%;
  width: 350px; 
}



.progression {
  position: absolute;
  top: 80px; 
  left: 30%;
  width: 400px;
/* si on met un %age (70% par ex.) a cette width, IE4 prend bien
 un %age du bloc englobant, tandis que NS4 semble prendre un
 %age de l'espace qui reste dans le bloc englobant (peut-etre
 est-il influence par les float de chaque cote ?
*/
/*  border: black;
  border-style: solid;
  border-width: 1px;
  background-color: #004455;*/
}


.vocation {
  position: absolute; 
  top: 255px;
  left: 20px;
}

.cinqmn {
  position: absolute;
  top: 30px;
  left: 15px;
}

.atouts {
  position: absolute;
  top: 210px; /* 195 */
  left: 34px; /* 38 */
}
  
.services {
  position: absolute;
  top: 165px; /* 135 */
  left: 55px; /* 72 */
}
  
.besoins {
  position: absolute;
  top: 85px;
  left: 120px;
}
  
.besoins2 {
  position: absolute;
  top: 120px;
  left: 140px;
}
  
.formbesoins {
  position: absolute;
  top: 78px;
  left: 240px;
}
  
.clients {
  position: absolute;
  top: 35px;
  left: 220px;
}
  

.adresse {
  position: absolute;  

/* sous NS4 unix -au moins- mettre visible ci-dessous
   laisse l'adresse tjs visible, meme quand son
   conteneur devient hidden. 125x200 place en-dessous
   de vocation...client */
/*  visibility: visible; 
  top: 125px;
  left: 200px; */
  top: 295px;
  left: 20px;
}

...

Le BODY

NOTA: prévoir un BODY qui se dégrade bien en l'absence de feuille de style.

<body bgcolor="#ffffdd">


<div>
    <h1 class=colJipo>Jipo : Conseil en Télécommunications et Internet</h1>
</div>

<div class=right>

    <p>
    <a href="gc.html">Fournisseurs de services, opérateurs,
constructeurs</a> ou

    ...

    <hr align=center width="50%">

    <p><a href="#Ngene2"><span class=nomJipo>Jipo</span></a>,
    créée en 1997, compte aujourd'hui une vingtaine de
    consultants qui sont intervenus dans plus de 15 pays. </p>

    <hr>

</div> <!-- fin div class=right -->


<div class=left>

    <p> 
    <span style="padding-top:1em;">
    <a href="""><img src="images/theLogoT.gif"
    width=115 height=109 alt="" border=0></a></span><br>  
    <span style="padding-bottom:-1em;"><a href="index.en.htm"><img
    src="icons/uk.gif" width=32 height=32 alt="[english version]"
    border=0></a></span>
    <br>
    ...
    </p>

</div>  <!-- fin div class=left --> 

<!--
NS4 me mettrait apres la div left, IE4 avant !
-->

<!-- cette division de type progression est mise
     avant celle qui contient les liens hypertextes
     (la suivante) pour que ces derniers soient actifs
     (probleme de couches, visiblement, z-index ne
     resolvant rien quand celle-ci etait apres

     Pour windows, ne surtout pas mettre de z-index,
     sinon une fois que les infos legales sont chargees
     toute la partie droite n'est plus active.

-->

<!-- <div class="progression" id=prog2 style="z-index:-1;" -->

<div class="progression" id=prog2>

    <div class=adresse>

        <address>
        <img src="icons/addr.gif" width=20 height=23
        alt="[adresse]" align=left border=0>
        60, rue du Dessous des Berges
            FR-75013 Paris - France<br>
            Tel: +33 (0) 1 53 82 99 40
            Fax: +33 (0) 1 53 82 99 92<br>
        <img src="icons/addr.gif" width=20 height=23
        alt="[adresse]" align=left border=0>
            21, rue Jurien de la Gravière
            FR-29200 Brest - France<br>
            Tel: +33 (0) 2 98 33 12 49
            Fax: +33 (0) 1 98 33 16 54
        </address>

    </div>  <!-- fin div class=adresse -->

</div>  <!-- fin div class=progression -->

<div class="progression" id="prog">

<img src="images/prog.jpg" width=321 height=275 alt="" border=0>

<!--
NS4 et IE4 me mettraient juste apres l'image, ce qui est normal
-->

    <div class=cinqmn>

        <p><em>Découvrez-nous<br>en 5 minutes
        et<br>5 points-clé</em><br>
        <a href="vocation.html"><img src="icons/c1.gif" width=20 height=23
        alt="" align=bottom border=0></a></p>

    </div>

    <span class=vocation><h3><a href="vocation.html">notre vocation</a></h3></span>
    <span class=atouts><h3><a href="atouts.html">nos atouts</a></h3></span>
    <span class=services><h3><a href="services.html">nos services</a></h3></span>
    <span class=besoins><h3><a href="besoins.html">vos besoins</a></h3></span>
    <span class=besoins2><p><a href="prospects.html">précisons-les</a> ensemble... </p></span>
    <span class=clients><h3><a href="clients.html">nos références</a></h3></span>

</div>  <!-- fin div class= progresion & id=prog -->



<div class=inprog>

...

    <DIV ID="webmestre">

        <hr>
        <a href="" name="Nwebmestre"
        <img  src="icons/close.gif" alt="" width=13 height=13 border=0 align=right></a>

        <h3 class=colJipo>Contacter le webmestre</h3>

        <p align=center>Pour tout problème concernant l'utilisation de ce
        site, contactez le webmestre à <a
        href="mailto:webmaster@jipo.com?subject=probleme web
        Jipo"><tt>webmaster@jipo.com</tt></a> </p>

    </DIV>

</div> <!-- fin div class=inprog -->

</body>

Les tableaux en HTML

<TABLE border=1 cellpadding=4 cellspacing=5>
<CAPTION>Légende</CAPTION>
<TR>
   <TH>En-tête 1</TH>
   <TD bgcolor="#9999cc">Cellule 1</TD>
   <TD>Cellule 2</TD>
</TR><TR>
   <TH>En-tête 2</TH>
   <TD>Cellule 3</TD>
   <TD>Cellule 4</TD>
</TR><TR>
   <TH>En-tête 3</TH>
   <TD>Cellule 5</TD>
   <TD>Cellule 6</TD>
</TR>
</TABLE>

• Noter que les colonnes sont calculées une fois que les ligne sont toutes lues

• Problèmes pour la restitution progressive des pages

Des attributs nouveaux pour display:

• Voilà comment traduire HTML4.0 en CSS2 :

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

Le modèle de tableaux en CSS2

table (en HTML: TABLE)

L'élément en question est un tableau de type bloc. C'est un bloc rectangulaire positionné dans un contexte de bloc.

inline-table (In HTML: TABLE)

L'élément en question est un tableau de type flot de texte. C'est un bloc rectangulaire positionné dans un contexte de flot de texte.

table-row (en HTML: TR)

Une colonne de cellules.

table-row-group (en HTML: TBODY)

Un groupe d'une ou plusieurs colonnes.

table-header-group (en HTML: THEAD)

Comme le précédent, mais il s'agit d'un groupe qui est toujours affiché avant tout autre groupe ou colonne, et après l'éventuelle légende de haut de tableau. Ce groupe peut être répété sur chaque page (dans le cas d'impressions de tableaux très longs).

table-footer-group (en HTML: TFOOT)

Comme le précédent, mais après tout autre groupe ou colonne, et avant toute légende de bas de tableau.

table-column (In HTML: COL)

Cet élément n'est pas rendu à l'affichage. Il permet de calculer à l'avance certaines tailles du tableau. Il décrit une colonne de cellules.

table-column-group (en HTML: COLGROUP)

Mêmes caractéristiques que le précédent, mais en groupe.

table-cell (en HTML: TD, TH)

Une cellule.

table-caption (In HTML: CAPTION)

Une légende.

Les cas de column et column-group

Les propriétés suivantes leur sont appliquées :

'border'

Les éventuelles valeurs de border sont utilisées en cas de border-collapse: collapse. Dans ce cas, les calculs de bordures sont effectués à chaque cellule.

'background'

Les couleurs de fond sont appliquées aux cellules du groupe ssi à la fois la cellule et la ligne correspondante ont des couleurs de fond de type transparent.

'width'

Indique la largeur minimum pour la colonne.

'visibility'

Avec visibility: collapse, aucune cellule de la colonne n'est rendue, et les cellules qui empiètent sur d'autres colonnes sont coupées. La largeur du tableau est diminuée d'autant de cette largeur de colonne qui vient de disparaître.

Position de la légende

• caption: top | bottom | left | right | inherit

BODY {
    margin-left: 8em
}
TABLE { /* table centrée */
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}

Comment sont créés les tableaux ?

Lignes (et groupes), colonnes (et groupe), cellules

• Les éléments composant un tableau ont un contenu, une marge interne et une bordure, mais pas de marge externe

• Un tableau est un empilement de lignes (boîte de type bloc)

• Les groupes de colonnes sont placés de gauche à droite ou de droite à gauche en fonction de la propriété direction du tableau

• Les cellules peuvent empiéter sur plusieurs lignes ou plusieurs colonnes. C'est la partie de la cellule la plus en haut (et la plus à guache, ou à droite) qui détermine à quelle ligne (colonne) elle appartient

• Une cellule ne peut pas aller plus bas que la dernière ligne (ou groupe de ligne)

<TABLE> <!-- exemple de gauche, en HTML -->
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>

<TABLE> 
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

Gestion des couleurs de fond

• La couleur définie sur une des couches est visible ssi les sections rectangulaires pertinentes au-dessus d'elle sont transparentes.

• Noter que la couche 2 (groupe de colonnes) n'est pas obligatoirement aussi grande que la table elle-même. Idem pour les colonnes

• En revanche, les groupes de lignes et les lignes doivent couvrir entièrement la couche la plus basse

• Les cellules sans contenu sont transparentes

Gestion des bordures

Deux modèles de gestion de bordures

border-collapse:
  collapse | separate | inherit

• collapse (par défaut) : les traits des cellules et des bords de tableaux fusionnent

• separate : on peut contrôler chacun des traits

separate

border-spacing:
  <length> <length>? | inherit

• La première longueur est horizontale

• Les longueurs ne peuvent être négatives

• La couleur de fond de table se voit à travers

• (Groupes de) lignes et colonnes ne peuvent avoir de bordure

empty-cells:
  show | hide | inherit

• Des cellules sont dites empty-cells si elles sont vides ou si elles ont visibility: hidden

• Les cellules contenant toutes sortes d'espaces, y compris &nbsp; ne sont pas réputées vides

Styles de bordures border-style

none

Pas de bordure

hidden

Comme none, mais dans le cas de bordures "collapse", impose la non-existence aux bordures qui sont partagées (et pas forcément cachées)

dotted

Pointillée

dashed

Série de traits

solid

pleine

double

Doublée. La somme des deux lignes et de l'espace entre ces lignes est égal à border-width

groove

Incrustée

ridge

En relief

inset

Comme groove, mais dans le modèle separate la cellule également semble incrustée

outset

Comme ridge, mais dans le modèle separate la cellule également semble en relief

collapse

• La largeur du tableau contient la moitié de la largeur des bordures du tableau

• Un tel tableau n'a pas de marge interne padding

• On a :

  row-width = (0.5 * border-width₀) + padding-left₁ + width₁ + padding-right₁ + border-width₁ + padding-left₂ +...+ padding-right_n + (0.5 * border-width_n)

  avec n le nombre de cellules de la ligne, et border-width_i qui se réfère à la bordure entre les cellules i et i+1.

• Quand plusieurs styles de bordures peuvent entrer en conflit, c'est le résultat le plus agréable à l'oeil qui sort vainqueur !
  1. une bordure avec border-style: hidden fait disparaître les traits de bordures partagées

  2. border-style: none a la priorité la plus basse (mais est également la valeur par défaut). Il faut que tous les traits communs soient à none pour que le résultat soit none

  3. Si aucun des traits communs n'est à hidden, et au moins un n'est pas à none, les traits les plus épais sont gardés et les styles sont préférés dans cet ordre : 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', et le moins prioritaire: 'inset'.

  4. Si la seule différence de style provient des couleurs, alors la priorité est aux styles définis par : la cellule, la ligne, le groupe de lignes, la colonne, le groupe de colonnes et finalement -le moins prioritaire- le tableau lui-même

Example illustré plus bas :

<STYLE>
  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }
</STYLE>
<BODY>
<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4 
    <TD class="solid-blue"> 5
    <TD class="solid-green"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>
</BODY>

Les pages

• Une page est une boîte rectangulaire qui contient deux zones : la zone d'écriture, qui est la boîte de type bloc initiale dans lequel le reste s'inscrit ; la marge qui est autour

• En CSS2, border et padding ne s'appliquent pas aux pages

• @page { size 8.5in 11in; margin: 2cm } est une règle-at qui définit une page

• Des margin en pourcentage se réfèrent aux dimensions (hauteur ou largeur) de la zone d'écriture

• En revanche, il ne peut y avoir de notion de pourcentage pour la size (ce serait un pourcentage sur soi-même, puisque la zone d'écriture définit la toute première boîte de la page)

size:
  <length>{1,2} | auto | portrait | landscape | inherit

• Si une zone d'écriture dépasse de la page physique, soit on essaye de la rendre à 90 degrés, soit son contenu est mis à l'échelle

• Des hirondelles peuvent être affichées dans les coins de la page physique : marks: cross

• Plusieurs pseudo-classes sont définies pour les pages de gauche, de droite, ou la première page :

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}
@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

• La règle définie par :first est plus forte que celles définies par :left ou :right

• Si un auteur veut forcer sa première page à être à droite ou à gauche (pensons au sens d'écriture des livres), il peut insérer un saut de page initial

Nommage de pages

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}

Dans l'exemple suivant, c'est le rendu "rotated" qui sera utilisé :

<STYLE>
@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
DIV {page: narrow}
TABLE {page: rotated}
</STYLE>
<BODY>
<DIV>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</DIV>
</BODY>

Les coupures dans les pages

page-break-before
  auto | always | avoid | left | right | inherit
page-break-after
  auto | always | avoid | left | right | inherit
page-break-inside
  avoid | auto | inherit

auto

Ni ne force ni n'interdit de coupure avant, après ou dans la boîte considérée.

always

Force systématiquement une coupre avant, après la boîte considérée.

avoid

Évite une coupure avant, après ou dans la boîte considérée.

left

S'arrange pour insérer le nombre de page nécessaire pour que la prochaine soit à gauche.

right

Pareil, mais à droite.

Veuves et orphelins

orphans
  <integer> (2 initialement) | inherit
widows
  <integer> (2 initialement) | inherit

• orphelin : nombre minimum de lignes qu'un paragraphe peut laisser en bas d'une page

• veuve : nombre minimum de lignes qu'un paragraphe peut laisser en haut d'une page

Cascades et pages

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

• La pseudo-classe :left impose sa loi et les marges de gauche sur les pages de gauche seront de 4cm, contre 3cm partout ailleurs

Les CSS s'appliquent à différents types de media

all

Concerne tous les media (d'affichage)

aural

Pour les synthétiseurs de parole (cf. Aural Cascading Style Sheets)

braille

Les appareils tactiles

embossed

Les imprimantes brailles

handheld

Tous les appareils ayant une "réduction" quelconque : petit écran, noir et blanc, bande passante faible

print

Papier (et tout matériel opaque), et prévisualisations papier sur un écran

projection

Vidéo-projecteurs et rétro-projecteurs

screen

Écran (d'ordinateurs) couleur

tty

Media sur lesquels tous les caractères ont la même taille : teletypes, terminaux, écrans LCD, mobiles...

tv

Écrans de télévision (caractérisés par une faible résolution, pas d'ascenceurs, du son, de la couleur)

Exemples de spécifications

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK rel="stylesheet" type="text/css" 
	 media="print, handheld" href="foo.css">
   </HEAD>
   <BODY>
      <P>The body...
   </BODY>
</HTML>

  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Les groupes de media

• Dans la spécification CSS, les media auxquels sont applicables les différentes propriétés ne sont pas listés un par un, mais désignés via les groupes suivants qui les réunissent de manière cohérente

Les feuilles de style audio (ACSS)

Retour sur les pseudo-éléments :before et :after

<STYLE>
H1.chapitre:before {content: "Chapitre "}
P.footnote:after {content: "[Retour <a
href=\"#top" attr(NAME) "\">dans le texte</a>]"}
...
</STYLE>
...
<BODY>
<p>Texte faisant <a href="#fn1" name="topfn1">appel à
une note de base de page</a>...
</BODY>

• L'exemple suivant illustre le fait que :before est par défaut un flot de texte

Q:before {
  content: open-quote;
  color: red
}
BODY:after {
    content: "C'est fini"; /* exercice: dans quel cas ce texte sera utilisé ? */
    display: block; /* noter cette nécessité */
    margin-top: 2em;
    text-align: center;
}

Que peut contenir content: ?

content:
[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote
           | no-open-quote | no-close-quote ]+
  | inherit 

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }
IMG:before { content: attr(alt) }
H1:before {
    display: block;
    text-align: center;
    content: "chapter\A chapitre"
}

• Le content n'est pas réinterprêté par le navigateur

• Le style physique appliqué au content est celui de l'élément auquel il est adjoint

Interactions entre :before :after et les éléments run-in ou compact

1. Un élément de type run-in ou compact (ér-ic) dispose d'un pseudo-élément :before (ou :after) de type in-line (le défaut) : ce dernier est pris en compte lors du calcul de la taille de l'élément (cas de compact) et se retrouve dans la même boîte de type bloc que l'élément en question

2. Un ér-ic dispose d'un pseudo-élément :before de type : le pseudo-élément est formatté en tant que bloc au-dessus de l'élément, et n'est pas pris en compte dans le calcul de la taille de l'élément

3. Un ér-ic dispose d'un pseudo-élément :after de type : le pseudo-élément est formatté en tant que bloc indépendant, et l'élément lui-même ne peut plus être de type inline

4. L'élément suivant un ér-ic dispose d'un pseudo-élément :before de type bloc : spécification un peu floue, puisqu'il s'agit de formatter l'élément en fonction de la boîte de type bloc qui résulte du before:

5. L'élément suivant un ér-ic dispose d'un pseudo-élément :before de type inline : comme pour le cas précédent, mais en s'aidant de la valeur de display de l'élément auquel appartient le pseudo-élément

6. Aspirines ?

<STYLE>
H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }
</STYLE>
<BODY>
<H3>Les saisons</H3>
<P>le printemps
<P>l'été
</BODY>

Ce qui pourrait donner :

Les saisons: ... le printemps
... l'été

La dite note est automatiquement suivie de [Retour <a
href="#topfn1">dans le texte</a>]

Le problème des guillemets

• Problème ; les glyphes utilisées pour les guillemets dépendent de la langue du texte, du niveau d'indentation des paragraphes et du type de texte cité

The device of the order of the garter is “Honi soit qui mal y pense.”
Il disait: « Il faut mettre l'action en ‹ fast forward ›.»

Définitions des (paires de) guillemets

• On définit des paires open-quote close-quote

Par exemple :

<STYLE>
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }
Q:before { content: open-quote }
Q:after  { content: close-quote }
</STYLE>
<BODY>
<DIV lang="en">
    <P><Q>Quote me!</Q>
</DIV>
<DIV lang="en">
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
</DIV>

donnera :

"Quote me!"
«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»

On pourrait ajouter les deux règles suivantes, pour s'assurer que du texte norvégien cité dans du texte anglais est bien entouré des guillemets anglais (ce qui est l'habitude) et réciproquement :

[LANG|=en] > * { quotes: """ """ "'" "'" }
[LANG|=no] > * { quotes: "«" "»" "<" ">" }

Noter qu'il est possible de définir une absence de guillemets :

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

Codes ISO 10646 à retenir

Les compteurs

counter-increment counter-reset

counter-reset: [ <identifier> <integer>? ]+ | none | inherit
counter-increment: [ <identifier> <integer>? ]+ | none | inherit

/* tous les compteurs sont mis zéro à l'origine, par
 * la balise racine (<HTML>)
 */
H1:before {
    content: "Chapitre " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}
H3 { counter-reset: section -1;}
H3 { counter-reset: imagenum 99;} /* cette règle est plus forte que
                                   * la précédente (cascade) qui ne
                                   * s'exécutera pas.
                                   */
H4 { counter-reset: section -1 imagenum 99;} /* Les deux reset on lieu */

• Si un élément remet à zéro un compteur et l'incrémente, la remise à zéro a bien lieu avant

• Si un élément remet à zéro ou incrémente un compteur et l'utilise, la valeur utilisée de ce compteur est celle après la remise à zéro ou l'incrémentation

Compteurs imbriqués, et portée

• La ré-utilisation d'un compteur dans un enfant d'un élément crée une nouvelle instance du compteur (heureusement)

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

produit bien quelque chose comme :

1. li d'un premier ol
2. li du premier ol
  1. li d'un deuxième ol inclus dans le premier
  2. li du deuxième ol inclus dans le premier
3. li du premier ol
4. li du premier ol
  1. li d'un troisième ol inclus dans le premier
5. li du premier ol

Par ailleurs,

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

produit ceci :

1 qqq
2 www
  2.1 eee
  2.2 rrr
3 ttt
  3.1 yyy
    3.1.1 uuu
    3.1.2 iii
4 ooo

Styles appliqués aux compteurs

• Tous les styles de list-style sont applicables

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

Et puis aussi...

H2.secret {counter-increment: count2; display: none} /* n'est pas incrémenté */
H3.secret {counter-increment: count3; visibility: hidden} /* est bien incrémenté */

Marqueurs

• La plupart des éléments de type bloc ne créent qu'une seule boîte

• Parfois, il peut être intéressant de créer au passage une autre boîte contenant un élément de décoration, qui ne doit pas influer sur la position de la boîte principale (contraierement a before: et after:)

• Pour cela, on a à notre disposition display: marker

marker-offset

      <STYLE type="text/css">
           P { margin-left: 8em } /* Make space for counters */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }   
      </STYLE>
   <BODY>
     <P> This is a long preceding paragraph ...
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
     <P> This is a long following paragraph ...
   </BODY>

produira ceci :

        This is a long preceding
        paragraph ...
      
   i.   This is the first item.
  ii.   This is the second item.
 iii.   This is the third item.
      
        This is a long following
        paragraph ...

width

      <STYLE type="text/css">
           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   <BODY>
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
   </BODY>

produira ceci :

  (1)    This is the 
         first item.
  (2)    This is the 
         second item.
  (3)    This is the 
         third item.

Les listes

     <STYLE type="text/css">
          OL { list-style-type: lower-roman }   
     </STYLE>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>

produira ceci (noter que la justification des nombres dépend du bon vouloir du navigateur)  :

  i This is the first item.
 ii This is the second item.
iii This is the third item.

Types de listes

list-style-type:
  disc | circle | square | decimal | decimal-leading-zero |
  lower-roman | upper-roman | lower-greek |
  lower-alpha | lower-latin | upper-alpha | upper-latin |
  hebrew | armenian | georgian | cjk-ideographic |
  hiragana | katakana | hiragana-iroha | katakana-iroha |
  none | inherit

list-style-image:
  <uri> | none | inherit

list-style-position:
  inside | outside | inherit

list-style:
  [ <'list-style-type'> || <'list-style-position'> ||
    <'list-style-image'> ] | inherit

• Pour éviter certains problèmes un peu complexes, on préférera toujours associer des list-style à OL, UL, plutôt qu'à LI. Les LI en hériteront de toute façon

• UL { list-style: url("http://png.com/ellipse.png") disc } spécifie une image, qui est remplacée par le "disc" interne au navigateur si on ne peut la télécharge

Spécifier la forme du curseur

cursor:
   [ [<uri> ,]*
     [ auto | crosshair | default | pointer | move |
       e-resize | ne-resize | nw-resize | n-resize |
       se-resize | sw-resize | s-resize | w-resize|
       text | wait | help ]
   ] | inherit

• S'applique à tous les éléments

• uri : liste préférentielle séparée par des virgules, avec éventuellement un -unique- curseur interne

Outils de création

http://www.w3.org/Style/CSS/#editors

Outils de validation

http://jigsaw.w3.org/css-validator/

Les erreurs classiques

• Pas d'_ dans les noms de classe et dans les ID

• Les noms de classe et les ID ne commencent pas par un chiffre

• Autres limitations sur les caractères permis dans les noms de classe, d'ID, de sélecteurs (cf. spécification)

• Dans les règles, ce sont des : et pas un = (même si IE l'accepte...)

• Ne pas oublier le # au début des couleurs en hexadécimal

• Les URI ne sont pas entre "", mais dans url()

• Les unités des longueurs doivent être précisées

• Une déclaration d'une propriété inconnue dans une règle n'invalide que cette propriété

  DIV {
    color: black;
    backround-color: #eeeeee;
    }
  

• Un sélecteur incorrect invalide toute la règle : DIV : P {color: black;}

• Une valeur incorrecte est ignorée : DIV { margin: 5pixels; color: blue;} revient à DIV {color: blue;}

• On ne peut pas inventer de nom de règles-at : @intranet { DIV {background-color: silver;}}

Comment contourner certains bugs ?

background-color chez Netscape

Il faut jouer avec border: none et margin: none : http://www.css.nu/examples/workarounds.html

Autres bugs de Netscape

http://www.micropop.com/workshop/css.html

Autres bugs d'Internet Explorer 3

http://www.micropop.com/workshop/ie3css.html

Comment faire aussi bien sur Netscape que sur Explorer ou autres, et quelque soit le système d'exploitation ?

font-family

Toujours bien finir par une des familles prédéfinies
Intégrer dans la liste une police typique de Windows, car IE4 dégraderait les autres polices

font-size

IE3 interprête les em comme des px. Utiliser les %ages à la place. 1.5em = 150%

Bien mettre les unités. 12 est 12pt pour NS et 12px pour IE

xx-small ... xx-large sont rendus différement par les navigateurs. utiliser les %ages

color

À part les 16 couleurs nommées standard, utiliser les couleurs heaxdécimales. Les autres couleurs nommées ne sont pas rendues de manière identique par les différents navigateurs

À quel endroit définir un style ?

D'après le livre de Daniel Glazman

• Style local (porté directement par l'élément)
• Style global-local (porté par la page web concernée, dans son HEADer)
• Style global (défini à côté et importé)

Style local

• À utiliser quand le style porté par l'élément a une grande importance. L'algorithme cascade lui donne en effet priorité (un peu comme s'il avait un séclecteur ID anonyme (son "mot de trois lettres" est "a--"), et d'autant plus qu'il est déclaré plus bas qu'un style global-local)

  <STYLE>
  #d1 {color: blue;}
  #p2 {color: green;}
  </STYLE>
  <BODY>
  <DIV ID="d1">
    <P STYLE="color: red;">sera en rouge</P>
  </DIV>
  <P ID="p2" STYLE="color: red;">sera également en rouge</P>
  </BODY>
  

• Pratique pour faire des copier-coller de documents en documents

Style global-local

• Quand on désire que le document soit entièrement défini par lui-même (mais il reste les images et fonds de page qui sont quand-même dans des fichiers extérieurs)

• Permet de définir un style commun, affiné sur certains éléments grâce aux sélecteurs : on peut appliquer un style à un élément en fonction de son contexte (ses ancêtres, ses voisins, sa langue, etc.)

• Quand on veut prendre en compte les media de restitution

• Il reste toujours possible d'importer une feuille externe avec @import {}

• Cette méthode n'est pas adaptée dans le cas d'un ensemble de documents devant partager un même style

• Copier-coller du code HTML d'un document à un autre n'emporte pas le style (dans les éditeurs directement en code HTML...)

• L'éditeur utilisé doit savoir gérer HTML et CSS (alors qu'une feuille externe peut être éditée par un simple éditeur CSS)

Style global

• La solution pour un ensemble de documents devant partager un style

• Copier-coller du code HTML d'un document à un autre n'emporte pas le style, mais le style y est retrouvé (à condition que le document-cible fasse bien référence à la même feuille externe)

• La modification d'un style à un seul endroit se retrouve partout

• On peut développer plusieurs feuilles externes de plus en plus spécifiques (noter qu'on les range aussi dans un répertoire spécifique), et l'algorithme de cascade gère le reste :

  <LINK rel="STYLESHEET" href="/styles/site.css" type="text/css">
  <LINK rel="STYLESHEET" href="/styles/rubrique.css" type="text/css">
  <LINK rel="STYLESHEET" href="/styles/editorial.css" type="text/css">
  

• Des styles encore plus spécifiques restent possibles (global-local puis local)

• La feuille externe n'est chargée qu'une fois par le navigateur (en théorie)

• La taille globale du document HTML est réduite

• Attention aux feuilles externes rangées dans un répertoire relatif (ne pas les oublier si on change la structure du site) : <LINK rel="STYLESHEET" href="../styles/site.css" type="text/css">

• Fournissez aux auteurs la description des styles globaux auxquels ils peuvent se référer, des exemples d'application et le code HTML correspondant (et/ou les manipulations à faire dans son éditeur de pages)

Comment organiser sa feuille ? Quels types de sélecteurs utiliser ?

D'après le livre de Daniel Glazman

Classes

• *.bleu {color: blue} s'applique à tous les éléments ayant la classe "bleu" et pouvant la supporter

• DIV.example { ... }
  PRE.example { ... }
  SPAN.example { ... }
  

  permet de définir des styles dans des contextes de positionnement différents qui relèvent pourtant selon l'auteur d'un même type de discours.
  Autre exemple d'organisation de feuilles, en réunissant des éléments HTML de "niveaux" variés :

  H1.legal {font-family: ... }
  P.legal { ... }
  SPAN.legal { font-weight: bold;}
  IMG.legal:after {content: "(c) ...}
  

• Utiliser la possibilité d'attribuer plusieurs classes à un élément, et d'attribuer des styles en fonction de la combinaison des classes qui sont attribuées à cet élément

Sélecteurs d'ID

• Un seul élément par page HTML peut avoir un ID donné. Les styles associés sont donc ultra-spécifiques.

• Profitez-en pour mettre de la sémantique dans vos ID :

  P#abstract {font-style: italic;}
  

• Hélas, en HTML, ID et NAME remplissent quasiment le même but, (mais pas en XML)

Styles définis par le contexte

• Permet d'agir sur des éléments qui n'ont a priori aucun style défini (ni global, ni global-local, ni local)

  <STYLE>
  DIV P { ... }
  TABLE P { ... }
  H1 + P { ... }
  </STYLE>
  

• C'est en fonction du contexte qu'on peut décider des marges, bordures etc. Mais on peut aussi vouloir décider d'attributs plus physiques comme la graisse, la couleur etc.

• L'exemple suivant permet d'appliquer un style à un "premier paragraphe" sans avoir à s'inquiéter à chaque fois qu'on insère dans la page HTML un paragraphe juste avant ce premier paragraphe :

  H1 + P:before {content: "Résumé: ";}
  H1 + P + P:first-letter { font-size: 200% }
  

  Ce type d'organisation est à comparer avec le précédent (par sélecteurs d'ID)

Une feuille de style équivalente au rendu classique d'HTML4.0

ADDRESS,
BLOCKQUOTE, 
BODY, DD, DIV, 
DL, DT, 
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4, 
H5, H6, IFRAME, 
NOFRAMES, 
OBJECT, OL, P, 
UL, APPLET, 
CENTER, DIR, 
HR, MENU, PRE   { display: block }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.33 }
H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; margin: 1em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }
BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS    { font-style: italic }
PRE, TT, CODE,
KBD, SAMP       { font-family: monospace }
PRE             { white-space: pre }
BIG             { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB             { vertical-align: sub }
SUP             { vertical-align: super }
S, STRIKE, DEL  { text-decoration: line-through }
HR              { border: 1px inset }
OL, UL, DIR,
MENU, DD        { margin-left: 40px }
OL              { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL    { margin-top: 0; margin-bottom: 0 }
U, INS          { text-decoration: underline }
CENTER          { text-align: center }
BR:before       { content: "\A" }

/* An example of style for HTML 4.0's ABBR/ACRONYM elements */

ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
A[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }


/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/* Elements that are block-level in HTML4 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, 
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, 
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, 
COL, COLGROUP, TD, TH, CAPTION 
                { unicode-bidi: embed }
/* End bidi settings */


@media print {
  @page         { margin: 10% }
  H1, H2, H3,
  H4, H5, H6    { page-break-after: avoid; page-break-inside: avoid }
  BLOCKQUOTE, 
  PRE           { page-break-inside: avoid }
  UL, OL, DL    { page-break-before: avoid }
}

@media speech {
  H1, H2, H3, 
  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
  H1            { pitch: x-low; pitch-range: 90 }
  H2            { pitch: x-low; pitch-range: 80 }
  H3            { pitch: low; pitch-range: 70 }
  H4            { pitch: medium; pitch-range: 60 }
  H5            { pitch: medium; pitch-range: 50 }
  H6            { pitch: medium; pitch-range: 40 }
  LI, DT, DD    { pitch: medium; richness: 60 }
  DT            { stress: 80 }
  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  DFN           { pitch: high; pitch-range: 60; stress: 60 }
  S, STRIKE     { richness: 0 }
  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  U             { richness: 0 }
  A:link        { voice-family: harry, male }
  A:visited     { voice-family: betty, female }
  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}

Passer vos fichiers HTML en <HTML correct + CSS2>

D'après le livre de Daniel Glazman

Éléments

• B => STRONG (ou font-weight: bold)

• I => EM (ou font-style: italic)

• BIG => SPAN {font-size: larger)

• SMALL => SPAN {font-size: smaller)

• TT => SPAN {font-family: monospace}

• S et STRIKE => SPAN {text-decoration: line-through}

• U => SPAN {text-decoration: underline}

• BDO => SPAN {unicode-bidi: bidi-override}

• CENTER =>
  • si CENTER contient un seul élément de type bloc, mettre text-align: center sur ce fils
  • si CENTER est le seul fils d'un autre élément, mettre text-align: center sur cet élément père
  • sinon, englober par UN DIV {text-align: center}

• S'il représente un élément de type bloc, remplacer par DIV

• S'il représente un élément de type flot de texte, remplacer par SPAN

• FONT COLOR => color: ...

• FONT FACE => font-family: ...

• FONT SIZE (1..7) => font-size: (xx-small .. xx-large)

• FONT SIZE (+1 -1) => font-size: (larger smaller)

• FONT SIZE (+2 -2) => mettre deux span imbriqués

• FONT SIZE (+3 -3) => mettre trois span imbriqués

Attributs

• BODY LINK => A:link {color ...}

• BODY ALINK => A:active {color ...}

• BODY VLINK => A:visited {color ...}

• BODY TEXT => color: ...

• BODY BACKGROUND => background-color: url()

• BODY BGCOLOR => color: ...

• BORDER => border-width: ...px

• CELLSPACING => border-spacing: ...

• CELLPADDING => padding: ... sur les TD et TH

• CLEAR (de BR /LEFT/RIGHT/NONE/ALL/) => clear: /left/right/none/both/

• COLOR => color: ...

• DIR => direction: ...

• FACE => FONT

• HEIGHT => height: ...

• WIDTH => width: ...

• HSPACE => margin-left: ... et margin-right: ...

• VSPACE => margin-top: ... et margin-bottom: ...

• MARGINHEIGHT (de FRAME et IFRAME) => margin-top: ... et margin-bottom: ...

• MARGINWIDTH => margin-left: ... et margin-right: ...

• NOSHADE (de HR) => border-style: solid

• VALIGN => vertical-align: ...

• Si c'est un attribut de IMG OBJECT APPLET (LEFT RIGHT) => float: (left right)

• Si c'est un attribut de IMG OBJECT APPLET (BOTTON MIDDLE TOP) => vertical-align: (bottom middle top)

• S'il est porté par CAPTION LEGEND (LEFT RIGHT TOP BOTTOM) => caption-side (left right above below)

• S'il est porté par TABLE => mettre la table dans un DIV {text-align: ...}

• Dans les autres cas (LEFT CENTER RIGHT JUSTIFY) => text-align: ...

Conformité

http://www.css.nu/pointers/bugs.html

http://webreview.com/wr/pub/guides/style/mastergrid.html

Sélecteurs avancés CSS2 : http://webreview.com/pub/guides/style/style.html

Tests CSS1 au W3C : http://www.w3.org/Style/CSS/Test/

Tests de conformité aux CSS2, par Daniel Glazman : http://www.editions-eyrolles.com/livres/glazman/Tests/

Une liste de bugs pour Mozilla (par David Baron) : http://www.people.fas.harvard.edu/~dbaron/css/browsers/nglay

Tests sur les positionnements flottants : http://www.w3.org/Style/CSS/Test/float

Les 10 bugs CSS2 majeurs d'IE sous windows et mac, et d'Opéra : http://www.webstandards.org/css/#The_Top_10_Lists

Différences entre CSS1 et CSS2

Nouvelles fonctionnalités par rapport à CSS1

• Le concept de media de restitution

• La valeur 'inherit' pour toutes les propriétés

• Le concept de pagination (paged media)

• Les feuilles de styles audio

• L'internationalisation de quelques propriétés : styles de numérotation des listes, textes bidirectionnels, citations (et citations dans citations)

• Un mécanisme de choix de polices de caractères étendu : recherche intelligente , synthèse, téléchargement, polices de base du système d'exploitation, font-size-adjust

• La gestion des tableaux

• Le positionnement relatif et absolu

• D'autres types de boîtes (en plus de bloc et flot de texte)

• overflow, clipping, visibility

• La possibilité de spécifier des hauteurs et largeurs minimales et maximales

• Un mécanisme de sélecteurs étendu (filliation, adjacence, sélecteurs d'attributs...)

• La génération automatique de contenus, les compteurs et numérotation automatique, les marqueurs

• L'ombrage

• De nouvelles pseudo-classes : :first-child, :hover, :focus, :lang

• La possibilité de se reférer aux couleurs, aux polices et aux curseurs du système

• La possibilité de faire des entourages (outline)
  (concept différents des border car ils ne prennent pas de place et peuvent ne pas être rectangulaires)

Différences sémantiques

• !important dans une feuille de style d'auteur était plus important que dans une feuille d'utilisateur en CSS1. C'est le contraire en CSS2 !

• En CSS1 margin-right était ignoré si margin-left et width étaient positionnés. En CSS2, cela dépend de la direction du texte

• En CSS1 plusieurs propriétés (padding par ex.) avaient des valeurs se référant à la largeur du parent. Or de telles valeurs doivent toujours se référer à la largeur d'une boîte de type bloc, d'où l'introduction en CSS2 de l'idée de boîte-conteneur

• La valeur initiale de display est inline en CSS2 et block en CSS1

• En CSS1, clear pouvait s'appliquer à tous les éléments, ce qui est une erreur. En CSS2, il ne s'applique qu'aux blocs

• En CSS1, :link :visited : active sont mutuellement exclusifs. En CSS2 :active peut s'appliquer avec les deux autres

• Le facteur d'échelle suggéré entre deux font-size adjacentes (xx-small -> xx-large) est passé de 1.5 (CSS1) à 1.2

• Ce qui est hérité via font-size, c'est la valeur calculée de la police parent (17pt par ex.), pas celle qui a été effectivement affichée (18pt, parce que 17pt n'était pas disponible)

• Dans la description de list-style-position dans CSS1, on pouvait croire que inside avait un effet sur la marge de gauche du texte et non pas sur la position de la bille. En CSS2, c'est plus clair

• Il existe également quelques petites différences dans l'étape de reconnaissance des symboles du "langage" CSS