|
|
 |
|
|||||||
|
|
 |
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;
...;
}
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 : B.rouge {font: Verdana 12px; color: #FF0000; }
L'appel à cette classe dans le code se fera de la façon suivante :
<B class="Rouge"> Texte à mettre en rouge et en gras </B>
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 ...}
Soit la classe « important » suivante : .important {font-type: arial; color: red; font-weight: bold}
L'appel de cette classe peut être fait à partir de n'importe quel élément HTML pour lequel la définition est valide : <h1 class="important">Attention ceci est un avertissement</h1> <i class="important">(prière d'en tenir compte)</i>
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 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 :
Les pseudos-classes de lien sont des pseudo-classes spécifiques à la balise <A> :
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;}
Ainsi la déclaration suivante s'applique à la première balise
<A> situé dans un jeu de balises <P> </P>:
P > A:first-child {color: #00FF00;}
De cette manière, la balise <A> suivante possèdera le
style ci-dessus :
<P align="justify"> <A href="http://www.commentcamarche.net">CCM</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.commentcamarche.net">CCM</A> </P>
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 :
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 :
Le sélecteur @page permet de modifier les définition de mise en page d'une page HTML (taille, marge, etc.) à 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 :
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>
| ||||||||||||||||||||||
|
Ce document intitulé « CSS - Les classes de style » issu de Comment Ça Marche 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. |
 |
