Style & Class

              1.Différentes écritures.
     Nous avons vu deux façons d'écrire des Styles Sheet, soit à l'intérieur des tags <Style></Style> en modifiant des tags existant ou en intégrant le style dans le tag concerné, par exemple le div :
    <Div style="color : red ; background-color : yellow"> contenu </Div>
    On peut étendre ces écritures dans le tag <Style> et par l'instruction Class. Les styles utilisent toujours la même syntaxe que celle que nous avons utilisé précédemment.

              2.Entre Les Tag Style.
    Style Nommés  
 Rappelons l'emploi du tag style pour modifier un tag Html existant :
<STYLE>
Body{font-family : Arial ; font-size : 15pt ; font-style: italic ; font-weight : bold}
</STYLE>
    Ces tags sont insérés avant le tag  </Head>
    On peut se référer a un paragraphe particulier en lui donnant un nom par l'instruction ID tel que:
    <Div Id="Important1"> contenu </Div>
    Entre les tags <Style> on écrira pour affecter un style au paragraphe  Important1, on écrira le nom de l'élément dhtml précédé d'un #:
   #Important1 {color : red}
    Seul le tag Important1 sera affecté par le style #Important1.
    Exemple, (Clickez sur le bouton Afficher la page dans la forme ci-dessousvoir ci-dessous) On voit que l'élément Important1 hérite du style body et du style  #Important1.
    Exercice : modifier le style pour que le paragraphe soit affiché en bleu et en gras. Corrigé.
    Exercice : modifier Les conditions de défaut sont donnés ici par le tag Body le bon style pour que les conditions de défaut de la page soit affiché en vert et italique. Corrigé

       Code Exemple 1:

           

    Class (les exemples utilisent la forme ci-dessus)
    On peut définir un style s'appliquant à n'importe quel paragraphe, nous lui donnerons un nom précédé par un Important un point précéde le nom du style point tel que :
    .clsParag{font-size : 18pt ; font-weigth : bold; text-indent : 25%},
    Dans chaque tag concerné nous écrirons, (sans précéder le nom du point cette foi). :
    <div class="clsParag">
 Exemple.
    Le fait que le nom de cette class commence par cls est uniquement un moyen mnémotechnique et n'est nullement obligatoire.
    Ce style pourra s'appliquer à l'en tête des paragraphes d'un document.
    Exercice : modifier le style body pour le transformer en class nommé clsbody. Insérer la commande nécessaire dans le tag body. Corrigé
   

              3.Fichiers extérieurs à la page.
    Les exemples utilisent la forme ci-dessous.
    On peut rassembler les styles définis entre les tags <Style> dans un fichier externe dont l'extension sera css par exemple StyleTutor.css. Dans ce fichier on ne fait pas apparaître les tags <Style>
    Exemple :
.clsbody {font-family:Arial;font-size:15pt;color:green}
.clsParag{font-size : 18pt ; font-weigth : bold; text-indent : 25%}
    Exercice, (obligatoire pour l'exemple suivant), créer un fichier StyleTutor.css, dans un éditeur de texte,  contenant les styles précédent et sauver le sous le même classeur, (folder), que ce tutorial, adresse sur votre disque/Tutors/DhtmlTutor/StyleTutor.css
    On doit insérer dans l'en tête de la page, comme ci dessous tout de suite après le tag Title, l'instruction link rel="stylesheet" suivi de l'adresse du fichier.
<title>html Tutorial 4</title>
<link rel="stylesheet" href="StyleTutor.css">
    Corrigé, (utilise un fichier image du précédent nommé StyleTutorSave.css)

       Code Exemple 2:

           

    Avantages des fichiers externes.
    Ils peuvent rassembler la majorité des styles utilisés par un site Internet en un ou plusieurs fichiers, (segmentation par genre/type de page). La correction d'une erreur ou la modification de styles est grandement facilité puisque on ne modifie qu'un seul style, (une seule ligne).
    On accroît la rapidité de chargement car le fichier n'est chargé qu'une seule fois par séance de consultation Internet, il est en suite préservé dans le cache. Le code est en général plus compacte, donc les fichiers moins long à charger.
    Le meilleur moyen pour créer des fichiers .css est de développer les styles sur une ou plusieurs pages entre les tags <Style> </Style>. Quand ces styles fonctionnent correctement, créer un fichier css et supprimer les tags styles.

              4.Mixage des écritures.
    Vous pouvez utiliser un fichier externe, écrire d'autre style entre des tags <Style> et rajouter une instruction style dans un tag.
    Pour afficher les exemples nous sommes obligés de revenir à quelque chose de plus classique car par contre la génération de fenêtre supporte mal le mixage des écritures. Le code des exemples sera affiché dans la forme ci-dessous mais vous ne pourrez pas le modifier directement. Vous pouvez copier le texte de la forme, le copier dans un éditeur de texte et ensuite le manipuler à volonté. Quand vous cliquerez sur les liens situés en-dessous de la forme, le code sera généré dans une page et non dans une fenêtre réduite pour revenir à cette page faite  "Retour au tutorial" . Le code sera affiché dans la forme ci-dessous, pour pouvoir faire des aller-retour entre cette page et celle d'exemple, vous devrez à chaque fois réappuyez sur le lien concerné, la page supplémentaire Obligatoire pour éviter la génération d'une erreur par IE étant fermé chaque fois que vous revenez sur cette page.
     Dans la forme ci-dessous, nous utilisons le fichier externe StyleTutorSave

       Code Exemple 3:

Visualisez sans aucun attribut de style
Dans le  tag style affectation du style du tag body
Rajout de l'affectation au premier paragraphe, (1er Div), de la class clsParag
Rajout de l'affectation au deuxième paragraphe, (2em Div), de la class clsParag et du style couleur du texte bleu

Sommaire
Précédent Suivant