28172 sujets

CSS et mise en forme, CSS3

Attributs de liens dans une balise body

Bonjour à tous

Je reprends un vieux fichier HTML dont la balise body est

<body bgcolor="ffffcc" link="660000" vlink="660000" alink="660000">

La doc de w3schools dit http://www.w3schools.com/tags/tag_body.asp
w3schools a écrit :

Attribute Value Description
alink color Not supported in HTML5.
Specifies the color of an active link in a document
background URL Not supported in HTML5.
Specifies a background image for a document
bgcolor color Not supported in HTML5.
Specifies the background color of a document
link color Not supported in HTML5.
Specifies the color of unvisited links in a document
text color Not supported in HTML5.
Specifies the color of the text in a document
vlink color Not supported in HTML5.
Specifies the color of visited links in a document

Mais de façon surprenante, si je remplace par

<body>

et 

<style type="text/css">
            body{
                background-color:#ffffcc;
            }
            body:link,
            body:visited,
            body:active{
                color:#660000;
            }
        </style>

en mettant ces déclarations avant la feuille de style, j'obtiens un résultat différent: le lien de la première ligne est bleu au lieu d'être marron.

Voir http://paralletes.free.fr/tests/liens-style.htm pour la page ancienne
et http://paralletes.free.fr/tests/liens-style.html pour la page nouvelle.

Question: dans le mécanisme un peu complexe des superpositions de styles, quel est le rang des paramètres de cette balise? C'est vraisemblablement la raison de ce comportement Pas trouvé de doc à ce sujet.

Et à propos si vous avez un texte bien fait en français expliquant simplement le mécanisme du CSS, c'est à dire dans quel ordre les attributs sont pris, je suis preneur. J'ai du mal à l'expliquer à un ami, ce qui doit vouloir dire que je n'en suis pas très sûr moi-même.
Modifié par PapyJP (15 Aug 2015 - 11:47)
Modérateur
Salut,
PapyJP a écrit :

Question: dans le mécanisme un peu complexe des superpositions de styles, quel est le rang des paramètres de cette balise? C'est vraisemblablement la raison de ce comportement Pas trouvé de doc à ce sujet.


D'une part, je ne savais pas que l'on pouvait en xhtml définir le comportement des élements ancres à partir du body. Smiley smile

Sache qu'une pseudo class applique un comportement à l'élément sur lequel elle se situe. Certaines pseudo class sont spécifiques à un ou quelques éléments html.

ex : Smiley biggol 

body:checked{
/* ... */
}



PapyJP a écrit :

Et à propos si vous avez un texte bien fait en français expliquant simplement le mécanisme du CSS, c'est à dire dans quel ordre les attributs sont pris, je suis preneur. J'ai du mal à l'expliquer à un ami, ce qui doit vouloir dire que je n'en suis pas très sûr moi-même.

