BUSI 2423 Lecture Notes - Lecture 16: Voseo, Dynamic Html, Serbian Language
3 Jun 2018
School
Department
Course
Professor
1
Les feuilles de style
Chapitre 1: Concept et utilité
1.1 Présentation
Le concept des feuilles de style n'est pas à proprement parler une nouveauté dans le domaine de la publication
Html. Introduit en 1997 par Microsoft avec son Internet Explorer 3.0 (mais elles existaient déjà avec Arena
sous Unix), ces feuilles de style n'ont connu qu'un intérêt limité du fait que celles-ci n'étaient pas reconnues par
Netscape Navigator 3.0.
Depuis les choses ont bien changé. D'abord les browsers 4.0 de Microsoft et de Netscape reconnaissent tous
deux les feuilles de style et surtout, la norme Html 4.0 en a repris le concept (CSS version 1) et le recommande
d'ailleurs vivement aux "Web designers".
1.2 Concept
Dans un document d'une certaine importance, il arrive fréquemment que l'on attribue à certains éléments des
caractéristiques de mise en forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en
gras et en couleur bleue.
On peut imaginer que l'on puisse donner à cette définition de mise en forme un nom soit "titre" et qu'à chaque
nouveau chapitre, plutôt que d'écrire chaque fois le nom du titre et puis de devoir le mettre en Arial, gras, bleu,
l'on puisse dire à l'ordinateur, nom du chapitre mais dans la mise en forme que j'ai défini sous le nom de "titre".
Cette définition de mise en forme particulière, on va l'appeler feuille de style.
Le concept de feuilles de style [Style Sheets] est né. Il existait déjà dans les traitements de texte comme dans
Word de Microsoft (comme par hasard...). Allez dans le menu Format de Word, vous y trouvez Style ! Il ne
restait plus qu'à coupler le concept au langage Html par des propriétés spécifiques.
<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1>
<H2><B><FONT COLOR="green">- A -</FONT></B></H2>
<H3><B><FONT COLOR="red">...a....</FONT></B></H3>
<H1><B><FONT COLOR=blue>Titre2</FONT></B></H1>
<H2><B><FONT COLOR="green">- B-</FONT></B></H2>
<H3><B><FONT COLOR="red">...b....</FONT></B></H3>
STYLE des titres
STYLE des sous-titres
STYLE du texte
STYLE des titres
STYLE des sous-titres
STYLE du texte
Vous remarquez que l'on parle de feuilles de style [ style sheets ] car le but du jeu est d'en définir plusieurs. On
parle aussi de feuilles de style en cascade [ Cascading Style Sheets ou CSS ] car en cas de styles identiques, un
ordre de priorité sera déterminé par le browser (voir FAQ).
Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un
développement à part dans la publication de pages Web.
1.3 Utilité et avantages
• Séparation du contenu et de la mise en forme.
• Cohésion de la présentation tout au long du site avec les feuilles de style externes.
• Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela en quelques lignes plutôt que de
devoir changer un grand nombre de balises.
• Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à ses différentes versions.
• Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.
• Réduire le temps de chargement des pages.
• Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes,
contrôle des marges et des indentations (sans devoir utiliser de tableaux ou de balise <DD>...) et ainsi
augmenter la créativité des écrivains du Web.
2
• Permettre le positionnement au pixel près du texte et/ou des images sans passer par les "layers" exclusifs à
Netscape 4.0.
1.4 Compatibilité
Les feuilles de style fonctionnent sous :
Explorer 3.0 mais de façon incomplète
Explorer 4.0
Netscape 4.0
Attention !!! Les feuilles de style ne sont pas reprises par Netscape 3.0.
Chapitre 2 : Définition d'un style
La définition de base d'un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }
Exemple :
H3 { font-family: Arial; font-style: italic }
Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront
comme style Arial et italique.
Simple! Mais de nombreux commentaires s'imposent :
• Les feuilles de style portent sur des balises principalement et quelques autres éléments comme par exemple
A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des
feuilles de style, on peut citer les en-têtes Hn, P, BODY...
• Les propriétés de style sont entourées par des "{" et pas des [ ou des parenthèses.
• Le couple "propriété de style/valeur" est séparé par un double-point (:).
• Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).
• Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur".
• L'espace entre propriétés de style et valeur n'est pas obligatoire mais aide fortement à la lisibilité du code
source.
• Pour la lisibilité toujours, vous pouvez écrire vos styles sur plusieurs lignes :
H3 {font-family: Arial;
font-style: italic;
font-color: green}
• On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs
par des virgules.
H3 {font-family: Arial, Helvetica, sans-serif}
• On peut attribuer un même style à plusieurs balises (séparées par des virgules).
H1, H2, H3 {font-family: Arial; font-style: italic}
Chapitre 3 : Styles internes
Il faut maintenant incorporer les styles dans le document Html. Commençons par le plus simple, soit
l'incorporation à l'intérieur d'une page. D'où le titre "Styles internes".
3.1 A l'intérieur des balises <HEAD></HEAD>
Cette façon de procéder est de loin la plus commune et la plus logique. D'abord parce que les balises HEAD
contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que
l'on rejoint ainsi l'essence même des feuilles de style qui est de séparer les éléments de mise en forme du
contenu.
3
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
La ou les feuille(s) de style
-->
</STYLE>
</HEAD>
<BODY>
• La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style.
• L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css).
Pour l'instant, il s'agit de la seule possibilité mais on peut prévoir à l'avenir d'autres versions de ce
"langage".
• La balise Html de commentaires <!-- ... --> empêche que les browsers qui ne connaissent pas les feuilles de
style, tentent d'interpréter ces instructions. Les informations à l'intérieur des tags de commentaires seront
ignorées par ces browsers.
• Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique
(C, C++, Javascript...) de /* commentaires */.
3.2 A l'intérieur des balises <BODY></BODY>
On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (BODY) du document. Cette façon de
faire nous paraît illogique et peu conforme à l'esprit des feuilles de style qui est de définir un style déterminé
valable pour la globalité du document. Mais elle existe pour quelques utilisations spécifiques...
<HTML>
<BODY>
<H1 style="font-family: Arial; font-style: italic"> blabla </H1>
</BODY>
</HTML>
Signalons :
• que le style Arial, italique n'affectera que cette seule balise H1.
• que la syntaxe est légèrement différente de la précédente.
• que l'écriture : <STYLE type="text/css">H1 { "font-family: Arial; font-style: italic" }</STYLE>
fonctionne aussi.
Chapitre 4 : Styles externes
C'est déjà bien de pouvoir définir une présentation de style valable pour une page (styles internes). Mais CSS
nous propose mieux. Définir une présentation de style valable pour plusieurs pages et même pour toutes les
pages d'un site. Ce qui est possible, en créant une page externe qui regroupera toutes les feuilles de style, et en
reliant chaque page à cette page de style.
On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit styles.css qui contiendra toutes
les feuilles de style.
<HTML>
<HEAD>
--- Les différentes feuilles de style ---
</HEAD>
<BODY>
</BODY>
</HTML>
