Valeur de cette activité : 5 points
Compétence :
03- 3 façons d'utiliser les feuilles de style (3)

A-Module 03 : CSS : 5 points - difficulté : 2

3 façons d'utiliser les feuilles de style

Présentation

Il existe 3 façons différentes d'utiliser les feuilles de style.

Chacune de ces façons comporte des avantages et des inconvénients.

Cette activité vous fera découvrir comment vous pouvez insérer du code de feuilles de style dans une page web.

Directives

Au besoin, consultez la référence suivante Cliquez ICI
ou lisez les informations sur le de site suivant :
http://web.selection.free.fr/css/feuille_style_mode.htm
  1. Ajoutez une page à votre portfolio en affichant la directive 3664
  2. Affiche les assistants et
  3. Inscrivez le titre : 3 façons d'utiliser les feuilles de style
  4. Sélectionnez la matière : informatique
  5. insrcrivez dans le champ no de la directive : 3664
  6. Sélectionne le bouton NOUVEAU afin d'insérer le code HTML d'une page de base.
  7. Inscrivez dans la section BODY de votre page le titre de niveau 1 : "3 façons d'utiliser les feuilles de style"

  8. La méthode intraligne

    La méthode intraligne consiste à insérer le code de feuille de style à l'intérieur d'une balise HTML en utilisant le paramètre STYLE.
    Exemple : <p style="color:red;background-color:yellow;" > Méthode intraligne </p>
    Ce qui donne le résultat suivant :

    Méthode intraligne

    À faire :

    1. Dans ta page, tape dans la section BODY entre <body> et </body> le texte suivant : Méthode intraligne
    2. Utilise la balise de paragraphe (P) pour ce texte (voir l'exemple ci-dessus)

    3. Afin de réaliser cette activité, consultez la liste de toutes les propriétés CSS
    4. Insère en utilisant le paramètre STYLE, 3 couples propriétés/valeurs différents de ton choix pour ce texte.

  9. La méthode imbriquée

    La méthode imbriquée consiste à insérer le code de feuille de style à l'intérieur de la section HEAD /HEAD du document.
    Exemple : <style>h4{color:green;background-color:pink;}</style>
    Ce qui donne le résultat suivant en utilisant ... <h4>Méthode imbriquée</h4> Résultat =

    Méthode imbriquée

    À faire :

      Procédures à suivre :


      1. Dans ta page, dans la section BODY <body> et </body>, tape le texte suivant : Méthode imbriquée
      2. Utilise la balise de titre de niveau 2 (H2) pour ce texte
      3. Place le curseur entre les balises <HEAD> et </HEAD>
      4. Utilise la boîte à liste déroulante AIDE-CSS : style /style
      5. Place le curseur entre ces balises <style> et </style>
      6. Utilise ensuite la boîte à liste déroulante AIDE-CSS : H2
      7. Place le curseur entre les accollades { et }
      8. Utilise ensuite la boîte à liste déroulante AIDE-CSS : "Border couleur style largeur" afin de définir les propriétés de bordure
      9. Utilise ensuite la boîte à liste déroulante AIDE-CSS afin de définir les 3 autres couples propriétés / Valeurs de votre choix
      Consultez au besoin ce site Cliquez ICI afin d'obtenir une liste des propriétés css (et valeurs) utilisables.
    <

  10. La méthode liée

    La méthode liée consiste à insérer le code de feuille de style à l'intérieur d'un document autonome. Dans cet exercice, vous allez utiliser la feuille de style du site LA DIFFÉRENCE (le document nommé css.css)

    Exemple : Cliquez ici pour télécharger cette feuille de style

    Si vous désirez utiliser cette feuille de style, il suffirait d'insérer entre les balises <HEAD> et </HEAD> cette ligne de code dans votre page :<LINK rel="stylesheet" type="text/css" href="css.css">

    Notez que l'extension de fichier fréquemment utilisé pour la feuille de style est .css

    Cette méthode est utilisée lorsque l'on désire utiliser une seule feuille de style pour l'ensemble d'un site web. De cette façon, on s'assure que l'affichage de chacun des éléments du site sera standardisé.
  11. Visualisez votre page et apportez des modifications au besoin.