Mercredi 24 juin 2009
Dans un article précédent, je vous ai présenté la
barre Web Developer (module complémentaire pour Firefox permettant de faire des modifications virtuelles sur nos CSS). Une autre des propriétés de la barre Web Developer est de pouvoir pointer
n'importe quel élément d'une page web pour en obtenir la classe CSS correspondante. C'est-y pas génial, ça ?
Pour ceux qui n'aiment pas surcharger leur barre d'outils pour n'avoir que l'essentiel sous les yeux, on accède à cette fonction de la barre Web Developer via l'onglet Outils ===> Web Developer ===> CSS ===> View Style Information
Une fois que vous avez sélectionné cette propriété de la barre Web Developer, il ne vous reste plus qu'à pointer un élément de votre page pour voir s'afficher les classes CSS lui correspondant.
Un exemple ci-dessous :
J'ai pointé le curseur de ma souris sur un lien dans un article. La barre Web Developer m'affiche une ligne d'informations sur l'élément.
Pas de panique ! Dans certains cas, la ligne peut paraître longue mais c'est parce que Web Developer part de la classe CSS la plus généraliste dans laquelle l'élément est présent et par effet d'entonnoir, isole et cible avec précision l'élément en question.
On se s'intéressera donc qu'au dernier voire aux deux derniers attributs de l'élément pointé.
Dans mon exemple, pour modifier l'aspect de mes liens dans les articles, il me faudra donc jouer sur la classe :
.contenuArticle a {}
¤¤¤
Pour ceux qui n'aiment pas surcharger leur barre d'outils pour n'avoir que l'essentiel sous les yeux, on accède à cette fonction de la barre Web Developer via l'onglet Outils ===> Web Developer ===> CSS ===> View Style Information
| Et pour ceux qui veulent tous leurs outils à portée de clic et ont affiché la barre Web Developer dans leur barre d'outils, il suffit de cliquer sur l'onglet CSS ===> View Style Information |
|
Une fois que vous avez sélectionné cette propriété de la barre Web Developer, il ne vous reste plus qu'à pointer un élément de votre page pour voir s'afficher les classes CSS lui correspondant.
Un exemple ci-dessous :
J'ai pointé le curseur de ma souris sur un lien dans un article. La barre Web Developer m'affiche une ligne d'informations sur l'élément.
Pas de panique ! Dans certains cas, la ligne peut paraître longue mais c'est parce que Web Developer part de la classe CSS la plus généraliste dans laquelle l'élément est présent et par effet d'entonnoir, isole et cible avec précision l'élément en question.
On se s'intéressera donc qu'au dernier voire aux deux derniers attributs de l'élément pointé.
Dans mon exemple, pour modifier l'aspect de mes liens dans les articles, il me faudra donc jouer sur la classe :
.contenuArticle a {}
Accueil
Menu
 Aide CSS Outils Gadgets Ressources graphiques Mes designs : La FAQ de l'atelier : pour vos questions et conseils
|
| Contact |
|
Me contacter par e-mail |
| Lien |
Lien vers l'atelier : tu as installé un de mes designs sur ton blog et/ou tu veux
faire découvrir mon blog en mettant un lien vers l'atelier ?
Un clic pour afficher le logo en taille réelle, puis clic droit ==> enregistrer sous ...
|