Discussion :

[Ladgalen]

Bonjour

J'ai le code suivant dans un fichier css que j'ai récupéré.

Code :

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

1
2
3
4
 
    font-size: 1em; /* allure de la légende */
    padding-top: 0.4em;
    font-family:sans;font-size:14pt;

Je ne comprend pas la différence entre font-size et font-size dans le font-family ? Quel est l'intéret de le définir deux fois ?

Merci

[numew]

Aucun intérêt, c'est le dernier déclaré qui sera pris en compte.

[Erwan31]

le font-size ne fait pas parti de font-family, c'est la même propriété que le première déclaration, d'ailleurs ça devrait être écrit comme ceci:

Code :

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

1
2
3
4
 font-size: 1em; /* allure de la légende */
    padding-top: 0.4em;
    font-family:sans;
    font-size:14pt;

Mais c'est une erreur de conception. L'unité pt (point) n'est pas adaptée pour l'écran mais à une taille de texte issue du print (pour l'impression).

[Er3van]

Le seul intérêt à mes yeux de déclarer deux fois une propriété est dans le cas suivant :

Code CSS :

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

1
2
3
4
5
 
#monDiv {
        font-size : 14px !important ; /* pour FF */
        font-size : 12px ; /* pour IE */ 
}

Ce qui évite de passer par des commentaires conditionnels...

[Erwan31]

Le seul intérêt à mes yeux de déclarer deux fois une propriété est dans le cas suivant :

Code CSS :

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

1
2
3
4
5
 
#monDiv {
        font-size : 14px !important ; /* pour FF */
        font-size : 12px ; /* pour IE */ 
}

Ce qui évite de passer par des commentaires conditionnels...

Non Er3van, cette solution n'est pas viable depuis l'apparition d'IE7 qui comprend maintenant le !important de manière standard
dans la cas ou 2 propriétés identique sont présentes dans la même règle de styles.
D'une manière général ne pas se reposer sur des hack de ce type (Underscore
hack, * hack...) dont la pérennité n'est pas garantie.
Les commentaires conditionnels sont clairement la solution à privilégier, d'ailleurs
les ingénieurs de Microsoft eux-même en recommandent l'usage.

[Er3van]

Le fait qu'IE 7 le reconnaisse ne change rien au fait que ça puisse permettre de faire une différence, pour IE6 (ou -) seulement certes, mais ça fonctionne.

Après, le fait que ce ne soit pas le mieux, j'suis tout à fait d'accord, mais c'était la seule raison à mes yeux qui aurait pu justifier la définition en double d'une propriété.

[Ladgalen]

Merci pour toute vos réponses

Après avoir épurer quelques feuilles css je pensais être capable d'écrire un petit truc tout simple et visiblement j'ai encore de grosse lacune :

J'ai écris le code suivant qui marche quand je met class="lien" dans mon fichier html

Code :

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

1
2
3
4
5
6
7
 
a.lien {
    text-decoration: none;
    font-weight: bold; 
    color: #B46825;
}
a.lien:hover {text-decoration: overline underline;}

au début je l'avais écrit comme ça et ça ne marchait pas et je comprend pas pourquoi ...

Code :

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

1
2
3
4
5
6
7
 
.lien a {
    text-decoration: none;
    font-weight: bold; 
    color: #B46825;
}
.lien a:hover {text-decoration: overline underline;}

plus loin dans la feuille de style j'ai définit une classe .navbar (pour un menu sur une ligne) et j'ai les items suivants qui sont écrit comme le cas du dessus qui ne marche pas.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
.navbar {
    list-style: none;  /* supprime les puces */
    margin: 0;
    padding:0;
}
.navbar li {
    display: inline;
    margin-right: 1px;     
    color: #FFFFFF ;                  /* couleur du texte */
}
.navbar li a {
    color: #FFFFFF; 
    line-height: 2em ; 
    padding: 30px 10px ;               /* gere l'epaisseur */
    text-align: center ;
/*    display: block ;                  /* rempli le lien */
    text-decoration: none;            /* supprime l'aspect lien */
}
.navbar li a:hover, .navbar li a:focus, .navbar li a:active { 
    background : url(img/focus.png) top left;
/*    text-decoration: underline overline ;*/
}

Pourquoi dans un cas ça marche et dans l'autre non ?

Tant que j'y suis, pour mon menu dans chaque <li> </li> je met une petite image + un texte et je voulais que l'image grossisse un peu lors du passage de la souris donc j'ai écrit (ou récupéré à droite à gauche) ça :

Code :

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

1
2
3
 
.navbar img {height:30px;}
.navbar img:hover {height:40px;}

Mais du coup ça ne marche que si je met la souris sur l'image. Comment je peux faire pour agrandir l'image en passant la souris sur l'ensemble du <li> </li>. Ou de manière générale comment agir sur l'image quand je passe la souris sur le <li> </li>.

Merci