Styling visité les liens différemment avec CSS
La définition du style de liens que vous avez visité peut améliorer l'expérience utilisateur, en particulier dans les sites Web à forte intensité de contenu pour aider les utilisateurs à mieux naviguer. 1. Utilisez les CSS: Pseudo-classe visité pour définir le style du lien accessible, tels que les changements de couleur; 2. Notez que le navigateur permet uniquement la modification de certains attributs en raison des restrictions de confidentialité; 3. La sélection des couleurs doit être coordonnée avec le style global pour éviter la brutalité; 4. Le terminal mobile peut ne pas afficher cet effet et il est recommandé de le combiner avec d'autres invites visuelles telles que les logos auxiliaires icônes.
Ajouter des styles aux liens visités est en fait un détail très pratique mais facilement négligé. Par défaut, le navigateur transformera les liens visités en violet, mais de nombreux sites Web choisissent de personnaliser cet effet pour rendre la page plus unifiée ou guidée.
Pourquoi devriez-vous envisager de définir le style de lien visité?
Lorsque les utilisateurs parcourent les pages Web, ils sautent souvent entre plusieurs pages. Si vous pouvez laisser les utilisateurs voir en un coup d'œil quels liens ont été cliqués, ils peuvent déterminer plus rapidement où ils ont été et où ils ne l'ont pas été. Ceci est très utile pour améliorer l'expérience utilisateur. De plus, l'ajustement de la couleur ou la soulignement peut également empêcher la page de se ressembler.
Comment styliser les liens visités avec CSS?
CSS fournit un :visited pour contrôler spécifiquement le style du lien visité. La méthode d'écriture de base est:
A: visité {
Couleur: # 800080;
}Vous pouvez le combiner avec d'autres États, tels que:
un {
Couleur: # 0000EE;
Décoration du texte: aucune;
}
A: visité {
Couleur: # 800080;
}
A: Hover {
Décoration du texte: soulignement;
}De cette façon, les styles de base de tous les liens peuvent être unifiés et les performances dans différents états peuvent être contrôlées séparément.
Notes et limitations
- Restrictions de confidentialité et de sécurité : Pour des raisons de confidentialité, les navigateurs modernes ont des restrictions sur le soutien de
:visited. Vous ne pouvez modifier que certaines propriétés, telles quecolor,background-color,text-decoration-color, etc., commeborderoufont-size, ne fonctionnera pas. - Ne soyez pas trop brusque dans les couleurs : bien que vous puissiez régler les couleurs à volonté, il est préférable de garder le style global coordonné. Par exemple, si la couleur principale est bleue, vous pouvez utiliser une couleur violet foncé ou gris pour indiquer que l'accès a été fait.
- Le mobile ne s'affiche pas nécessairement : afin de simplifier l'expérience, certains navigateurs mobiles ne soulignent pas la différence entre les liens visités par défaut, donc cela est plus optimisé pour les utilisateurs de bureau.
Suggestions d'application pratiques
- S'il s'agit d'un site Web avec beaucoup de contenu (comme un blog ou un site de document), il est recommandé de permettre le style visité pour aider les utilisateurs à mieux naviguer.
- Il peut être distingué par de légers changements de transparence ou l'éclair de la couleur, plutôt qu'avec des couleurs particulièrement éblouissantes.
- Ne comptez pas seulement sur la couleur pour transmettre des informations, vous pouvez les combiner avec d'autres invites visuelles, comme l'ajout d'une icône ou une petite étiquette.
Fondamentalement, c'est tout. La mise en place de liens visités n'est pas compliqué, mais ils peuvent en effet apporter des améliorations d'expérience, en particulier adaptées aux sites Web à forte intensité de contenu.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1651
276
Comment créer un effet de verre en verre avec CSS
Aug 22, 2025 am 07:54 AM
Pour créer un effet de mimétisme en verre de CSS, vous devez utiliser le filtre de fond pour obtenir un flou d'arrière-plan, définir un arrière-plan translucide tel que RGBA (255,255,255,0.1), ajouter des bordures subtiles et des ombres pour améliorer le sens de la hiérarchie et vous assurer qu'il existe suffisamment de frontières et d'ombres pour améliorer le sens de la hiérarchie et garantir qu'il existe suffisamment de frontières visuelles derrière les éléments; 1. Utilisez le filtre de fond: Blur (10px) pour brouiller le contenu d'arrière-plan; 2. Utilisez RGBA ou HSLA pour définir le fond transparent pour contrôler le degré de transparence; 3. Ajouter 1PXSolidrgba (255 255,255,0,3) Borders et Box-Shadow pour améliorer la trois dimensionnalité; 4. Assurez-vous que le conteneur a des arrière-plans riches tels que des images ou des textures pour présenter un effet de pénétration floue; 5. Il est compatible avec les anciens navigateurs
Comment changer le style de liste dans CSS
Aug 17, 2025 am 10:04 AM
Pour modifier le style de liste CSS, utilisez d'abord le type de style liste pour modifier la balle ou le style de numérotation. 1. Utilisez du type de style liste pour régler la balle de UL à disque, cercle ou carré, et le nombre d'OL est décimal, inférieur alpha, haut-alpha, inférieur-romain ou haut-romain. 2. Supprimez complètement la balise avec la liste: aucun. 3. Utilisez la liste-image: URL ('Bullet.png') pour la remplacer par une image personnalisée. 4. Utilisez la position de style liste: dans
Comment utiliser la grille-template-areas dans CSS
Aug 22, 2025 am 07:56 AM
Thegrid-template-areaspropertyAllowsDevelowerStrocereIntuve, likellayoutsByDefiningNamedGridAreas; eorgostringrePresentsarowAndeachwordAcolumnCelll, withgrid-areamesonchildElementsMatterThoseIntheteemplate, tel "headerheader" for forwener "for forward" for for "for dhener" for for "for -Heder" for for "for-forwer" for for "for-forwer" for for "for dhener" pour
Comment implémenter un thème en mode sombre avec CSS
Aug 22, 2025 am 09:55 AM
Il existe deux façons principales d'implémenter le mode Dark: l'une consiste à utiliser les supports préfabriqués-color-scheme pour interroger automatiquement pour adapter les préférences du système, et l'autre consiste à ajouter une fonction de commutation manuelle via JavaScript. 1. Utilisez des préfers-color-schéma pour appliquer automatiquement les thèmes sombres en fonction du système utilisateur. Il n'y a pas besoin de JavaScript, définissez simplement les styles de la requête multimédia; 2. Pour réaliser une commutation manuelle, vous devez définir les classes de thèmes légers et de thems sombres, ajouter des boutons de basculement et utiliser JavaScript pour gérer l'état du thème et localStorage pour enregistrer les préférences des utilisateurs; 3. Vous pouvez combiner les deux pour lire d'abord localst lorsque la page est chargée.
Comment utiliser les gradients CSS pour les arrière-plans
Aug 17, 2025 am 08:39 AM
CssgradientProvidesMoothColOrTransitionwithOrtimages.1.LeargradientSitransitionColorsAlongastraightLinedDirectionsliketobottomorangleslike45deg, andsupportmultiplecolorstopsforculeo
Comment changer le curseur dans CSS
Aug 16, 2025 am 05:00 AM
Usebuilt-incursortypeylinpointer, aide, ornot-allowedtoprovideImmediaTvisualfeedBackforDiFferenterActiveElements.2.ApplyCustomCursorImages withthecursorpropertyusingaul
Comment coiffer les listes commandées et non ordonnées avec CSS
Aug 22, 2025 am 07:59 AM
CSSALLOWSFULLLCUSTUMISATION OFDORDEDEDUNDORDEDLISTERSTOENHANCEREDABILITÉ ET DESSIGNCORSTINGS
Comment ajouter une ombre de boîte dans CSS
Aug 18, 2025 am 11:39 AM
Pour ajouter des ombres de boîte, utilisez l'attribut Box-Shadow; 1. La syntaxe de base est la boîte de box-shadow: Offset horizontal Offset Offset Blur Rayon Rayon d'extension Shadows en couleur; 2. Les trois premières valeurs sont requises, les autres sont facultatifs; 3. Utilisez rgba () ou hsla () pour atteindre un effet transparent; 4. Le rayon d'extension positif étend les ombres et la valeur négative est réduite; 5. Plusieurs ombres peuvent être ajoutées par séparation des virgules; 6. La surutilisation doit être évitée pour garantir que la visibilité est testée sur différents arrière-plans; Cet attribut est bien pris en charge par le navigateur, et une utilisation raisonnable peut améliorer la texture de conception.
