Discussion :

[BnA]

Bonjour!

Voilà, ma question est dans le titre!

Je me demandais s'il était possible de coupler les pseudo-classes (p.e. a:hover) avec le principe des styles en ligne?

(Et si une bonne âme pouvait me rappeler les priorités entre médias CSS (CSS externe, CSS intégrées, et CSS en ligne), ça serait bien sympathique de sa part...)

Merci d'avance!

[BnA]

Notez qu'au moment de l'écriture de ce livre, un attribut de style ne peut contenir une feuille de styles complète. Par exemple, il n'est pas possible de placer des styles :hover dans un attribut style

Source: CSS - Précis & Concis, O'Reilly

Pour ce qui est des règles de priorité entre différents médias CSS:

• Priorité la plus faible : les feuilles de styles externes (balise <link>) dont la portée est le site ou tout au moins de plusieurs pages.
• Priorité intermédiaire : les feuilles de styles internes (balise <style>) dont la portée est de une page.
• Priorité la plus forte : les styles spécifiques à une balise dont la portée est de une balise seulement (attribut "style" de la balise).

Source: Cours CSS


Je m'auto-aide, c'est cool!! Merci à moi!

[Taum]

Salut,

Effectivement il n'est pas possible d'utiliser hover dans un style inline, a ma connaissance il n'existe pas de syntaxe pour ça. L'attribut style définissant directement les styles CSS sans utiliser de sélecteurs. Une solution serait de passer par un onmouseover en javascript pour changer le style de l'element.


Par contre pour ton deuxième point je ne suis pas d'accord :

Quand je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<link href="/stylesheets/application.css" media="screen" rel="Stylesheet" type="text/css" />
<style type="text/css">
body { margin: 20px 10px }
p { margin: 15px 0; text-indent: 10px }
h4 { margin-top: 10px }
</style>

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<style type="text/css">
body { margin: 20px 10px }
p { margin: 15px 0; text-indent: 10px }
h4 { margin-top: 10px }
</style>
<link href="/stylesheets/application.css" media="screen" rel="Stylesheet" type="text/css" />

Je n'ai pas le même rendu : dans le premier cas les styles contenu dans la balise <style> sont prioritaires, dans le deuxième cas ce sont ceux de la feuille de style application.css

Je dirais donc que ça dépend plutôt de l'ordre d'inclusion, les derniers styles inclus étant ceux effectivement utilisés.