un peu perdu avec les CSS

un peu perdu avec les CSS - HTML/CSS - Programmation

Marsh Posté le 16-05-2010 à 11:20:57    

bonjour
 
si je declare par exemple le style nuage3
 

Code :
  1. .nuage3
  2. {
  3. background:#FFFFFF;color:#000033;
  4. font-size: 16px;
  5. font-family: Arial;
  6. text-align:left;
  7. }


que dois je mettre si je veux avoir des sous styles en  
lien,  
lien visité,
lien survolé?
 
je sais que pour le lien a priori je dois saisir
.nuage3 a
{......
 
je me trompe ?


---------------
http://www.ypikay.com
Reply

Marsh Posté le 16-05-2010 à 11:20:57   

Reply

Marsh Posté le 16-05-2010 à 18:11:01    

.nuage3 a {
    color: #000033;
    text-decoration: underline;
}
 
.nuage3 a:visited {
    color: #660066;
}
 
.nuage3 a:hover {
    color:#444488;
}


 
DANS CET ORDRE (règle des LVHA) http://meyerweb.com/eric/thoughts/ [...] nk-states/
et tu n'oublies pas :focus (navigation au clavier) à styler de la même façon que :hover :o


Message édité par phosphoreloaded le 16-05-2010 à 18:12:09
Reply

Marsh Posté le 16-05-2010 à 18:27:33    

supra cool !
Merci beaucoup


---------------
http://www.ypikay.com
Reply

Marsh Posté le 16-05-2010 à 19:12:16    

bon si je resume, j'en suis à peu pret là :
 

Code :
  1. .nuage2{
  2. color:#000033;
  3. background-image : url('../images/background2.jpg');
  4. font-size: 14px;
  5. font-family: Arial;
  6. text-align:left;
  7. }
  8. .nuage2 a:link{
  9. color:#000033;
  10. background-image : url('../images/background2.jpg');
  11. font-size: 14px;
  12. font-family: Arial;
  13. text-align:left;
  14. }
  15. .nuage2 a:visited{
  16. color:#000033;
  17. background-image : url('../images/background2.jpg');
  18. font-size: 12px;
  19. font-family: Arial;
  20. text-align:left;
  21. }
  22. .nuage2 a:hover{
  23. color:#000033;
  24. background-image : url('../images/background2.jpg');
  25. font-size: 12px;
  26. font-family: Arial;
  27. text-align:left;
  28. }
  29. .nuage2 a:focus{
  30. color:#000033;
  31. background-image : url('../images/background2.jpg');
  32. font-size: 12px;
  33. font-family: Arial;
  34. text-align:left;
  35. }


 
le truc c'est que je voudrais changer les images en fonction de si on passe la souris dessus mais j'ai peur que ca ne devienne plus compliqué
(il ne faut pas pré-charger les images... ?)

Message cité 1 fois

---------------
http://www.ypikay.com
Reply

Marsh Posté le 16-05-2010 à 20:50:10    

Commence par définir .nuage2 a (tout court, sans pseudo-classe) puis pour chaque pseudo-classe tu n'as plus qu'à préciser les propriétés qui changent de valeur : couleur, image de fond.
Ce qui est commun (font-*, text-align) sera déjà défini grâce à .nuage2 a

 

Images de fond: ben teste comme ça ;)


Message édité par phosphoreloaded le 16-05-2010 à 20:50:31
Reply

Marsh Posté le 16-05-2010 à 23:13:34    

erwan83 a écrit :

bon si je resume, j'en suis à peu pret là :
 

Code :
  1. .nuage2{
  2. color:#000033;
  3. background-image : url('../images/background2.jpg');
  4. font-size: 14px;
  5. font-family: Arial;
  6. text-align:left;
  7. }
  8. .nuage2 a:link{
  9. color:#000033;
  10. background-image : url('../images/background2.jpg');
  11. font-size: 14px;
  12. font-family: Arial;
  13. text-align:left;
  14. }
  15. .nuage2 a:visited{
  16. color:#000033;
  17. background-image : url('../images/background2.jpg');
  18. font-size: 12px;
  19. font-family: Arial;
  20. text-align:left;
  21. }
  22. .nuage2 a:hover{
  23. color:#000033;
  24. background-image : url('../images/background2.jpg');
  25. font-size: 12px;
  26. font-family: Arial;
  27. text-align:left;
  28. }
  29. .nuage2 a:focus{
  30. color:#000033;
  31. background-image : url('../images/background2.jpg');
  32. font-size: 12px;
  33. font-family: Arial;
  34. text-align:left;
  35. }


 
le truc c'est que je voudrais changer les images en fonction de si on passe la souris dessus mais j'ai peur que ca ne devienne plus compliqué
(il ne faut pas pré-charger les images... ?)


 
Salut.
 
Ca ne sert à rien de réécrire tes lignes de codes plusieurs fois quand tu as des propriétés communes.
C'est à ça que te sert .nuage2
 
Tu peux donc simplifier ton écriture au dessus par :
 

Code :
  1. .nuage2{
  2. color:#000033;
  3. background-image : url('../images/background2.jpg');
  4. font-size: 14px;
  5. font-family: Arial;
  6. text-align:left;
  7. }
  8. .nuage2 a:link{
  9. color:#000033;
  10. }
  11. .nuage2 a:visited{
  12. color:#000044;
  13. .nuage2 a:hover{
  14. color:#000055;
  15. }
  16. .nuage2 a:focus{
  17. color:#000055;
  18. }


(par exemple)
 
Et s'il s'agit de changer ton apparence au survol, et bien tu conserves tes lignes background-image : url('../images/backgroundX.jpg');
en remplaçant "X" par ton numero d'image (pour reprendre ton exemple...)
 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 30-05-2010 à 01:05:21    

Ah yes ! cool ça !
je savais pas
merci !


---------------
http://www.ypikay.com
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed