Créée le, 19/06/2015

 Mise à jour le, 29/12/2019

Visiteurs N°  




Accueil
Site en Français Site en Anglais Nos Promotions Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or Annuaires Sites

Signets :
  Leçons suivantes        Leçons précédentes      Bas de page
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet
  Classes de Style   Attribut CLASS   <SPAN> avec l'attribut CLASS
  <LINK> Utilisation des fichiers externes


Les Feuilles de Styles HTML :


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 :

<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&ecirc;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'&eacute;cran la page telle qu'elle sera <u>imprim&eacute;e</u>.</p>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 1].

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.

<HTML>

           <HEAD>

               <TITLE> Style Externe </TITLE>

          <LINK REL="stylesheet" TYPE="text/css" HREF="Mis_en_Paragraphe_Couleur_Bleue.css">

           </HEAD>

                    <BODY>

            <p> Vous voyez sur l'&eacute;cran la page telle qu'elle sera <u>imprim&eacute;e</u>.</p>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 2].

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.

Classes de Style :

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> :

Exemple d'utilisation d'une classe "externe" :

<HTML>

           <HEAD>

               <TITLE> Style Classe Externe </TITLE>

          <LINK REL="stylesheet" TYPE="text/css" HREF="Classe.css">

           </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>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 1].

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>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 2].

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 :

Exemple d'utilisation en JavaScript :

<HTML>

           <HEAD>

               <TITLE> Style Externe JS </TITLE>

          <SCRIPT LANGUAGE="JavaScript" SRC="Classe.js"> </SCRIPT>

           </HEAD>

                    <BODY>

                    <!-- Entre ces balises de d&eacute;but et de fin sont vides, ce qui est normal jusqu'&agrave; pr&eacute;sent, puisque le fichier externe JS se trouve &agrave; l'ext&eacute;rieur de ce programme ... -->

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 3].

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.

Programme "Classe.js" relativement simple ci-après :

           str1="<p><br> Texte de visualisation avec une phrase de couleur verte";

           document.write("<FONT SIZE=5> <FONT COLOR='green'>" +str1+"</FONT>");

           str1="<p>Texte de visualisation avec une phrase de couleur bleue";

           document.write("<FONT SIZE=5> <FONT COLOR='blue'>" +str1+"</FONT>");

           str1="<p>Texte de visualisation avec une phrase de couleur rouge";

           document.write("<FONT SIZE=5> <FONT COLOR='red'>" +str1+"</FONT>");

           str1="<p>Texte de visualisation avec une phrase de couleur noire";

           document.write("<FONT SIZE=5> <FONT COLOR='black'>" +str1+"</FONT>");

           str1="<p><b>Texte de visualisation avec une phrase de couleur graisse choisie rouge fonc&eacute;e</b>";

           document.write("<FONT SIZE=5> <FONT COLOR='#800000'>" +str1+"</FONT>");

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.

L'attribut CLASS :

Cet attribut permet d'affecter une classe spécifique à une balise HTML ; il recevra donc toujours en paramètre, le nom d'une classe existante.

Remarquons que si la définition des styles connaît deux normes (CSS et JavaScript), l'utilisation des styles est heureusement unique :

Exemple d'utilisation en CSS :

<HTML>

           <HEAD>

               <TITLE> Style Interne des Paragraphes </TITLE>

          <STYLE TYPE="TEXT/CSS">

              p {

              font-size: 16pt;

              color: blue;

           }

               .grasRouge {

              font-size: 16pt;

              color: red;

              font-weight: bold;

           }

               .noir {

              color: black;

           }

          </STYLE>

           </HEAD>

                    <BODY>

                    <BR>

                    <p class = bleu> Ce texte est bleu ! </p>

                    <p class = grasRouge> Et celui-ci est rouge et gras ... </p>

                    <h2 class = noir> Mais celui-ci reste standard car la classe grasRouge ne s'applique qu'au paragraphe ... </h2>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 4].

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 :

<HTML>

           <HEAD>

               <TITLE> Sous-classe de style avec ID </TITLE>

          <STYLE TYPE="TEXT/CSS">

              .premiere { color: red; font-size: 20pt; font-weight: bold }

              #vert { color: green; font-size: 15pt }

          </STYLE>

           </HEAD>

                    <BODY>

                    <p class = premiere> Texte de visualisation avec une phrase de couleur graisse choisie rouge ... </p>

                    <p ID = vert> Texte de visualisation avec une phrase standard ... </p>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 5].

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.

Exemple d'utilisation en CSS comme ID :

