www.000webhost.com



Présentation des styles

CSS : Cascading Style Sheets

Les styles permettent de définir l'apparences des tags HTML au travers des attributs class et style. Les styles sont stockées soit dans des feuilles de styles ayant comme extension ".css", soit dans la page html entre les balises <style> de la partie HEAD.

Il est cependant possible d'appliquer les styles directement dans les éléments html en utilisant l'attribut style des balises. Les styles utilisés seront prioritaires sur la classe appelée à travers l'attribut class.

Déclaration des styles

La déclaration d'une feuille de style se fait dans la partie HEAD de la page html. Cette déclaration indique à la page où aller chercher les classes appliquées aux éléments html. Le chemin spécifié dans l'attribut href peut être absolu ou relatif (plus fréquent).

La syntaxe est la suivante :

<link rel="stylesheet" href="MonStyle.css">

Il est également possible de définir des styles au sein d'une page web dans la partie HEAD avec la balise STYLE :

<head>

<title>Titre de la page</title>

<style>

...

Déclaration des classes

...

</style>

</head>

Les classes définies entre les balises <style> sont uniquement accessibles dans la page courante. Pour utiliser les classes définies dans une feuille de style ou dans les balises <style>, il faut utiliser l'attribut class de l'élément html sur lequel le style doit s'appliquer.

Il est également possible d'utiliser l'attribut style au sein des balises html pour définir des styles supplémentaires.

Dans le cas où les attributs class et style sont tous les deux utilisés au sein d'une même balise, l'attribut class est le premier à être pris en compte, puis les styles définis dans l'attribut style sont appliqués à l'élément html.

<span style="font-family:verdana; font-weight:700;">

Du texte ...

</span>

Exemple complet :

<html>

<head>

<title>Exemple de style</title>

<style>

.MaClasse{

font-weight:700;

text-decoration:underline;

}

</style>

</head>

<body>

<span class="MaClasse">Texte avec la class définie en en-tête</span>

<br><br>

<span style="font-family:verdana; font-size:13; color:red;">Texte avec un style défini dans la balise</span>

<br><br>

<span class="MaClasse" style="font-family:verdana; font-size:13; color:red;">

Texte avec les attributs style et class combinés

</span>

</body>

</html>

Sélecteurs

Les sélecteurs sont des symboles utilisés au niveau des feuilles de style pour faciliter l'application des classes aux éléments. Ils permettent de mettre en place des règles d'application de styleaux différents tags en s'appuyant sur divers critères. Leur utilisation se fait dans la déclaration des classes dans les feuilles de style.

Ces différents sélecteurs sont :

- Le sélecteur * : sélecteur universel

- Le sélecteur > : sélecteur tag enfant de

- Le sélecteur + : sélecteur tag ayant pour parent

- Le sélecteur [Attr] : sélecteur tag ayant un attribut spécifique

- Le sélecteur Classes Multiples : sélecteur tag ayant pour classe

Sélecteur *

Le sélecteur * est universel. Cela signifie qu'il impacte tous les éléments de la page sur laquelle il est appliqué. Tous les effets de styles associés à ce sélecteur seront appliqués à tous les tags de la page.

» Exemples :

- Le style * {font-weight : 700; font-style : italic; }

aura pour effet d'afficher tous les éléments textes en gras et en italique.

Sélecteur >

Le sélecteur > a pour signification "enfant de".

Cela indique que le style défini avec ce sélecteur par :

parent > enfant

s'applique aux balises enfant ayant pour conteneur direct la balise parent.

» Exemples :

- Le style ol > li {font-weight : 700; font-style : italic; }

affichera tous les éléments des balises <li> (List Item) appartenant à une liste ordonnée <ol> (Ordered List) en gras et en italique.

- Le style div > span {text-decoration : underline; font-style : italic; }

affichera le texte contenu dans les balises <span> utilisés directement dans une div en souligné et en italique.

Sélecteur +

Le sélecteur + indique que la classe définie sera appliquée sur tous les éléments qui seront précédés par l'élément défini ensuite

» Exemples :

pre + p {font-style: italic;}

Sélecteur [attr]

Le sélecteur attribut agit sur les tags spécifiés contenant les attributs déclarés dans le style. Ainsi la nomenclature div[class] appliquera le style spécifié aux balises div contenant l'attribut class.

» Exemples :

- Le style p[class] {font-style: italic;}

aura pour effet d"afficher le texte contenu dans las tags <p> contenant un attribut class en italique.

- Le style select[id] {font-family: verdana;}

appliquera la police de caractère "verdana" aux listes déroulantes ayant un identifiant.

Sélecteur Classes

Ce sélecteur permet de définir pour un élément donné des classes spécifiques qui ne seront appliquées qu'à cet élément lorsque la classe sera appelée.

» Exemples :

p.italic {font-style: italic;}

p.underline {text-decoration: underline;}

p.large {font-size: 120%;}

p.small {font-size: 90%;}



précédent