Astuce CSS - Une directive prioritaire !important

Lundi 2 février 2009

Astuce CSS - Une directive prioritaire !important

Une directive prioritaire

Pour ceux qui connaissent bien le CSS, vous avez certainement un jour rencontré des problèmes dans les priorités accordées à un élément en fonction de l'emplacement où l'information de style se trouve...
Je vais m'expliquer...

Petit rappel
Un style peut se placer à trois endroits différents, globalement :
- directement dans une balise avec l'attribut style
ex : <font style="font-weight: bold;">Salut</font>

- dans votre document HTML entre les balises :
<script type="text/css"></script>

- ou encore dans un fichier externe CSS lié par un Link ou un import :
<link rel="stylesheet" type="text/css" href="chemin/design.css" />
ou
@import url(chemin/design.css) (utilisable au sein même d'une fichier CSS)

Présenté comme ceci devrait vous aider. Il faut savoir qu'au plus le style est proche de l'élément concerné, au plus il a de l'importance dans l'ordre de priorité.
Ainsi si vous utilisez les trois méthodes pour un même élément, la première sera prioritaire sur la seconde elle même prioritaire sur la dernière.

Mais il existe une méthode pour rendre prioritaire une directive précise pour un élément précis.
Voici un exemple :
h1{
color: red;
float: right !important;
}
Ainsi la directive Float sera prioritaire sur tout autre pour les balises H1.

A utiliser avec parcimonie bien entendu !

Par Geoffrey - Publié dans : Astuces HTML/CSS - Communauté : Infographie et webdesign
Ecrire un commentaire - Voir les commentaires - Recommander

Précédent : Portes ouvertes - Parlons... Retour à l'accueil Suivant : Royal Gym - Carte de visite - Flyers...