Valeur de cette activité : 5 points
Compétence :
21 - CSS: Les sélecteurs d'attributs

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

CSS: Les sélecteurs d'attributs

Présentation

Le langage CSS offre de grandes possibilités d'utilisation. Dans ce travail vous découvrirez les sélecteurs d'attributs.

ATTENTION: ce ne sont pas tous les navigateurs web qui autorisent l'utilisation des sélecteurs d'attributs. Je vous suggère d'utiliser le navigateur FIREFOX afin de réaliser cette activité.


  1. Ajoutez une page à votre portfolio en affichant la directive 58757
  2. Inscrivez dans le champ titre : CSS: Les sélecteurs d'attributs
  3. Sélectionnez la section : MODULE CSS
  4. Sélectionnez la matière : informatique
  5. Inscrivez dans le champ no de la directive : 58757
  6. Inscrivez dans votre page le titre de niveau 1 : CSS: Les sélecteurs d'attributs
  7. Consultez ce site http://www.journaldunet.com/developpeur/tutoriel/css/050221-css-selecteurs-attributs.shtml
    ou
    Utilisez Google afin de trouver de l'information sur les sélecteurs d'attributs du langage CSS.
  8. Écrivez dans votre page une courte définition de ce qu'est un sélecteur d'attributs du langage CSS
  9. Ajoutez ensuite 3 exemples différents d'utilisation d'un sélecteur d'attributs (code css et code html) avec une courte explication pour chacun des exemples.
    EXEMPLE :

    Définition : Dans une feuille de style, le sélecteur d'attribut permet de préciser le sélecteur en indiquant les attributs que doivent compter les balises visées.

    1- Le sélecteur d'attribut : a[importance="titre"]

    L'utilisation de ce sélecteur permet d'attribuer des propriétés à tous les liens de la page qui contiennent un attribut 'importance' contenant la valeur 'titre'.

    Code CSS utilisé :
    <style>a[importance="titre"] {border: 5px solid green;}</style>

    Code HTML utilisé <a href="http://google.com" importance="titre" >Ce lien aura ....</a>
    Ce lien aura une bordure verte de 5 pixels car il contient l'attribut 'importance' ayant la valeur 'titre'

  10. Visualisez votre page en utilisant la navigateur FIREFOX et apportez des modifications au besoin.