Aller au contenu

Styles en cascade


Bob

Sujets conseillés

Bonjour à tous,

J'applique un style à un élément div (div.chemin), et je voudrais qu'il s'applique aussi à tous les éléments que le div en question contient (des liens, en l'occurence).

Voilà mon code html:

<div class="chemin">
<a href="index.php">1er lien</a> separation 
<a href="section_home.php">2e lien</a>  
</div>

avec dans mon css:

div.chemin {
height: 50px;
color: #666666;
text-decoration : none;
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
}

Le style s'applique effectivement à la séparation, mais pas aux liens, qui restent bleus et soulignés. :nono:

Je précise que je n'ai défini nulle part l'élément "a" tout seul.

J'ai essayé dans mon css de mettre ".chemin" tout seul, de mettre "div.chemin, a", ".chemin, a", etc. J'ai également essayé en changeant "div" en "p".

Mais je n'y arrive pas (testé sous IE, Opéra et Mozilla)

Quelle est la solution pour que mes liens collent au style que j'ai défini pour div.chemin?

Merci,

Bob

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Bob,

Petite précision : dans ce cas, il est question d'héritage et non de cascade.

Et la notion d'héritage n'est pas simple à maîtriser :huh:

La propriété text-decoration, par exemple n'est pas héritée.

Tu peux trouver la liste complète des propriétés avec les valeurs possibles, leur valeur par défaut...

De plus :link est une pseudo-classe et ne fait pas partie de ce qu'on appelle l'arbre du document dans lequel chacun des éléments a un seul parent (=> héritage)

Si tu ajoutes ce style, cela devrait marcher

.chemin a:link {
color: #666666;
text-decoration : none;
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
}

Lien vers le commentaire
Partager sur d’autres sites

si je ne dit pas de connerie, le style des liens est par défault défini dans les feuilles de styles via a:active a:link a:hover et a:visited

ces styles sont les noms standards qui prévalent pour préciser le style des hyperliens

maintenant si tu ne précises rien, il se peut fort que ces liens prennent les styles par défaut des explorateurs, mais ils ne pourront de toute façon pas être rattachés au style du paragraphe qui les contient

à moins, il me semble, de pouvoir faire en css quelquechose comme

<a href src="..." target="..." style="...">

Lien vers le commentaire
Partager sur d’autres sites

si je ne dit pas de connerie, le style des liens est par défault défini dans les feuilles de styles via a:active a:link a:hover et a:visited

Tu ne dis pas de connerie beatnykk :lol:

J'ajoute seulement une précision importante mais souvent ignorée :

pour que l'effet hover puisse être actif sur les différents états du lien, sa définition doit absolument être en fin de liste

=> :link, :visited, :hover

Effectivement, la valeur par défaut des liens sont celles soit du navigateur, soit de l'utilisateur (qui peut avoir défini sa propre feuille de style)

Lien vers le commentaire
Partager sur d’autres sites

Merci à tous les deux,

(Monique, je me doutais que tu serais la 1ère à répondre sur ce post ;) )

Ca marche, mais uniquement sur le premier lien, le second reste bleu et souligné.

Pourtant, j'ai fait la manip avec des liens contenus dans une liste à puces (j'ai défini "ul.rubriques" puis "ul.rubriques a:link" dans mon css), et ça marche parfaitement.

Mon chemin est généré en php:

$chemin = "<a href=\"index.php\">intranet</a> / <a href=\"section_home.php\">$section</a>

<div class="chemin">echo $chemin</div>

(je vous dispense des marqueurs php...)

Est-ce que ça peut avoir une incidence ? (pourtant ma liste de puces contenant des liens est également générée en php...)

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Bob,

J'ai fait un essai sans php, c'est bon.

Je suppose donc que l'utilisation de php est la cause du problème.

Mais là, je manque d'expérience :blush:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...