Valeur de cette activité : 5 points
Compétence :
02- Récupération et utilisation d'une feuille de style

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

Récupération et utilisation d'une feuille de style web

Présentation

Les feuilles de style sont très utiles mais parfois longue à créer. Plusieurs sites web mettent à la disposition des visiteurs des banques de feuilles de style que vous pouvez récupérer et utiliser dans vos pages. Cette activité a pour but de vérifier votre compétence à récupérer du code de feuille de style et à utiliser ce dernier dans une page web.

Directives

  1. Ajoutez une page à votre portfolio en affichant la directive 2175
  2. Affiche les assistants et
  3. Inscrivez "Récupération d'une feuille de style" dans le champ Titre
  4. Inscrivez dans le champ No de la directive / activité : 2175
  5. Sélectionnez Informatique dans le champ Matière
  6. Cliquez le bouton NOUVEAU de votre barre d'édition HTML
  7. Affichez le site http://www.w3schools.com/css/css_examples.asp
  8. Sélectionnez un exemple de feuille de style de votre choix.
  9. ATTENTION, si vous utilisez un exemple contenant une image, vous devez enregistrer l'image, télécharger cette image dans votre espace de téléchargement et remplacer le nom de l'image dans le code utilisé par l'URL de votre image.
  10. Copiez le code de l'exemple situé entre les balises et de la section gauche de la page
  11. Collez le code copié dans votre page en le placant entre les balises et .
  12. Copiez le code de l'exemple situé entre les balises et de la section gauche de la page
  13. Collez le code copié dans votre page en le placant entre les balises et .
    Donc :
    Tu dois avoir un seul bloc de code .
    Dans ce bloc, tu avoir le bloc de feuille de style .
    Tu dois avoir un seul bloc .
    Dans ce bloc, tu dois insérer le contenu que tu désires voir apparaître dans ta page.
  14. Affichez de nouveau le site web http://www.w3schools.com/css/css_examples.asp
  15. Sélectionnez un deuxième exemple de feuille de style de votre choix
  16. Copiez le code de l'exemple situé entre les balise HEAD et /HEAD de la section gauche de la page
  17. Collez le code copié dans votre page entre les balises et :
  18. Copiez le code de l'exemple situé entre les balise et de la section gauche de la page
  19. Collez le code copié dans votre page entre les balises et :
  20. Affichez votre page voir le résultat.

  21. Afin de réaliser cette activité, consultez la liste de toutes les propriétés CSS
  22. Ajoutez maintenant des propriétés à chacun des sélecteurs de votre feuille de style afin d'utiliser pour chacun des sélecteurs un minimum de 3 propriétés différentes.
  23. Remplacez les textes ( anglais ) par une courte explication du code de feuille de style utilisé pour chacune des balises.
    Exemple : Ceci est un titre de niveau 1 s'affichant de couleur verte avec une couleur d'arrière-plan rose.