Codage apparence des liens hypertextes

Par NaoCh74, il y a 3 ans

Les bases HTML/CSS

Bonjour,

Je souhaite que mes liens hypertextes soit non soulignés et change de couleur et de taille au passage de la souris mais sans que ça modifie les liens de la bannière d'en tête

PS : je bosse sur squarespace

Mon code :

<style> type="text/css"> a:link { text-decoration:none; } a { transition: color 1s; transition: size 1s; } a:hover { color: #00685e; font-size:80px } </style>

Ce que je veux

Je souhaiterai aucune modification sur l'apparence des liens d'en tête

Ce que j'obtiens

Tous les liens s'agrandissent même ceux de l'en tête

2 réponses

TheSocaDance, il y a 3 ans

Bonjour Naoch74,
J'espère que tu as pu trouver une réponse entre temps.

Ton css dans l'état actuel ne fait appel à aucune class, ni ID.
Donc plus globalement, tes modifications en CSS vont donc impacter toute ta page voire tout ton site (tout dépend de ta manière de travailler).

Voici ce que je te conseille pour avoir une réponse à ton problème :
-> Essaye d'identifier clairement le bloc qui contient tes balises <a>, comme une div par exemple, à l'aide de l'inspecteur de code.
-> Au mieux, ajoute à ce bloc un ID, au pire, identifie un ID ou une classe utilisé par ton CMS sur ce bloc.
-> Modifie ton css de manière à cibler plus précisément tes modifications.

Je te mets un exemple ci-dessous.

<body> <style type="text/css"> /* j'utilise ici des class, si tu souhaites ne faire ces modifications qu'une fois, utilise plutôt des ID*/ /* Je précise ici que je veux les liens dans la class démo */ .demo a { text-decoration: none; transition: linear 1s; } .demo a:hover { color: #00685e; font-size: 80px; transition: linear 1s; } </style> <div class="demo"> <a>Texte impacté par le css</a> </div> <a>Test non impacté par le css car hors de la div ayant la class demo</a> </body>

J'espère avoir bien compris ta demande.
Si tu as besoin de détails n'hésite pas.

NaoCh74, il y a 3 ans

Super !!
Merci beaucoup pour ton aide !