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 :
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 :
vous verrez dans les étiquettes un attribut CLASS :
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.