Valeur de cette activité : 5 points
Compétence :
11- Les effets sur un lien

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

Présentation

Vous apprendrez au module Javascript à créer un effet de type "Mouseover" sur une image. Utilisons maintenant le code CSS afin de créer ce genre d'effet sur le texte d'un lien. Cliquez ici afin d'obtenir une description complète de la procédure.

Description

Vous utiliserez dans cette activité les sélecteurs suivants : a:link a:visited a:hover a:active
L'ordre d'insertion des déclarations de style pour les liens est important :
link
visited
active
hover

De même, pour un affichage optimisé des polices, il est préférable de tenir compte des recommandations suivantes :

Font-style, font-weight et autres valeurs du même type devraient être déclarés avant la déclaration de taille (font-size) .

La liste des familles de polices (font-family) devrait être déclarée en dernier.

  1. Ajoutez une page à votre portfolio en affichant la directive 7996
  2. Affiche les assistants et
  3. Inscrivez le titre : Les effets sur un lien
  4. Sélectionnez la matière : informatique
  5. Inscrivez dans le champ no de la directive : 7996
  6. Cliquez le bouton Nouveau afin d'écrire les balises d'une page web de base
  7. Inscrivez dans le corps, entre <BODY> et </BODY> de votre page le titre de niveau 1 : Les effets sur un lien
  8. Insérez en en-tête (entre et ) de page en utilisant la boîte à liste déroulante Insérer un modèle, la feuille de style Css_Lien_Effet
  9. Modifiez les valeurs des propriétés à votre goût
  10. Ajoutez ensuite après le titre de niveau 1, un lien vers un site de votre choix concernant les feuilles de style
  11. Ajoutez ensuite quatre sauts de ligne
  12. En vous servant de l'exemple ci-dessous, ajoute maintenant un deuxième lien vers un site de votre choix concernant les feuilles de style qui contiendra une classe (nommez cette classe sans espace et sans caractères accentués) et ajoute à ta feuille de style une classe qui te permettra de modifier les propriétés de ce lien.
    Exemple :
    PARTIE # 1
    Dans le corps de la page entre entre et <a href="URL" target="_self" class="votreclasse" >LIEN # 2</a> PARTIE # 2
    Dans votre feuille de style entre
    A.votreclasse:link {color: red; }
    A.votreclasse:visited {color: orange; }
    A.votreclasse:active{color: green; }
    A.votreclasse:hover {color: blue; }

  13. Insère dans cette feuille de style, pour chacun des sélecteurs ci-dessous, en utilisant
    la boîte à liste déroulante AIDE CSS-FEUILLE DE STYLE un minimum de 4 propriétés différentes.
    A.votreclasse:link {color: red; AJOUTEZ_VOS_PROPRIÉTÉS_ICI }
    A.votreclasse:visited {color: orange; AJOUTEZ_VOS_PROPRIÉTÉS_ICI }
    A.votreclasse:active{color: green; AJOUTEZ_VOS_PROPRIÉTÉS_ICI }
    A.votreclasse:hover {color: blue; AJOUTEZ_VOS_PROPRIÉTÉS_ICI }
  14. Modifiez ensuite dans votre feuille de style et dans votre lien le nom de votre classe "votreclasse" par un nom de votre choix.
  15. Visualisez votre page et apportez des modifications au besoin.