L'apprentissage des styles tel que nous allons le décrire n'a pas l'ambition d'être complet. Nous avons préféré décrire un sous-ensemble qui fonctionne correctement
avec Communicator Netscape ou Internet Explorer et sur certains d'autres browsers, plutôt que de décrire toutes les fonctionnalités présentes dans la norme CSS (Cascading Style Sheets), fonctionnalités qui ne sont pas encore implémentées dans ces browsers et ne le seront peut-être jamais !
Il faut être prudent, en utilisant les feuilles de Style d'autant que lors de l'installation de leurs browsers, Netscape et Internet Explorer de Microsoft désactivent par défaut l'utilisation
des feuilles de style. Ainsi, certains exemples que nous vous montrerons fonctionneront avec Internet Explorer et pas avec Netscape et vice-versa et bien sûr, sur d'autres navigateurs également. Il serait
dangereux et difficile de dresser la liste de ce qui fonctionne chez l'un et pas chez l'autre, car on peut espérer que demain tout fonctionnera chez l'un et chez l'autre. Disons tout simplement qu'aujourd'hui qu'Internet
Explorer reconnaît la norme CSS et que Netscape devrait supporter CSS et JASS (JavaScript Accessible Styles Sheets).
Encore une fois, il est nécessaire de rappeler que l'auteur des pages HTML doit tester ses pages dans plusieurs environnements, sauf s'il connaît bien la configuration utilisée par ses utilisateurs (cas d'un intranet par exemple).
Le principe de la feuille de style est le même que dans un traitement de texte. On ne se préoccupe que de la structuration du texte lorsqu'on le compose, puis on référence dans ce texte, un ensemble d'instructions qui régiront la typographie
à appliquer au texte. Ces instructions peuvent se trouver dans le fichier lui-même, mais sont le plus souvent dans un fichier séparé. Ce fichier, la feuille de style, pourra être référencé par un ensemble
de documents HTML, garantissant ainsi une homogénéité typographique et de présentation des pages.
Il existe maintenant deux façons de décrire des feuilles de style. La première répond à la norme CSS qui se borne à un langage déclaratif comme HTML ; la seconde,
JASS, est issue du langage JavaScript. Cette seconde méthode est plus orientée pour une manipulation dynamique des propriétés décrivant un style. Les deux méthodes font intervenir la notion de mise en cascade qui permet d'imbriquer
dans un même document plusieurs styles avec un niveau de priorité. Ainsi, un style défini dans une page HTML sera généralement plus prioritaire qu'un style défini dans un fichier externe. A terme, les Internautes pourront même définir ses propres
styles : ils pourront lire son journal en choisissant la taille, la police, la couleur des caractères ...
Comment définit-on un style ? Nous avons vu qu'un nouveau paragraphe était défini à l'aide de la balise <P>.
Appliquer un style à un paragraphe, c'est définir un ensemble de caractéristiques pour ce paragraphe. Ces définitions s'appliquent ensuite automatiquement chaque fois qu'une balise <P> est rencontrée
<STYLE> :
Cette balise définit une zone dans la région d'en-tête (<HEAD>) du document HTML où on trouve toutes les définitions de style du document.
Comme ces définitions peuvent être décrites en langage CSS ou en JavaScript, on aura recours à l'attribut TYPE pour indiquer le mode de description utilisé.
L'attribut TYPE :
Cet attribut de la balise <STYLE> peut prendre les valeurs suivantes :
text/css pour une description à la norme CSS,
text/javascript pour une description en langage JavaScript.
<HTML>
<HEAD>
<TITLE> Style </TITLE>
<STYLE TYPE="text/css"> ou <STYLE TYPE="text/javascript">
</STYLE> </STYLE>
</HEAD>
</HTML>
Examinons maintenant à travers d'un exemple simple, comment définir un "Style interne" de paragraphe où la couleur du texte serait bleue et où la taille des caractères serait de 18 points.
<HTML>
<HEAD>
<TITLE> Style Interne </TITLE>
<STYLE TYPE="text/css"> /* Style interne au langage de la même page HTML, on verra par la suite les Styles externes */
p {font-size: 18pt; color:blue; }
</STYLE>
</HEAD>
<BODY>
<p> Vous voyez sur l'écran la page telle qu'elle sera <u>imprimée</u>.</p>
N.B. : Ce symbole indique le commentaire /* Commentaire */
P indique que l'on définit un style pour les paragraphes (<P>). Toutes les définitions sont faites entre les accolades { }. On spécifie le mot clé font-size puis, après les deux points (:)
la taille de la fonte et sont unité, (pt). Il en va de même pour la couleur. Ne pas oublier le point virgule (;) qui indique la fin d'une instruction après 18pt ainsi que color: blue;...
Nous allons vous montrer un deuxième exemple pour une feuille de Style Externe que l'on verra les explications un peu plus loin de cette leçon.
Vous vous apercevez dans l'aperçu de l'exemple 1 et de l'exemple 2 que les paragraphes sont toujours identiques ainsi que les caractères de police à 18 points, malgré que c'est une feuille de Style externe et que les instructions n'ont pas été insérées dans le langage HTML pour rendre le paragraphe identique de l'exemple 1 mais, nous verrons cela, un peu
plus loin au cours de nos leçons.
On peut ainsi définir, pour tout élément de structure HTML (<h1> ... <hn>, <blockquote>, <cite>, etc.), un style particulier.
Mais, lorsque l'on définit un style pour les paragraphes, il s'applique à tous les paragraphes du document. Afin d'accroître la précision des réglages de typographie, il est possible d'adjoindre autant de classes particulières
que nécessaire pour un élément HTML donné, ou de générer des classes s'appliquant à n'importe quelle balise HTML.
Les exemples suivants définissent une classe "rouge" et une classe "noir" qui seront valables pour toutes les balises HTML référençant cette classe, alors que la classe "bleu" ne sera valable que pour la balise
<ADDRESS> et la classe grasRouge que pour la balise de paragraphe <P> :
<p> Texte de visualisation <span class="vert"> avec une phrase de couleur verte </span> <span class="noir"> alors que cette phrase est de couleur noire. </span> </p>
<p> Texte de visualisation <span class="Address-bleu"> avec une phrase de couleur bleue </span> alors que cette phrase est de couleur noire. </p>
<p> Texte de visualisation <span class="grasRouge"> avec une phrase de couleur grasse rouge </span> alors que cette phrase est de couleur noire. </p>
Nous allons vous donner un deuxième exemple de classe mais cette fois-ci, "interne" comme ci-après, ensuite, nous vous expliquerons par une seule image qu'elle sera commentée :
Exemple d'utilisation d'une classe "interne" :
<HTML>
<HEAD>
<TITLE> Style Classe Interne </TITLE>
<STYLE TYPE="text/css">
p {
font-size: 16pt;
color: black;
}
.vert {
font-size: 16pt;
color: green;
}
.noir {
font-size: 16pt;
color: black;
}
.Address-bleu {
font-size: 16pt;
color: blue;
}
.grasRouge {
font-size: 16pt;
color: red;
font-weight: bold;
}
</STYLE>
</HEAD>
<BODY>
<p> Texte de visualisation <span class="vert"> avec une phrase de couleur verte </span> <span class="noir"> alors que cette phrase est de couleur noire. </span> </p>
<p> Texte de visualisation <span class="Address-bleu"> avec une phrase de couleur bleue </span> alors que cette phrase est de couleur noire. </p>
<p> Texte de visualisation <span class="grasRouge"> avec une phrase de couleur grasse rouge </span> alors que cette phrase est de couleur noire. </p>
A noter : Dans le cas d'un site comportant par exemple 5 pages HTML, on peut insérer la syntaxe de la classe interne. En revanche, si vous avez 400 pages HTML, il y a tout intérêt d'insérer le code CSS dans un fichier à part, nommé par exemple Classe.css, cela facilite les mises à jour des paragraphes, couleurs, les mises en forme, etc. ... Il suffira de modifier qu'un seul fichier Externe dans son intitulé Classe.css et les 400 pages se mettront à jour automatiquemet.
Pour rappeler le fichier Style Classe externe CSS, il suffira de mettre le code sur chaque page HTML : <LINK REL="stylesheet" TYPE="text/css" HREF="Classe.css">
Maintenant, nous allons voir une syntaxe JavaScript, je suis contre mais, à titre d'indicatif pour résumer cette leçon :
<!-- Entre ces balises de début et de fin sont vides, ce qui est normal jusqu'à présent, puisque le fichier externe JS se trouve à l'extérieur de ce programme ... -->
Nous allons détailler le programme Classe.js afin que vous puissiez recopier ce dernier, et pour que vous puissiez également faire des exercices concernant vos travaux d'essais, en n'oubliant pas de cliquer avec le bouton droit de votre souris et pointer sur "afficher code source" lorsque vous visualisez les exemples de nos leçons ...
A noter : Tous nos programmes d'exemples peuvent être recopiés sur un bloc note, il n'est pas nécessaire d'avoir un logiciel HTML ou PHP prévu à cet effet ! Quant au PHP, on expliquera cette programmation assez complexe au fur et à mesure que nous avoncerons dans nos leçons HTML qu'il faut absolument commencer par ce dernier avant d'entre prendre le langage PHP.
Comme vous pouvez le constater, le programme est relativement simple, chaque instruction se répète ... Nous devons dire que ce programme n'est pas tellement pratique pour mettre une partie des phrases en couleurs que l'on veut car, on devrait ajouter deux instructions pour mettre un paragraphe en couleur, donc, ce programme n'est guère interressant par rapport au CSS !
En mode CSS, si l'on omet le nom d'une balise HTML et que l'on commence par un point, la définition peut être utilisée avec n'importe quelle balise. En mode JavaScript, le mot clé classes est nécessaire
pour définir une classe et le mot clé all permet de spécifier l'ensemble des éléments HTML.
Vous pouvez insérer dans un fichier les codes "CSS externe" ci-dessus qui se trouve en couleur verte, avec un point devant l'extension "CSS" (.CSS) sans oublier le Nom de ce fichier, en essayant de mettre un nom facile à retenir et n'oubliez pas de rappeler votre document avec l'URL ci-après : <LINK REL="stylesheet" TYPE="text/css" HREF="Classe.css"> d'où le nom Classe.css peut être changé à votre guise selon que vous nommâtes concernant votre fichier.
Ainsi, l'exemple précédent fonctionne aussi bien avec une définition de type CSS qu'avec une définition de type JavaScript.
Sous-classe de style (ID)
La définition d'une classe peut être relativement longue si l'on veut régler un grand nombre de paramètres. Imaginons que l'on souhaite deux types de paragraphe
dont seule la couleur diffère. On pourrait certes dupliquer la classe et changer uniquement la définition de couleur, mais la duplication de code est toujours une source de problèmes ... Il est donc plus simple de définir un modificateur agissant juste sur le ou les paramètres qui diffèrent.
Exemple d'utilisation en CSS avec #vert comme ID :
Le caractère # (dièse) est l'indicateur de définition d'un ID en mode CSS. On peut le faire précéder d'un signe HTML pour restreindre la portée de l'ID à cette balise HTML. Les définitions
se font de manière standard, entre accolades :
p#vert { color: green } n'autorise l'ID vert que dans les paragraphes.
L'attribut ID :
Cet attribut peut être utilisé pour réaliser une exception dans une classe ou bien être utilisé seul ; dans ce dernier cas, il ne présente pas de différence fondamentale avec une classe.
Si l'on veut appliquer les définitions de style d'une classe à autre chose qu'une balise HTML, c'est-à-dire à un bloc de texte non balisé, on dispose de la balise <SPAN>,
celle-ci permet de définir un bloc de texte auquel s'appliquera le style référencé avec l'attribut CLASS. Dans l'exemple suivant, on a réalisé un logotype en trois couleurs :
Comme nous l'avions déjà évoqué, vous pouvez insérer le code CSS qui se trouve en couleur verte, dans un fichier séparé ou externe par rapport au langage HTML
Notez qu'une virgule sépare chacune des balises. Il n'y a pas de définition de groupement en JavaScript.
Sélection Contextuelle :
Il est possible de définir dans quel contexte le style va s'appliquer. Dans l'exemple suivant, on souhaite que seules les citations (CITE) définies dans des titres de niveau 3 (H3) soient de couleur bleue :
Exemple d'utilisation en CSS, Sélection Contextuelle :
<HTML>
<HEAD>
<TITLE> Sélection Contextuelle </TITLE>
<STYLE TYPE="TEXT/CSS">
H3 CITE { color: blue; }
</STYLE>
</HEAD>
<BODY>
<BR>
<H3> Hello, ce texte de visualisation de l'encre noire ["H3"] </H3>
<H3> Hello, toujours en noir ["H3"] </H3> <H3> <CITE> Mais ceci est en Italique de couleur bleu ["H3 CITE"] </CITE> </H3>
<CITE> <H3> Et ce texte de visualisation Italique est en noir ... ["CITE H3"] </H3> </CITE>
Remarquez bien, qu'à la différence du groupement, il n'y a pas de séparateur entre les balises. En JavaScript, le codage aurait été le suivant :
<STYLE TYPE="TEXT/JAVASCRIPT">
contextual (tags.H3, tags.CITE).COLOR = "blue"
</STYLE>
L'héritage des styles :
Lorsqu'on imbrique d'autres balises à l'intérieur de balises définissant un style, elles héritent du style défini dans les balises de niveau supérieur :
Exemple d'utilisation en CSS de l'héritage des styles :
<HTML>
<HEAD>
<TITLE> Héritage des Styles </TITLE>
<STYLE TYPE="TEXT/CSS">
H2 { color: blue }
.vertCactus { color: green; font-size: 25pt }
</STYLE>
</HEAD>
<BODY>
<H2 class> Texte de visualisation avec une phrase de <span class = "vertCactus"> <EM> couleur verte </EM> </span> </H2>
Les mots « couleur verte » encadrés par la balise EM hérite des définitions faites dans le style vertCactus. Si la classe vertCactus définit une couleure verte, alors les mots « couleur verte » est écrit avec cette couleur.
Définitions dans des fichiers externes :
Le but des feuilles de style est de créer des définitions qui s'appliqueront à un ensemble de pages d'un serveur Web afin d'obtenir un style, une présentation
homogène sur toutes les pages. Il serait donc pénible de recopier dans chaque document HTML les mêmes définitions de style.
On va donc décrire dans un fichier spécifique tous les styles, classes, et ID que l'on référencera ensuite dans les documents HTML.
Le fichier de style :
Ce fichier ne contient pas de balise <TYLE>, il ne contient que les définitions dans l'une ou l'autre des syntaxes décrites précédemment et sans aucune
référence quant au langage utilisé pour faire ces définitions (CSS ou JavaScript). On peut inclure des commentaires dans un fichier de style. S'il est à la norme CSS, les commentaires sont inclus entre les séquences /* et */
et peuvent comporter une ou plusieurs lignes. En mode JavaScript, la même méthode est reconnue, mais de plus, toute ligne commençant par la séquence // est aussi considérée comme un commentaire. Le nommage du fichier n'a pas
de règles ; il n'est pas du tout nécessaire de l'appeler avec une extension de type .htm ou .html.
/* Styles pour les pages de la rubrique "nouvelles" (ces styles doivent être utilisés en mode CSS)
*/
Cette balise aura à terme une portée plus grande et permettra de référencer d'autres fichiers externes que les fichiers de style interne. Trois attributs sont nécessaires pour référencer le fichier de style externe :
Il permet d'indiquer que le fichier que l'on veut utiliser est un fichier de style. A l'avenir, la balise <LINK> servira à référencer d'autres types de fichiers.
L'attribut TYPE :
Comme il existe au moins deux normes de définitions des styles et que, dans les fichiers des styles, on ne spécifie pas la norme, c'est pourquoi qu'on va utiliser cet attribut pour l'indiquer :
TEXT/CSS
TEXT/JAVASCRIPT
L'attribut HREF :
Comme chaque fois qu'il apparaît, cet attribut va pouvoir indiquer par sa valeur l'adresse (l'URL) du fichier externe contenant les styles.
Il existe une seconde façon de référencer un fichier de style externe. Elle s'utilise dans la balise <STYLE> et est similaire à l'appel d'un fichier image (balise <IMG>).
Enfin, il est tout à fait possible de mixer dans un même document HTML des appels à des fichiers externes, qu'ils soient définis en norme CSS ou JavaScript, et des définitions internes.
Les définitions de style :
Nous venons de décrire comment utiliser des feuilles de style dans un document HTML, nous allons maintenant examiner les possibilités offertes pour influencer la présentation du document. Rappelons que chacun des mots-clés s'écrit différemment en CSS ou en JavaScript.
Les polices de caractères :
font-size (fontSize) - taille des caractères.
Permet d'intervenir sur la taille des caractères. On devra lui associer une des valeurs suivantes :
En valeur absolue, on peut indiquer soit directement la taille en point, soit une des valeurs suivantes (de la plus petite taille à la plus grande) : xx-small, x-small, smail, medium, large, x-large, xx-large.
En valeur relative, on indiquera soit larger pour prendre la fonte directement de la taille au-dessus, soit smaller pour la taille au-dessous. On peut aussi indiquer un pourcentage de la taille courante.
Exemples en mode CSS :
p {font-size: xx-large}
p {font-size: 120%} /* Augmentation de 120% */
p {font-size: 1.2em} /* Augmentation de 120% */
p {font-size: 24pt}
Exemples en mode JavaScript :
tags.p.fontSize = "xx-large";
tags.p.fontSize = "120%";
tags.p.fontSize = "1.2em";
tags.p.fontSize = "24";
tags.p.fontSize = "24pt";
font-syle (fontStyle) :
Une police de caractères est définie soit en normal (droit ou régulier), soit en oblique (oblique ou italique). Les valeurs à associer sont donc : normal ou italic (le mot oblique est aussi reconnu).
font-family (fontFamily) - Famille de caractères :
Par famille de fonte, on entend essentiellement les caractères avec empattement (Times par exemple), sans empattement (comme Helvetica), non proportionnelles (Courier), manuscrites (Kunstler-script) ou fantaisie (Western).
Les valeurs à indiquer seront : serif (police à empattement), sans serif (police sans empattement), cursive (police manuscrite), monospace (police non proportionnelle) et fantasy (police fantaisie) etc. ...
font-weight (fontWeight) - graisse des caractères :
Pour un caractère standard, la valeur à indiquer est normal. Si l'on veut un caractère gras, on indique alors bold, et on peut alors spécifier un niveau de graisse compris entre 100 et 900. Si l'on veut travailler relativement à la graisse des caractères en cours, on peut utiliser bolder (plus gras) ou lighter (plus clair).
Propriétés des textes :
line-height (lineHeight) - Interligne :
L'interligne peut être spécifié directement en point pt ou en pourcentage %. Si l'on ne donne ni l'unité ni le pourcentage, le nombre est interprété comme un multiplicateur. Ainsi,
1.2 ou 1.2em multiplie la valeur par défaut de l'interligne par 1.2 ; en revanche, 20pt donnera un interligne de 20 points. Il faut noter que, d'une manière générale, lorsqu'on travaille en relatif (pourcentage),
les définitions incluses héritent de la modification d'interligne.
Comme dans un traitement de texte, on peut aligner le texte à gauche avec la valeur left, à droite avec right, centrer avec center ou le justifier avec justify.
P { text-align: justify }
text-indent (textIndent) - indentation :
Le retrait du texte sur la première ligne d'un bloc se termine en point, ou en pourcentage, de la même façon que pour l'interligne. On peut appliquer un retrait ou une indentation à la première ligne d'un paragraphe P d'un bloc Hn
P { text-indent: 2em }
text-transform (textTransform) Traitement de la casse :
Cette option est très intéressante lorsque le texte à afficher n'est pas composé, mais plutôt issu d'un traitement automatique, une base de données par exemple. On peut forcer le passage automatique en minuscules par la valeur lowercase, en capitales par la valeur uppercase, ou mettre le premier caractère seulement en majuscules par la valeur capitalize.
H1 { text-transform: capitalize }
Le bloc :
Toute balise provoquant un espace de type paragraphe (<P>, <H1> ...) définit un bloc qui peut être positionné précisément dans une page
et dont on peut choisir la couleur ou l'image en fond. Ce positionnement précis permet la conception de document avec une mise en page élaborée, très proche du document papier. Mais attention ! Le positionnement
est relatif par rapport au dernier élément inscrit dans la page.
Il est possible de fixer la taille exacte du bloc, en hauteur (height) et en largeur (width) ainsi que la couleur du fond (background-color ou pour JS backgroundColor), ou de disposer une image en fond (background-image) ou pour le JavaScript (backgroundImage).
Les marges peuvent être choisies de façon indépendante :
la marge à droire : margin-right (marginRight)
la marge à gauche : margin-left (marginLeft)
La marge en haut : margin-top (marginTop)
la marge en bas : margin-bottom (marginBottom)
On peut aussi régler le blanc autour du bloc :
espace à droite : padding-right (paddingRight)
espace à gauche : padding-left (paddingLeft)
espace en haut : padding-top (paddingTop)
espace en bas : padding-bottom (paddingBottom).
La bordure est entièrement paramétrable grâce au mot-clé border-style (borderStyle) ou le paramètre boderStyle permet d'indiquer le style du cadre :
avec la valeur none (aucun) pour ne pas afficher de bordure,
avec la valeur 3D pour un effet de relief,
avec la valeur solid pour un trait plein.
Chacun des traits composant la bordure peut avoir une taille différente :
border-top-width (borderTopWidth) pour le segment du haut,
border-right-width (borderRightWidth) pour le segment de droite,
border-bottom-width (borderBottomWidth) pour le segment de bas,
border-left-width (borderLeftWidth) pour le segment de gauche.
La couleur de la bordure est définie par border-color (borderColor).
Nous résumons cette neuxième leçon ci-après :
Les styles d'une page HTML sont définis entre les balises <STYLE> et </STYLE>. L'attribut TYPE de cette balise prendra la valeur text/css ou text/javascript selon que l'on utilisera l'une ou l'autre des deux normes.
Dans la norme CSS (<STYLE TYPE="text/css">), un style se définit par le nom de la balise (P, H1, CITE par exemple) suivi, entre deux accolades { } des définitions afférentes à cette balise. On peut
mettre entre accolades autant de définitions que nécessaire en les séparant par un point-virgule (;). Chaque définition est constituée d'un mot-clé (font-size, color par exemple) séparé de sa valeur par deux points (:).
On peut grouper plusieurs balises sur une même définition, il suffit pour cela de séparer les balises par une virgule.
Il est possible d'indiquer que le style ne s'applique à une balise que lorsque celle-ci est incluse dans une autre balise (sélection contextuelle). Pour ce faire, on fait procéder la définition de la liste
des balises, mais cette fois, le séparateur n'est pas la virgule mais l'espace.
Dans la norme JavaScript (<STYLE TYPE="text/javascript">), la syntaxe est plus près du nommage objet. On déclare donc pour une balise donnée le mot-clé tags, qui indique que l'on travaille sur une balise.
On indique ensuite, derrière un point, la balise (P, H1, CITE par exemple) ; enfin, toujours séparée par un point, la propriété de la balise (fontSize, color par exemple). L'opérateur égale = permet d'affecter une valeur.
En JavaScript, la sélection contextuelle commence par le mot-clé contextual suivi entre parenthèses de la liste des balises. Chaque balise est précédée d'un mot-clé tags et séparée de la précédente par une virgule.
Il existe une notion de classes permettant d'affecter un style à la demande. <P CLASS=laSeule> permet par exemple d'affecter un style particulier (laSeule) ponctuel à la balise <P>.
Une classe est définie par un nom précédé d'un point (.) en mode CSS et par le mot-clef CLASSES en mode JavaScript. Les définitions sont faites comme pour un style de balise.
Afin d'augmenter la souplesse, il existe un niveau supplémentaire de réglage, l'ID. Il permet par exemple de modifier ponctuellement une valeur définie dans une classe.
En mode CSS, un ID est défini par un nom précédé du caractère dièse (#), tandis qu'en mode JavaScript l'ID est défini par le mot-clef ids.
On peut ainsi combiner, dans une même balise, CLASS et ID.
Entre les balises <SPAN CLASS=... ID=...> et </SPAN>, on peut affecter un style à un texte non standard (non balisé).
Il est possible, grâce à l'attribut STYLE, de définir ponctuellement un style pour une balise (<P STYLE="fontSize=50">).
Enfin, la balise <LINK REL="stylesheet" TYPE="text/javascript_ou_css HREF="url_du_fichier"> permet de référencer un fichier externe contenant les styles du document.
Les propriétés permettant d'agir sur les textes sont :
Leçons suivantes
Leçons précédentes
Bas de page
Haut de page