Introduction au JavaScript| Intrduction à l'HTML
|
Introduction au JavaScript |
Concept et utilité
| top |
|
|
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".
|
|
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> | STYLE des titres |
| <H2><B><FONT COLOR="green">- A -</FONT></B></H2> | STYLE des sous-titres |
| <H3><B><FONT COLOR="red">...a....</FONT></B></H3> | STYLE du texte |
| <H1><B><FONT COLOR=blue>Titre2</FONT></B></H1> | STYLE des titres |
| <H2><B><FONT COLOR="green">- B-</FONT></B></H2> | STYLE des sous-titres |
| <H3><B><FONT COLOR="red">...b....</FONT></B></H3> | 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.
|
|
|
|
Les feuilles de style fonctionnent sous :
Attention !!! Les feuilles de style ne sont pas reprises par Netscape 3.0.
Définition d'un style
| top |
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 :
H3 {font-family: Arial;
font-style: italic;
font-color: green}
H3 {font-family: Arial, Helvetica, sans-serif}
H1, H2, H3 {font-family: Arial; font-style: italic}
Styles internes
| top |
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".
|
|
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.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
La ou les feuille(s) de style
-->
</STYLE>
</HEAD>
<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 :
Styles externes
| top |
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>
Ensuite, on crée une page normale soit page1.htm (bien entendu dans le même répertoire que le fichier styles.css).
<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href="styles.css">
<HEAD>
Les classes et les ID
| top |
|
|
Mais on désire parfois affecter des styles différents à une même balise. Pas de problèmes, les feuilles de style vous proposent la solution des classes [class].
La syntaxe est ici aussi des plus simple. La définition d'un style était :
balise { propriété de style: valeur }
Elle devient :
balise.nom_de_classe { propriété de style: valeur }
remarquez le point entre balise et nom_de_classe Ou, comme la mention de la balise est facultative,
.nom_de_classe { propriété de style: valeur }
Attention! L'emploi du point (.) devant le nom de classe est indispensable. Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise.
<balise class="nom_de-classe"> .... </balise>
Un exemple ?
Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe .essentiel :
.essentiel { font-weight: bold; font-color: #000080 }
Et dans le document Html, il suffit d'appeler la classe .important quand cela se révèle nécessaire :
<P class=".essentiel"> ... blabla ... </P>
<H1 class=".essentiel">Titre 1</H1>
<TABLE><TR><TD
class=".essentiel">cellule</TD></TD>...
|
|
Comme le convention nom/point/nom est utilisée aussi en Javascript, il a fallu trouver une autre convention d'écriture lorsqu'on désire utiliser les feuilles de style avec du Javascript. Ce sont les ID, aussi appelés les identifiants.
Les ID fonctionnent exactement comme les classes. Pas mieux, pas plus. C'est la même chose!
La syntaxe est :
#nom_de_ID { propriété de style: valeur }
Et pour l'appeler :
<balise id="nom_de_ID"> .... </balise>
Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi,
Pour #essentiel{ ... }
<P id=essentiel> est correct.
Mais si on rencontre dans la même page
<H1 id=essentiel> ce n'est plus correct !
Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes. Si par contre vous souhaitez utiliser des scripts avec les feuilles de style pour faire du DHTML par exemple (voir plus loin dans le site), la notion de ID vous sera alors indispensable.
<SPAN> et <DIV>
| top |
|
|
Dernier point, il fallait penser à un système pour "déconnecter" certains morceaux de paragraphe ou plusieurs paragraphes de cette logique d'écriture avec des feuilles de style. Ce sont respectivement les balises SPAN et DIV qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique.
Notons que SPAN et DIV s'utilisent toujours avec les classes et les ID.
|
|
La balise <SPAN> ... </SPAN> permet d'appliquer des styles à des éléments de texte d'un paragraphe ou si vous préférez à un morceau de paragraphe. Ainsi je voudrais écrire :
Un monde de géants.
<HTML>
<HEAD>
<STYLE type="text/css">
.element{font-size: x-large; color: navy}
</STYLE>
</HEAD>
<BODY>
<P>Un monde de <SPAN class=element>géants</SPAN>.</P>
</BODY>
</HTML>
|
|
La balise <DIV> ... </DIV> permet de regrouper plusieurs paragraphes ou si vous préférez, de délimiter une zone comportant plusieurs paragraphes.
<HTML>
<HEAD>
<STYLE type="text/css">
.zone{font-size: x-small}
</STYLE>
</HEAD>
<BODY>
La balise <DIV>
<DIV class=zone>
<P>Commentaire :</P>
<P>N'oubliez pas l'attribut class!</P>
</DIV>
</BODY>
</HTML>
Donne comme résultat :
La balise <DIV>
Commentaire :
N'oubliez pas l'attribut class!
Positionner avec le CSS
| top |
Quel concepteur de pages Web n'a pas laissé échapper quelques jurons bien sentis en essayant, à grand renfort de tableaux, de placer précisément du texte ou une image là où il le désirait ?
Le miracle est arrivé ! Outre le balise <LAYER> (mais qui n'est comprise que par Netscape 4.0), il est désormais possible de positionner, au pixel près, du texte ou une image avec les feuilles de style.
Notons que ce positionnement n'est possible que sous les versions 4 de Netscape et d'Explorer. Et que cette technique est encore un peu hasardeuse à ce jour, surtout sur le plan de la compatibilité avec les deux browsers susnommés.
Le positionnement des éléments par les feuilles de style est repris sous la spécification CSS-P.
|
|
La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser. Les coordonnées de ce point sont top = 0 et left = 0. Les coordonnées d'un point s'expriment en pixels, de haut en bas pour top et de gauche à droite pour left.
La position relative {position: relative} se détermine par rapport à d'autres éléments de la page. Précisons que l'on utilisera presque toujours le positionnement absolu car plus facile et plus sûr.
|
|
Plaçons en position absolue le texte "Publication Html" à 50 pixels du haut de la fenêtre (top) et à 150 pixels à gauche (left).
<HTML>
<HEAD>
<STYLE type="text/css">
.pub{position: absolute; top: 100px; left: 25px;
color: yellow; font-size: x-large; font-weight: bold;}
</STYLE>
</HEAD>
<BODY>
<DIV class=pub> Publication Html </DIV>
</BODY>
</HTML>
Ajoutons que plusieurs encodages sont possibles.
|
|
Plaçons l'image htmlplus.gif en position absolue à 50 pixels de haut de la fenêtre (top) et à 100 pixels à gauche (left). Les dimensions de l'image sont width=242 et height=84.
<HTML>
<BODY>
<span style="position: absolute; top: 50px; left: 100px; width: 242px;
heigth: 84px;">
<IMG src="htmlplus.gif">
</span>
</BODY>
</HTML>
Spécifiez toujours les propriétés width et heigth avec les feuilles de style car par défaut, Netscape 4.0 et Explorer 4.0 ne réagissent pas de la même façon. Ajoutons que plusieurs encodages sont possibles.
|
|
Reprenons l'image htmlplus.gif et on y superposera le nom de l'auteur de ce tutorial, au pixel près dans la barre qui souligne le terme Html.
<HTML>
<BODY>
<span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;">
<IMG src="htmlplus.gif">
</span>
<span style="position: absolute; top: 96px; left: 145px;
color: yellow; font-size: x-small; font-weight: bold;">
Vandermersh Jean-phillipe
</span>
</BODY>
</HTML>
Ajoutons que plusieurs encodages sont possibles.
Mini FAQ sur les styles
| top |
|
|
Non, les feuilles de style ne sont pas sensibles à la case [case insensitive]. Ecrire CLASS ou class ou Class est donc équivalent. Cependant les éléments qui ne sont pas sous le contrôle des feuilles de style comme les noms de police ou les URLs peuvent être case sensitive. Pour le système d'exploitation (et je pense à Unix), Arial n'est peut-être pas égal à arial, de même IMAGE.gif n'est pas forcément égal à image.gif.
|
|
Les noms des feuilles de style, des sélecteurs, des classes et ID peuvent contenir les lettres de a-z ou de A-Z, les chiffres de 0-9, le trait d'union et le caractère _. Les noms ne peuvent commencer par un chiffre ou un tiret. La documentation officielle affirme que les caractères spéciaux ASCII 160-255 peuvent être utilisés. Mais cela ne fonctionne pas chez moi. On prendra vite l'habitude (voir les langages de programmation) de les éviter.
|
|
Oui. Les feuilles de style seront ignorées par les browsers qui ne supportent pas les feuilles de style. Et c'est tant mieux pour la compatibilité de votre site sous les différents navigateurs.
|
|
Les propriétés des feuilles de style l'emportent sur les attributs Html. Si les deux sont spécifiés, les attributs Html seront affichés avec les browsers qui ne supportent pas les CSS et n'auront aucun effet avec les browsers qui supportent les feuilles de style.
Ainsi, <H3 style="color: red"><B><FONT COLOR="navy">Cascading Style Sheets</FONT></B></H3>
apparaîtra en rouge sous un browser compatible CSS (par exemple Microsoft Explorer).
et en bleu sous un browser qui ne reconnaît pas les feuilles de style (par exemple Netscape 3.0).
Ce qui est très bien pour la compatibilité mais qui ne simplifie pas la clarté de l'écriture.
|
|
En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité. La concurrence entre plusieurs éléments de style peut provenir des différentes possibilités de localisation de feuilles de style :
La règle de priorité appliquée par le browser sera d'appliquer pour la présentation du document la feuille de style la plus proche de l'élément. Ainsi, un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe. Il y a cependant moyen de contourner ces règles de priorité par la déclaration ! important;. Du genre BODY {background: white ! important; color: black}. Nous en resterons là dans le cadre de ce tutorial.