Acronym et pseudos boutons

Bonjour,

J'ai des pseudos bouton avec une balise <a> et du texte et si je veux les colorer en blanc, je fais:
color:#fff;
mais comme les liens de ma page ont une couleur différente, il prennent donc cette couleur.
Si j'interviens directement sur ma balise <a> en faisant :

<a style="color:#fff">

ça fonctionne mais je souhaite savoir comment faire pour faire en sorte que ça fonctionne dans ma feuille de style sans intervention sur ma page (à part pour mettre ma classe)

Par contre si je fais

<acronym  class="bouton">
        <a href="#">Bouton</a>
</acronym>

Ça fonctionne mais est-ce propre ?

Merci de votre aide.

Bonjour,

Il aurait été intéressant de voir comment vous vous y êtes pris pour appeler la couleur blanche en css. Je veux dire : quels sélecteurs avez-vous employé ?

Acronym est deprecated en html5. À éviter. D'autant plus que cette solution est mauvaise car elle vous oblige à rajouter une balise pour un truc très simple qui doit se régler en css :

Il faudrait tout d'abord avec quel code sont colorés vos liens de page pour ne pas "sur-selectionner" inutilement les liens. Les liens dans la page devraient par défaut être appelés un peu comme ceci :

a,
a:link,
a:visited {
    /* le code */
}

a:hover,
a:focus,
a:active {
    /* le code */
}

Quand ceux-ci sont sur-séléctioné, par exemple comme cela :

.selecteur1 .texte .bouton {
    /* le code */
}

... cela rend d'autant plus difficile l'écrasement de ces styles par la suite, car pour écraser cette déclaration de 3 sélections il faudra 3 sélections là aussi. On ne devrait jamais descendre en dessous d'une hiérarchie de 3 sélecteurs pour des raisons de performance d'affichage (mais pour les designs complexes - comme le design d'un tableau - c'est facile à dire).

Notons aussi qu'un id est plus "fort" qu'une class (mais un id est unique, à éviter pour le style, les class suffisent amplement) :

#bouton { /* ce code est plus fort que .bouton */
    /* le code */
}

Bref, plusieurs solutions. La solution par défaut :

.bouton {
    color: #fff;
}

Un solution "plus forte" :

a.bouton {
    color: #fff !important;
}

- une solution plus intéressante est de sur-spécifier la déclaration en ajoutant un ou plusieurs selecteurs de l'élément parent.

.element-parent .bouton {
    color: #fff !important;
}

- une solution radicale est de mettre un !important à votre déclaration. Contrairement à ce que disent certains ce n'est pas un hack. Mais à employer avec modération sous peine de voir des !important fleurir partout dans la feuille de style :

.bouton {
    color: #fff !important;
}

Voilà. Je vous laisse découvrir css. Bien à vous
Modifié par Olivier C (24 Nov 2013 - 07:37)

Merci beaucoup c'est plus clair de cette façon.