Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe.
La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets :
Selecteur_de_balise.nom-de-la-classe {
propriété de style: Valeur;
propriété de style: Valeur;
...;
}
b.rouge {
font-size:17px;
color:#FF0000;
}
Où "nom-de-la-classe" représente le nom donné à la classe.
Pour appeler une classe dans le code html, il suffit de rajouter un attribut class à la balise :
Soit la classe rouge appliquée à la balise b :
b.rouge { color: #FF0000; font: Verdana 17px;}
L'appel à cette classe dans le code se fera de la façon suivante :
Code |
|
|
| Résultat | Texte est rouge de taille 17 |
Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! On parle alors de classe universelle (parfois classe indépendante ). La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un point :
.nom-de-la-classe {propriété de style: Valeur; propriété de style: Valeur ...}
.bleu { color: #0000FF; font: Verdana}
L'appel de cette classe peut être fait à partir de n'importe quel élément html pour lequel la définition est valide :
Code |
| |
| Résultat | Le texte est bleu
Le titre est en bleu |
notez l'absence de point dans l'appel à la classe.
Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de balises en définissant une réaction à un événement ou bien à la position relative de la balise au sein des autres balises.
Contrairement aux classes, le nom des pseudo-classes est prédéfini, il n'est donc pas possible de créer ses propres pseudo-classes. Il existe plusieurs types de pseudo-classes :
- Les pseudo-classes dynamiques,
- Les pseudo-classes de lien,
- Les pseudo-classes descendante,
- Les pseudo-classes de texte ,
- Les pseudo-classes de langue,
- Les pseudo-classes de page.
Les pseudo-classes dynamiques permettent de modifier le style d'une balise en fonction d'un événement (mouvement de la souris, clic, ou bien appui sur une touche du clavier). Il en existe trois :
- La pseudo-classe :hover permet d'affecter un style à la balise sélectionnée lors d'un survol par le curseur de la souris :
a:hover {font-decoration: underline;}
- La pseudo-classe :focus permet de définir un style à la balise sélectionnée lorsque le focus lui est donné (par exemple lors d'un clic dans un élément de formulaire) :
textaera:focus {color: #FF0000;}
- La pseudo-classe :active permet de définir un style à la balise sélectionnée lorsque l'utilisateur clique sur l'élément (entre le moment où l'utilisateur clique sur le bouton de la souris et celui où il le relâche) :
a:active {color: #FF0000;}
<!> Les pseudo-classes dynamiques ne sont pas reconnues de la même façon par tous les navigateurs. <!>
Les pseudo-classes de lien
Les pseudos-classes de lien sont des pseudo-classes spécifiques à la balise <a> :
- La pseudo-classe :link permet de définir le style des liens hypertextes n'ayant pas encore été consultés par le client
a:link {color: #FF0000;}
- La pseudo-classe :visited permet de définir le style des liens hypertextes que le client a déjà visités
a:visited {color: #FFFF00;}
Il est possible que certains navigateurs considèrent un lien comme n'ayant pas été visité s'il n'est pas consulté pendant une longue période de temps.
- La pseudo-classe :hover permet de définir le style des liens hypertextes lors du passage du pointeur de la souris
a:hover {color: #00FF00;}
La pseudo-classe descendante
Une pseudo-classe descendante permet d'appliquer un style à la première balise au sein d'un élément. La syntaxe de cette pseudo-classe est la suivante :
Element_Parent > Balise:first-child {style;}
p> a:first-child {color: #00FF00;}
Ainsi la déclaration suivante s'applique à la première balise <a> situé dans un jeu de balises <p> </p> :
De cette manière, la balise <A> suivante possèdera le style ci-dessus :
<p align="justify">
<a href="http://www.google.fr">Un moteur de recherche</a>
</p>
La balise <A> suivante ne sera par contre pas prise en compte car elle n'est pas la première balise après la balise <P> :
<p align="justify">
<br />
<a href="http://www.google.fr">Un moteur de recherche</a>
</p>
<!> Les pseudo-classes descendante ne sont pas reconnues de la même façon par tous les navigateurs. <!>
Les pseudo-classes de texte
Les pseudo-classes de texte permettent d'appliquer un style à une partie du texte délimité par les balises auxquelles ils s'appliquent. Ainsi les pseudo-classes de texte s'utilisent généralement conjointement avec la balise de paragraphe ( <P> ).
Il existe deux pseudo-classes de texte :
:first-line : permet d'appliquer un style à la première ligne d'un paragraphe.
p:first-line { text-transform: uppercase }
:first-letter : permet d'appliquer un style à la première lettre d'un paragraphe afin de produire un effet typographique. L'exemple suivant par exemple double la taille et met en gras la première lettre d'un paragraphe :
p:first-letter { font-size: 200%; font-weight: bold; }
Code |
| |
| Résultat | Ce paragraphe commence par la lettrine C Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus. Pour ce paragraphe appliquons le style sur la première ligne. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar.Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet. |
<!> Les pseudo-classes de texte ne sont pas reconnues de la même façon par tous les navigateurs. <!>
Les pseudo-classes de langue
Il est possible de définir un style en fonction de la langue du document (spécifiée dans les en-têtes HTTP ou dans les balises méta) ou de la langue d'un élément html ou XML (spécifié grâce à l'attribut optionnel lang ) si celle-ci est précisée.
Une pseudo classe de langue utilise la notation suivante :
:lang(langue) . La pseudo classe de langue suivante permet de définir les guillemets selon la notation française :
html:lang(fr) { quotes: '« ' ' »' }
Les pseudo-classes de page
Le sélecteur @page permet de modifier les définition de mise en page d'une page html (taille, marge… ) à l'impression, telles que les marges (margin-left, margin-top, margin-right, margin-bottom), la taille ( size ). Il faut alors imaginer la page web comme un ensemble de pages constituant un ouvrage papier.
Les pseudo-classes de page permettent ainsi de sélectionner les pages de gauche, de droite ou bien la première page d'un document.
Il existe différentes pseudo-classes de page :
@page:left : permet de définir les propriétés des pages de gauche.
@page:right : permet de définir les propriétés des pages de droite.
@page:first : permet de définir les propriétés de la première page d'un document.
@page:right { size:landscape; margin-left: 2.5cm; }
@page:left { size: landscape; margin-left: 2cm; }
@page:first { size: portrait;
margin-left: 2.5cm;
margin-right: 2cm;
margin-bottom: 1cm;
margin-top: 4cm;}
Le sélecteur d'id (identifiant) permet de faire référence à un élément unique d'une page repéré par son identifiant. Les id servent notamment à localiser des éléments html grâce au JavaScript .
La syntaxe d'un sélecteur d'id est la suivante :
#nom_id { style }
Un tel style s'appelle de la manière suivante :
<BALISE id="nom_id" > ... </BALISE>
Il ne peut exister qu'un seul id par page ! notez également l'absence de # dans l'appel au sélecteur d'id.
Ce document intitulé est issu de l'encyclopédie informatique Comment Ça Marche (www.commentcamarche.net ), il est mis à disposition sous les termes de la licence Creative Commons . Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.