RTFM :
x-> mdn - pseudo class active. Je t'invite à lire ou à relire cette page.
x-> W3school :active (lien annexe à l'exemple précédent).
x-> notions d'héritage css

liens annexes
x-> les sélecteurs
x-> les pseudos class
Modifié par niuxe (15 Aug 2015 - 15:21)
@niuxe

Merci de ta réponse.
Je pense que je connais déjà tout ça, je vais toutefois relire ces documents pour voir si quelque chose m'échappe.
Bonjour PapyJP Smiley smile

En première lecture, je dirais que l'équivalent de :
<body bgcolor="ffffcc" link="660000" vlink="660000" alink="660000">

N'est pas :

<style type="text/css">
            body{
                background-color:#ffffcc;
            }
            body:link,
            body:visited,
            body:active{
                color:#660000;
            }
</style>

Mais plutôt :

<style type="text/css">
            body{
                background-color:#ffffcc;
            }
            body a:link,
            body a:visited,
            body a:active{
                color:#660000;
            }
</style>

Smiley cligne
Administrateur
Les attributs sont ressemblants mais ne sont pas toujours directement liés ou reproduits par des propriétés CSS. Le plus important ici est que les attributs bgcolor, link, vlink, alink ne sont plus à utiliser car obsolètes, et qu'il faut effectivement jongler avec les pseudo-classes CSS pour obtenir un équivalent.

Je ne sais pas si c'était la question originale, mais le poids des sélecteurs CSS explique leur ordre de priorité. Quelques détails par ici :

http://jeremie.patonnier.net/post/2009/08/18/La-preseance-des-selecteurs-CSS
http://blog.organicweb.fr/comprendre-le-poids-des-regles-css
Merci pour vos réponses
@audrasjb j'ai essayé diverses combinaisons, dont bien entendu celle que tu donnes, sans succès

@dew: merci de ton pointeur. Malgré la date du document j'espère qu'il est toujours d'actualité, et surtout qu'il est valable pour tous les navigateurs.

C'est justement parce que je voulais me libérer de ces attributs que j'ai fait ce changement.
Ce qu'il faut que j'explique, c'est le contexte dans lequel je travaille.
Je suis en train de faire le relooking d'un site ancien, comprenant près de 1000 pages HTML. Il n'est donc pas question de tout reprendre à la main.
Pour cela, j'utilise le fait que toutes ces pages sont strictement bâties sur quelques modèles de page et font toutes appel à une fonction Javascript en tête et en fin de page pour générer le header et le footer de page de facon homogène.
J'en ai donc profité pour écrire des fonctions Javascript qui modifient dynamiquement le contenu de la page, dont la balise <body>.
Mais je ne peux pas modifier le doctype qui reste ce qu'il est (HTML4 transitionnal). Dans les fichiers de test ci-dessus j'ai bien le fichier .htm en HTML4 transitionnal et le fichier.html en HTML5, vous pourrez facilement le constater.

Mon problème se situe donc dans un contexte HTML4 et non HTML5, alors que la plupart d'entre nous n'utilisent plus depuis plusieurs années le HTML4.

Est-ce que cela dit quelque chose à quelqu'un ?
Modifié par PapyJP (15 Aug 2015 - 22:13)
Bonjour à tous
J'ai repris l'étude de ce casse-tête
Tout d'abord la piste html4/html5 est fausse: le comportement est le même, ce qui est heureux
Ensuite, en utilisant FireBug je regarde ce qui se passe sur la partie du texte litigieuse,
<a class="vues" href="#">lien avec class="vues"</a>

dont le texte est en marron et non en rouge comme espéré.
Selon FireBug (et apparemment en contradiction avec le document mentionné par Dew) ce qui l'emporte pour la couleur c'est la définition de la ligne 4 de la feuille de style qui contient

a, a:link, a:visited, a:active {
    color: #660000;
}

viennent ensuite les autres définitions qui s'appliquent, respectivement aux lignes 462, définition de .vues et 23,

C'est donc bien de ma part un problème de compréhension de l'ordre dans lequel les définitions de styles sont prises en compte, à savoir
1) les définitions contenues dans la balise <body> pour les attributs link, vlink, alink, ici "vlink"
2) la balise "a"
3) la classe "vues"
4) la pseudo classe, ":visited" dans ce cas

En conséquence, contrairement à ce que je pensais, mettre la définition de la balise a et de ses variantes en tête de la feuille de style n'est pas suffisant, puisque les pseudo-classes l'emportent sur les autres définitions de couleur, quelle que soit leur position dans la feuille de style

Une fois compris le problème, pourriez vous m'aider à trouver une solution qui ne nécessite pas de réviser toute la feuille de style en ajoutant des pseudo classes un peu partout?

Merci de votre aide
Modifié par PapyJP (16 Aug 2015 - 12:57)
Je me suis résolu à modifier la feuille de style en ajoutant autant de lignes que nécessaire, et ça fonctionne comme prévu.
Reste que l'ordre dans lequel sont appliquées les propriétés reste pour moi dans une "certaine incertitude" ou une "incertitude certaine" si vous préférez...
Modifié par PapyJP (16 Aug 2015 - 15:04)
Sujet clos
Aller à