<HTML>

           <HEAD>

               <TITLE> Sous-classe de style avec ID </TITLE>

          <STYLE TYPE="TEXT/CSS">

              .premiere { color: red; font-size: 20pt; font-weight: bold }

              p#vert { color: green }

          </STYLE>

           </HEAD>

                    <BODY>

                    <p class = premiere> Ce texte de visualisation et en 20 points, de couleur graisse choisie rouge ... </p>

                    <p class = premiere ID = vert> Celui-ci en 20 points, gras mais vert ! </p>

                    <p ID = vert> Ce dernier texte utilise la police par d&eacute;faut, mais sa couleur est verte ... </p>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 6].

Nous allons voir maintenant la balise <SPAN>.

<SPAN> avec l'attribut CLASS :

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 :

Exemple d'utilisation en CSS avec <SPAN> :

<HTML>

           <HEAD>

               <TITLE> Les Styles </TITLE>

          <STYLE TYPE="TEXT/CSS">

              .TITRE { font-Size: 46pt; font-Family: sans-serif; Background-Color: black; }

              .INV_TITRE { Background-Color: green }

              .BLANC { Color: white }

              .ROUGE { Color: red }

              .NOIR { Color: black }

          </STYLE>

           </HEAD>

                    <BODY>

                    <SPAN CLASS = TITRE>

                    <SPAN CLASS = BLANC>&nbsp;&nbsp;HTML <SPAN CLASS = ROUGE>_

                    <SPAN CLASS = INV_TITRE>_<SPAN CLASS = NOIR>STYLES&nbsp;

                    </SPAN> </SPAN> </SPAN> </SPAN> </SPAN>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 7].

Nous allons maintenant voir le groupement.

Groupement :

Afin de simplifier l'écriture, il est possible de grouper plusieurs balises HTML sur une même ligne de définition :

Exemple d'utilisation en CSS Groupement :

<HTML>

           <HEAD>

               <TITLE> Groupements </TITLE>

          <STYLE TYPE="TEXT/CSS">

               H1, H2, H3, H4 { color: blue; }

          </STYLE>

           </HEAD>

                    <BODY>

                    <H1> Texte de visualisation avec une phrase de couleur bleue "H1" </H1>

                    <H2> Texte de visualisation avec une phrase standard ... "H2"</H2>

                    <H3> Texte de visualisation avec une phrase standard ... "H3"</H3>

                    <H4> Texte de visualisation avec une phrase standard ... "H4"</H4>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 8].

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&eacute;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>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 9].

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&eacute;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>

                    </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 10].

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)         */

              .premiere { color: red; font-size: 20pt; font-weight: bold }

              #vert { color: green; font-size: 15pt }        /*  Exception  */

              ou    Style pour les pages de la rubrique "nouvelles"      //     (ces commentaires doivent être utilisés en mode JavaScript)

<LINK> Utilisation des fichiers externes :

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 :

<LINK REL="STYLESHEET" TYPE="TEXT/NORME" HREF="URL_DU_FICHIER_STYLE">

L'attribut REL="STYLESHEET" :

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>).

<STYLE TYPE="TEXT/NORME" SRC="URL_DU_FICHIER_DE_STYLE"> </STYLE>

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.

      P {line-height: 20pt }

text-align (textAlign) - Alignement, justification :

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 :

               Mode CSS            Mode JavaScript               Réglage

               font-size                  fontSize                                 taille des caractères

               font-style                 fontStyle                                 normal ou italique

               font-family              fontFamily                               empattement, proportionnalité

               font-weight             fontWeight                              graisse des caractères

               line-height              lineHeight                                interligne

               text-align                 textAlign                                 Alignement, justification

               text-indent               textIndent                               décalage première ligne

               text-transform         textTransform                        Capitalisation, casse

Toute balise définissant un espace vertical de type paragraphe génère automatiquement un bloc dont on peut contrôler la position :

               Mode CSS            Mode JavaScript               Réglage

               margin-right            marginRight                         marge à droite

               margin-left               marginLeft                           marge à gauche

               margin-top              marginTopt                          marge en haut

               margin-bottom        marginBottomt                    marge en bas

                                                       

               padding-right           paddingRight                      blanc à droite

               padding-left              paddingLeft                        blanc à gauche

               padding-top              paddingTop                        blanc en haut

               padding-bottom       paddingBottom                   blanc en bas


Fin de cette neuxième leçon, la prochaine sera consacrée au "Positionnement dynamique", concernant le langage HTML.









Nombre de pages vues, à partir de cette date : le 15 JUILLET 2019

compteur gratuit

    




Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 4. 12 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 02 Septembre 2016.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en Septembre 2016.