Feuilles de style

Introduction...

La notion des styles est familière à la plupart d'entre vous, en effet, les derniers traitements de texte emploient tous cette notion. Depuis les dernières versions 4.x des navigateurs, cette notion de "style" est applicable pour les pages HTML, pour autant que les navigateurs supportent cette faculté, ce qui est fait aujourd'hui pour les deux grands standards actuels.

Les bons éditeurs HTML ont suivi le pas et WebExpert, par exemple, a intégré cette faculté dans ses dernières versions, dont la dernière (3.0) mais je crains que beaucoup de ses utilisateurs n'emploient pas cette nouveauté ?

Mon but n'est pas de vous donner ici un "cours" sur les feuilles de style car vous pourrez trouver un tutoriel détaillé sur ce sujet dans TutorDHTML, section "Feuilles de styles", mais bien une toute petite approche qui pourra éventuellement vous donner le goût d'aller plus loin...

Paragraphes

Si vous êtes observateur ;-) vous avez certainement remarqué que les textes peuvent être justifiés maintenant ! Cela est possible parce que les navigateurs savent gérer actuellement la justification et par le fait même, des balises nouvelles apparaissent et/ou des attributs spécifiques... Par exemple, vous pouvez maintenant ajouter l'attribut "text-align:justify" dans le code du paragraphe, comme ceci :

<P STYLE="text-align:justify;">texte à justifier</P>

Pour les attributs de paragraphe, WebExpert vous donne le code immédiatement, en choisissant celui qui vous intéresse, par clic-droit (nouvelle version) sur le bouton du paragraphe :

Automatiquement, WebExpert incorpore les codes nécessaires, pour autant que vous ayez sélectionné le texte auparavant bien sûr !

Analysons ce code :

d'une part la balise connue <P> mais également un attribut de style : align:justify qui peut être ajouté directement, pour cette balise particulière, par l'attibut "ALIGN="JUSTIFY" ou comme je vous l'avais montré (à titre d'exemple) par l'attribut général "Style =text-align:justify;", c'est ce dernier qu'il faudra incorporer dans le cas d'un style défini soit dans la feuille de style du document soit dans les attributs propres au texte, dessin.

Feuille de style

En effet, vous pouvez attribuer des styles prédéfinis pour toute votre page HTML, voire plusieurs (nous verrons comment) par l'adjonction de style prédéfinis dans l'en-tête de vos documents HTML, c'est-à-dire, entre les balises <STYLE> et </STYLE> qui doivent être situées elles-mêmes entre les balises d'en-tête : <HEAD> et </HEAD>.

Pour être plus explicite, voici un exemple de feuille de style comprenant la spécification que tous les paragraphes du document soient justifiés :

<STYLE TYPE="text/css">
P {text-align:justify; }
</STYLE>

Ceci possède comme inconvénient que tous les parties de texte qui commencent par la balise <P seront justifiés ! Et donc, quand vous voulez centrer ou appliquer un emplacement différent, vous employiez une autre balise, comme <DIV> ou <SPAN> : c'est ce que j'ai fait dans le texte de cette chronique...

L'avantage par contre, est que tous les paragraphes seront justifiés dans devoir incorporer un code de justification spécifique !

Nous abordons là directement la question des feuilles de style : simplifier la création des pages HTML et en quelque sorte, des codes plus "propres" dans le sens où le texte en comportera moins... Au début, vous employerez encore, par habitude, vos anciennes méthodes mais progressivement, vous pourrez mettre en place celles qui font appel aux styles appropriés.

Webexpert

Comme tous les codes HTML, les styles et leur écriture exigent une syntaxe particulière et correcte, c'est pourquoi WebExpert contient un assistant de création de feuille de style : soit pour tout le document (dans l'en-tête), soit sur une partie de texte déterminé (feuille de style intra-ligne <SPAN>)

Vous avez un bouton spécial, dans l'onglet "Spécialisés" qui correspond à cet assistant :

Lorsque vous cliquez sur celui-ci, une fenêtre spéciale s'ouvre.

À partir de celle-ci, vous pouvez construire tous les styles que vous désirez, et si c'est à une partie de texte que vous voulez appliquer tel style, vous choisissez la case à cocher (Feuille de style intra-ligne) : dans ce cas, WebExpert ne va pas incorporer vos définitions de style dans l'en-tête du document mais bien au texte que vous avez, préalablement, sélectionné.

Vous pourriez complètement paramétrer vos pages HTML par une feuille de style, y compris le fond d'écran, les liens, les polices pour le gras, l'italique etc.
Par exemple, voici une feuille de style plus complète :

<STYLE TYPE="text/css">

<!--
BODY {font-family: Arial; color: #000080; font-size:10pt}
B { color:green }
A { color:blue; }
A:link {font-family: Arial; color: #000080}
A:visited {font-family: Arial; color: #7171FF}
A:active {font-family: Arial; color: #800000;font-weight:bold}
.Info { background-Color: Cornsilk;cursor:hand}
.redText {color:Red;}
.blueText {color:blue;}
#layer4 {text-align:center;border-width:10px;border-color:red;border-style:ridge;}
.justifie {text-align:justify;color:#800000 }
-->
 </STYLE>
 
 

Vous pouvez consulter une petite page, avec quelques exemples de différents styles (ceux-ci sont définis dans le fichier "11.css"), cela pour vous montrer les différentes possibilités offertes par l'emploi des styles ! Pour des explications plus détaillées, veuillez consulter TutorDHTML.

Fichier "*.CSS"

Vous n'êtes pas obligés d'incorporer dans chacune de vos pages la page de style que vous employez habituellement, en effet, vous pouvez inclure un "lien spécial" qui indique au navigateur quel fichier de styles il doit employer ! Ce code doit être inséré dans l'en-tête du document, en lieu et place de la feuille de style proprement dite, voici le code à insérer :

<link rel=STYLESHEET TYPE="text/css" HREF="11.css">

Si vous voulez télécharger le petit fichier "11.css" ainsi que la petite page "feuille.html" : ch14.zip

Attributs intéressants

Il y a certaines facultés, aujourd'hui exploitables, qui me paraissent particulièrement intéressantes !

La notion de positionnement, en effet vous pouvez positionner strictement dans une page, un dessin ou une partie de texte, par les attributs de position. Cette position peut-être absolue (absolute) ou relative (relative).

L'attribut "z-index" qui précise à quel niveau doit se placer une image par rapport au plan de l'écran !

L'attribut de visibilité (visibility:hidden) ou de visibilité ou non à l'écran (display:none).

De nombreux effets DHTML emploient cette notion de positionnement. Malheureusement, les deux grands navigateurs ne s'accordent pas pour ces mêmes codes et ainsi, certains effets sont possibles avec l'un et pas l'autre ou plus encore, les attributs ne sont pas acceptés de la même manière... Ainsi, le petit ange apparaît en arrière plan du texte (ci-dessus) avec IE4.0 alors qu'avec Netscape (4.x), il apparaît seul, en dessous du texte !
Ceci parce que Netscape ne reconnaît pas actuellement le style en ligne dans le code de l'image. On pourrait cependant arriver au même résultat pour les deux navigateurs, en incorporant le code de l'image dans un élément <SPAN> (par exemple), qui lui, comporterait les attributs de style...

Vous pouvez trouver les explications de ces différences dans la section "Positionnement dynamique" de TutorDHTML.