Présentation du fichier CSS (feuille de styles en cascade)

Le modèle Dynamic HTML Standard Edition contient un fichier CSS commun à tous les fichiers HTML générés. Ce fichier, standard.css, se trouve dans le répertoire de support et est copié vers le répertoire de sortie lorsque vous générez le projet. Le fichier CSS est référencé dans la section <HEAD> des fichiers HTML :

<link rel="StyleSheet" href="standard.css" type="text/css" 
media="screen"> 

L'étiquette <LINK> est le seul endroit où est identifié le fichier CSS. Dans le document, toutefois, vous trouverez des codes HTML qui font référence à des composants de la feuille de styles. Au lieu d'un paragraphe tel que :

<H1> 
Ceci est du texte d'en-tête de niveau 1. 
</H1> 

vous verrez dans les étiquettes un attribut CLASS :

<H1 class="Heading1"> 
Ceci est du texte d'en-tête de niveau 1. 
</H1> 

L'attribut CLASS fait référence à un style appelé Heading1, lequel est défini dans le fichier CSS.

La première section du fichier CSS définit les valeurs par défaut du document :

/* Valeurs par défaut du document */ 
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-
size: 10pt; font-style: normal; font-weight: normal; color: 
#000000; background-color: #FFFFFF; letter-spacing: normal; text-
align: left; text-indent: 15pt; word-spacing: normal} 
a:active { color: #0000CC} 
a:hover { color: #CC0033} 
a:link { color: #3366CC} 
a:visited { color: #9999CC} 

La section suivante définit les attributs de bloc, ou styles de paragraphes. Ce sont les éléments appelés par l'attribut CLASS. Le fichier standard.css contient des définitions de styles pour tous les styles de paragraphes et de caractères qui apparaissent dans le modèle WebWorks Publisher Standard Edition.

/* Styles de paragraphes */ 
.Body { margin-left: 30pt} 
.BodyRelative { } 
.CellBody { } 
.CellHeading { text-align: center; font-weight: bold; color: 
#003366} 
.GroupTitlesIX { font-size: 16pt; color: #003366} 
.Heading1 { font-size: 18pt; color: #003366 ; font-weight: bold; 
margin-top: 20px} 
.Heading2 { font-size: 15pt; font-weight: normal; color: #003366} 
.Heading3 { font-size: 12pt; font-weight: bold; color: #003366} 
... 

La définition du style Heading1 spécifie des caractères de 18 points de couleur 003366 (bleu gris), en gras, et une marge de 20 pixels par rapport au paragraphe précédent (ou l'étiquette précédente). Si vous modifiez ces paramètres dans le fichier CSS, tous les éléments qui utilisent le paramètre CLASS=Heading1 changeront automatiquement.

La dernière section du fichier CSS fournit des définitions de mise en forme au niveau des caractères :

/* Styles de caractères */ 
.Code { } 
.CodeEmphasis { font-style: italic} 
.CodeStrong { font-weight: bold} 
.Emphasis { font-style: italic} 
.EmphasisUnderline { font-style: italic; text-decoration: 
underline} 
.Strong { font-weight: bold} 
.StrongUnderline { font-weight: bold; text-decoration: underline} 
.SubScript { } 
.SuperScript { } 
.WebJump { } 

Les définitions contenues dans la section des styles de caractères sont également appelées par des étiquettes CLASS. Par exemple, vous pourriez avoir :

<STRONG CLASS="Strong">Ce texte sera en gras.</STRONG> 
 

Remarque : L'utilisation d'une étiquette <STRONG> avec un attribut de classe Strong peut sembler redondante, mais elle est nécessaire pour les navigateurs qui ne prennent pas en charge les fichiers CSS. Ces navigateurs réagiront à l'étiquette <STRONG> et ignoreront les informations de mise en forme CSS.


Quadralay Corporation
Voice: (512) 719-3399
Fax: (512) 719-3606
info@webworks.com