Statistiques| Inscription| Espace privé
Développement Web
Accueil > CSS
Le plan Les galeries
Dernière mise à jour :
vendredi 15 mai 2009
Contact
Webmestre
olivier ramos
ParamSPIP
Agenda
<<   Mars 2024   >>
Lu Ma Me Je Ve Sa Di
26 27 28 29 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31



La déclaration d’un style
 
 
 
 

Un style est associé à un élément à l’aide d’un selecteur et se déclare comme suit :

selecteur { règles de style terminées par des points-virgules }

Il existe trois types de selecteurs.

1. Le selecteur de balise

Si vous voulez, par exemple, que le texte de toutes les balises de paragraphe <p> soit centré et écrit en rouge avec la police Arial, il vous faudra écrire :

p{
font-family:Arial ;
text-align:center ;
color:red ;
}

Si vous voulez qu’il en soit de même pour vos liens et vos titres de niveau 1, vous écrirez : 

p, a, h1{
font-family:Arial ;
text-align:center ;
color:red ;
}

2. Le selecteur de classe

Si vous voulez par exemple que tous les éléments (quelle que soit la balise) dont l’attribut class est "apparencecommune" aient une largeur de 50px, une hauteur de 75px que leurs fonds soient jaunes et leurs bordures bleues, vous écrirez :

.apparencecommune{
width:50px ;
height:75px ;
background-color:yellow ;
color:red ;
border:1px solid blue ;
}

Si vous voulez attribuer ces valeurs uniquement aux balises <div class="apparencecommune"> et non aux balises <p class="apparencecommune"> par exemple, il vous faudra écrire :

div.apparencecommune{
width:50px ;
height:75px ;
background-color:yellow ;
color:red ;
border:1px solid blue ;

}

Si vous voulez attribuer ces valeurs à tous les éléments contenus entre deux balises <div> et </div> et dont l’attribut class est "apparencecommune", il vous faudra écrire (attention à l’espace essentiel entre div et .apparencecommune :

div .apparencecommune{
width:50px ;
height:75px ;
background-color:yellow ;
color:red ;
border:1px solid blue ;

}

3. Le selecteur d’identifiant.

La méthode est identique à celle employée pour les classes, en remplaçant le point par un dièse.

Ainsi, si vous voulez attribuer les valeurs précédentes à tous les éléments paragraphes <p> contenus dans l’unique élément dont l’attribut id est "apparencecommune", il vous faudra écrire :

#apparencecommune p{
width:50px ;
height:75px ;
background-color:yellow ;
color:red ;
border:1px solid blue ;

}

Remarque concernant l’héritage

Un élément hérite du style des éléments qui le contiennent.

Remarque sur les classes multiples

Si vous voulez qu’un élément possède les styles de plusieurs classes, il suffira de donner à son attribut class la valeur correspondant à ces classes aboutées et séparées par des espaces.

Par exemple, si vous avez défini les règles de styles :

.premier{
color:red ;
}
.deuxieme{

background-color:yellow ;
}
.troisieme{

border:1px solid blue ;
}

 alors un élément dont l’attribut class aura la valeur "premier deuxieme troisieme" aura son texte écrit en rouge sur fond jaune avec une bordure bleue de largeur 1px.