| auteur : debug |
Il suffit de déclarer les styles avec des classes, puis
appliquer les styles dans l'attribut class,
en séparant l'utilisation des différents styles avec un espace.
Style CSS associé au corps (X)HTML | .rouge {
color : red ;
}
.gras {
font-weight : bold ;
}
|
Code (X)HTML de la page | < p class = " rouge gras " > Début de mon paragraphe en rouge et en gras.< / p >
|
|
| auteur : freegreg |
On définit un seul style pour plusieurs éléments en les
séparant par une virgule dans la feuille de style CSS.
h1, .maclasse, # monparagraphe {
color : red ;
font-weight : bold ;
}
|
Ici, les éléments h1, les classes maclasse
et l'identifiant monparagraphe seront affichés de la
même manière (du même style).
|
| auteurs : Bisûnûrs, Linaa |
On ne peut pas simplifier toutes les propriétés CSS.
Cependant, il existe des raccourcis qui permettent, pour
certaines des propriétés, de réduire la taille de la
feuille de style, et une meilleure visibilité (parfois).
Les codes couleurs
Il commence par un # suivi de 6 chiffres qui
correspondent à un code hexadécimal (Rouge, Vert, Bleu).
Par exemple, on peut simplifier le #FF00AA en
#F0A (ils vont par paire) mais pas #01AABB.
Les marges
.maclasse {
margin-top : 1px ;
margin-right : 2px ;
margin-bottom : 3px ;
margin-left : 4px ;
}
|
peut être raccourci en
.maclasse {
margin : 1px 2px 3px 4px ;
}
|
On peut aussi trouver d'autres formes de ce raccourci :
.maclasse {
margin : 1px 2px 3px ;
}
|
.maclasse {
margin : 1px 2px ;
}
|
.maclasse {
margin : 1px ;
}
|
Ces formes de raccourcis s'appliquent, aussi, aux propriétés :
padding, border, border-color, border-style, et border-width.
Les bordures
.maclasse {
border-width : 1px ;
border-style : solid ;
border-color : # F00 ;
}
|
peut être raccourci en
.maclasse {
border : 1px solid # F00 ;
}
|
Ce raccourci peut être utilisé pour : border-top,
border-right, border-bottom et border-left.
.maclasse {
border-top : 1px solid # F00 ;
}
|
Les arrières plans
.maclasse {
background-color : # F00 ;
background-image : url (' monimage ' );
background-repeat : no-repeat ;
background-attachment : fixed ;
background-position : top center ;
}
|
peut être raccourci en
.maclasse {
background : # F00 url (' monimage ' ) no-repeat fixed top center ;
}
|
Les polices de caractères
.maclasse {
font-style : italic ;
font-variant : small-caps ;
font-weight : bold ;
font-size : 14px ;
line-height : 140% ;
font-family : Arial, Times, Serif;
}
|
peut être raccourci en
.maclasse {
font : italic small-caps bold 14px /140% Arial, Times, Serif;
}
|
Les listes
.maclasse {
list-style-type : disc ;
list-style-position : inside ;
list-style-image : url (' monimage ' );
}
|
peut être raccourci en
.maclasse {
list : disc inside url (' monimage ' );
}
|
Note : Si les propriétés ne sont pas spécifiées dans
leur forme raccourcie, elles prennent alors leurs valeurs
par défaut.
|
| auteur : Linaa |
Les classes dans une feuille de style sont toujours
précédées d'un point.
Voici un exemple d'utilisation :
Code CSS | .bordures {
border : 1px solid # FF0000 ;
}
|
Code (X)HTML associé au CSS | < div class = " bordures " > Mon bloc encadré< / div >
|
Note : La classe bordures peut s'appliquer aux
balises div mais également aux autres, telles que
p, span, a, input, etc.
|
| auteur : Linaa |
En CSS, un identifiant est toujours représenté par
un #.
Voici un exemple d'utilisation :
Code CSS | # copyright {
font-size : 70% ;
color : # f00 ;
text-align : center ;
border-top : 1px solid # f00 ;
}
|
Code (X)HTML | < p id = " copyright " > Fait par moi, et personne d'autre< / p >
|
Notes :
-
Un identifiant doit être utilisé une seule fois
dans une page, mais peut être réutilisé dans d'autres.
-
On peut également imposer que les identifiants ne
s'appliquent qu'à des éléments particuliers (par
exemple, p#copyright).
Pour une utilisation multiple des styles sur une même
page, il faut passer par des classes.
|
lien : À quoi sert l'attribut id en (X)HTML/CSS ?
lien : Comment utiliser les classes en CSS
|
Consultez les autres F.A.Q's
Les sources présentés sur cette page sont libres de droits,
et vous pouvez les utiliser à votre convenance. Par contre cette page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs.
Copyright ©2004
Developpez LLC. Tous droits réservés Developpez LLC.
Aucune reproduction, même partielle, ne peut être faite de ce site et de
l'ensemble de son contenu : textes, documents et images sans l'autorisation
expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans
de prison et jusqu'à 300 000 E de dommages et intérêts.
Cette page est déposée à la SACD.
|