Ajustez l'ordre des types CSS pour modifier l'effet de défilement des liens_CSS/HTML

Vous avez peut-être réalisé que vous pouvez créer des effets de défilement CSS en spécifiant différents styles pour chaque lien, y compris le lien normal (normal), l'accès, le retournement et l'activation. En outre, vous savez peut-être également que l'ordre des types CSS peut faire une différence dans les performances. Les styles de post-commande du code CSS remplaceront les styles de pré-commande pour le même élément. L'ordre dans lequel les types d'effets de roulis sont créés est très important.
Voyons maintenant comment organiser les types d'état de lien pour prendre en charge les effets de tumbling normaux sans provoquer de conflits, et comment réorganiser l'ordre de ces types pour obtenir différents effets de tumbling.

Statut du lien

Les effets de défilement CSS typiques reposent sur des types indépendants de l'un des quatre états d'un lien hypertexte. Le type (hyperlien) peut être créé avec une pré-classe CSS pour spécifier l'état du lien :

a:link - lien hypertexte régulier et non accessible

a:visité——Lien hypertexte visité

a:hover - le lien lorsque le visiteur déplace la souris sur

a:active——Cliquez sur le lien

Pour que l'effet de défilement CSS typique fonctionne correctement, l'ordre des types CSS dans le code CSS est très important, qu'il s'agisse d'une table de types externe ou d'une règle de type intégrée dans la barre de titre d'une page HIML.

Le type a:link apparaît le plus tôt car il peut être appliqué à tous les liens. Le type a:visited vient en deuxième position et remplacera le format a:link de n'importe quel lien. (Si le type a:link est suivi de a:visited, a:link peut remplacer le type a:visited.) Suivi du type a:hover, ce type ne doit être utilisé que pour accéder aux liens sous la souris. Enfin, il y a un:active, donc lorsque l'on clique sur le lien, il remplace tous les autres types.

a:lien {

couleur : #0000FF;

décoration de texte : souligner ;

poids de la police : normal ;

style de police : normal ;

}

a: visité {

couleur : #3399FF;

décoration de texte : souligner ;

couleur d'arrière-plan : #FFFFFF;

poids de la police : normal ;

style de police : italique ;

}

a:survol {

couleur : #0000FF;

décoration de texte : souligner ;

couleur d'arrière-plan : #FFFF00;

poids de la police : gras ;

style de police : normal ;

}

a:actif {

couleur : #FF0000;

décoration de texte : aucune ;

couleur de fond : #CCCCCC ;

poids de la police : gras ;

style de police : normal ;

}

L'ordre des types dans le code CSS détermine la manière dont chaque type remplace les autres types, c'est-à-dire que davantage de types peuvent être appliqués à un élément spécifique. Normalement, le type a:hover vient après les types a:link et a:visited, de sorte que le type d'état de survol peut être appliqué aux liens réguliers et visités. Cependant, il n'est pas obligatoire qu'il en soit ainsi, vous pouvez modifier l'ordre des types pour obtenir différents effets.

Supposons que vous souhaitiez utiliser l'effet de défilement sur les liens non visités, mais que vous ne vouliez pas affecter les autres liens visités, vous pourriez penser à gérer ce changement d'apparence via le code, mais ce que vous devez faire est de réorganiser le code CSS.

La suppression de l'effet de défilement des liens visités peut être facilement effectuée en supprimant le type a:visited.

Notez que le type a:visited contient des règles pour spécifier tous les mêmes attributs que a:hover. Sinon, lorsque la souris du visiteur passe sur un lien de visite, tous les attributs de type a:hover qui ne sont pas remplacés par a:visited. le type sera Continuera à réapparaître.

Source : Réseau d'enseignement Web