Incorporation de styles
Feuilles de styles locales :
HTML :
<P id=parag style="font-size:14pt ; font-style:bold;
color:red" > Texte du paragraphe </P>
sera rendu ainsi
:
Vous remarquez que la balise <P> est fermée ( alors que
cette fermeture est facultative). Avec les CSS, il est
en effet préférable de fermer systématiquement les
balises ( paragraphes, cellules des tables, etc...).
Une feuille de style serait incapable de repérer un
nouveau paragraphe si la balise </P> était manquante.
DHTML ( script) :
Pour accéder à ces attributs de styles en DHTML, le
DOM les identifie sous la forme :
Objet.style.fontSize , où
Objet représente la valeur de l'attribut
id correspondant à la balise.
<SCRIPT
language=VBScript>
Sub parag2_onClick()
parag2.style.fontSize = 36
parag2.style.color = "blue"
parag2.style.background = "yellow"
parag2.style.width= 560
end sub
</SCRIPT>
sera rendu
ainsi
Texte du paragraphe ( cliquez le bouton)
Feuilles de styles incorporées :
Hello ! (cliquez les boutons)
et modifié dynamiquement par script
(DHTML), sur clic des boutons .
Feuilles de styles externes :
<HEAD>
<LINK REL="STYLESHEET" HREF="monstyle.css" TYPE="text/css">
</HEAD>
La balise <LINK> permet
d'identifier un fichier attaché à la page. Ici la feuille
de style est contenue dans le fichier monstyle.css situé dans
le même répertoire que la page.
Toutes les balises de la page seront alors interprétées
avec les styles définis le fichier *.css
Comme pour les autres feuilles de styles, les langages de
script pourront accéder aux feuilles de styles externes par
l'intermédiaire du DOM sous la forme
Objet.style.AttributDeStyle
La création d'une feuille de style externe est une
opération très simple. Les déclarations de styles sont
placées dans un fichier qui sera attachée à la page
HTML au moment de son chargement.
- A l'aide d'un simple éditeur de texte, on
saisit les différentes instructions de la feuille
de style, en utilisant exactement la même syntaxe que
pour une feuille de style incorporée ( voir ci-dessus
) en omettant cependant les balises
<STYLE>...</STYLE>
- Enregistrez ce fichier sous
"monstyle.css"
Vous pourrez maintenant lier à ce fichier autant
de pages HTML que vous souhaitez en employant la balise
<LINK>. L'ensemble
des pages ayant ce lien feront appel aux styles définis
dans le fichier monstyle.css