Comment travailler avec les sélectionneurs de l'Etat dans CSS3

Il ya des situations dans lesquelles l'état dynamique d'un objet est important dans la mise en forme dans CSS3. En utilisant les sélecteurs de l'Etat peut aider un utilisateur à déterminer si les objectifs ont été atteints ou une caractéristique particulière est indisponible (l'objet est désactivé).

Par exemple, un objet peut avoir une liaison qui lui est associé et lorsque l'utilisateur clique sur ce lien, l'état de l'évolution de liaison à “. Visité ” La liste suivante vous indique sur les sélecteurs de l'Etat que les documents utilisent couramment.

• : lien: Sélectionne tous les liens non visités dans un document.

  Il est pratique courante de combiner des sélecteurs de l'Etat avec tag sélecteurs. Par exemple, vous ne pouvez pas vouloir formater tous les liens non visités dans un document. Le lien pour une tag serait très probablement être formaté différemment à partir du lien pour un tag. Par conséquent, vous voyez souvent des sélecteurs de l'Etat que un lien où la mise en forme aurait une incidence sur tous les liens d'ancrage non visités.

• : visited: Sélectionne tous les liens visités dans un document.

• : actif: Sélectionne le lien que l'utilisateur a sélectionné actuellement.

• : vide: Sélectionne un objet qui n'a pas de contenu.

• : cible: Sélectionne la cible d'un objet. Par exemple, lorsque l'utilisateur clique sur un lien, le lien de cette cible est sélectionnée.

• : permis: Sélectionne tout objet qui est activé.

• :désactivée: Sélectionne tout objet qui est désactivé.

• :vérifié: Sélectionne tout objet qui est vérifiée.

• 
  
  
  
  

  :: sélection: Sélectionne le contenu que l'utilisateur a mis en évidence une certaine façon.

Sélecteurs de l'État permettent de modifier l'apparence du document pour correspondre à des activités que l'utilisateur a effectuées. Ce que cela signifie est que le document devient plus interactif, sans nécessiter de codage de votre part. Cet effet est utilisé dans un certain nombre des exemples qui suivent, de sorte que vous aurez beaucoup de la pratique de travailler avec sélecteurs de l'Etat. La procédure suivante montre une méthode pour travailler avec les sélecteurs de l'Etat.

1. Créez le ExternalCSS.HTML fichiers et ExternalCSS.CSS et les copier dans un nouveau dossier.

2. Ouvrir ExternalCSS.HTML.

3. Tapez le code suivant après l'existant

   tag dans le fichier et enregistrer les modifications sur le disque.

   Sélectionnez Un
   Sélectionnez deux
   Une
   Deux

   Ce code prévoit ajouté certains indicateurs d'état pour l'exemple. Lorsque vous cliquez sur un lien, la cible de ce lien change d'état.

4. Ouvrir ExternalCSS.CSS.

5. Tapez le code suivant après les styles existants et enregistrer les modifications sur le disque.

   :: sélection {color: blueviolet-background-color: Plum -} :: - moz-sélection {color: blueviolet-background-color: Plum -}: cible {border: solid-border-width: couleur moyen frontière: Rouge-background-color: BlanchedAlmond-}

   Notez l'utilisation de la préface -moz- spécial pour le second sélecteur :: sélection. Ceci est l'une de vos premières expositions à des problèmes de compatibilité du navigateur. Pour faire ce travail de sélection avec Firefox, vous devez ajouter cette seconde :: - moz-sélecteur sélection avec la préface.

6. Recharger la page de test.

7. Sélectionnez une partie du premier texte d'un paragraphe.

   La couleur du texte et de son changement de fond.

8. Cliquez sur Sélectionner One.

   Le paragraphe contenant un change son apparence.

   

9. Cliquez sur Sélectionner Two.

   Le paragraphe contenant Deux change son apparence. Le paragraphe contenant On revient à son aspect d'origine.