Feuille de style

Feuille de style
Feuille de style

Une feuille de style comme son nom le dit clairement sert à définir un style. Mais qu'est ce qu'un style en HTML ? Un style est un ensemble de règles permettant de définir comment un objet doit être rendu ( dessiné, affiché).

Grâce aux feuilles de style, il est virtuellement possible de changer le style de tout objet dans une page. L'exemple suivant montre comment changer la couleur de fond d'une page en modifiant l'élément de style background-color (couleur de l'arrière-plan) du body de cette page:
```
 <html> <head> <title>Titre d'une belle page rouge !</title> </head> <body style="background-color: red;"> Une belle page en rouge ! </body> </html> 
```
On peut rassembler tous ces éléments de style dans l'en-tête du document grâce à une balise <style> ainsi que le montre l'exemple ci-dessous:
```
 <html> <head> <title>Titre d'une belle page rouge ! (bis)</title> <style>  </style> </head> <body> Une belle page rouge ! (bis) </body> </html> 
```
Notez les balises de commentaires () autour de la définition des éléments de style. Ces balises sont nécessaires pour tromper les navigateurs obsolètes qui pourraient mal interpréter ces indications de style.

Le résultat de cet exemple (identique à celui de l'exemple précédent) est visible ici.

Si on veut pouvoir appliquer le même style à un ensemble de pages, il est plus simple de rassembler toutes les informations de style dans un seul et même fichier. L'extension de ce fichier sera généralement .css et il aura le format décrit par l'exemple suivant:
```
/* Ma jolie feuille de style. */ body { background-color: red; } 
```
On indiquera dans le code HTML où trouver cette feuille de style en utilisant le tag link de la façon suivante:
```
 <html> <head> <title>Titre d'une belle page rouge ! (ter)</title> <link rel="stylesheet" title="ma-jolie-feuillede-style" type="text/css" href="exemple3.css" media="screen" />  </head> <body> Une belle page rouge ! (ter) </body> </html> 
```
La valeur stylesheet du paramètre rel indique que l'on déclare une feuille de style. La valeur screen du paramètre media indique que cette feuille de style doit être utilisée lors du rendu de la page à l'écran. La valeur exemple3.css du paramètre href indique que la feuille de style est contenue dans le fichier exemple3.css et que ce fichier est trouvable au même emplacement que la page elle-même.

On obtient à nouveau une belle page toute rouge.

Questions:
1. En vous reportant à la documentation, trouvez les différentes valeurs possibles pour le paramètre media décrit ci-dessus.
2. Dans le répertoire WWW de votre compte (créez le si il n'existe pas et octroyez les droits de parcours pour tous sur ce répertoire), créez un sous-répertoire tds_html. Dans ce sous-répertoire créez un fichier index.html et un fichier style.css. Faites du fichierindex.html une page au format html reliée à la feuille de style style.css que vous laisserez vide pour l'instant.
3. En vous aidant du chapitre 14 des spécifications de la norme CSS2.1, modifiez votre feuille de style pour mettre une image quelconque ( , peut être ?) en arrière-plan de votre page index.html. Expérimentez avec les paramètres background-repeat, background-attachment, et background-position.
2. La class internationale ?

Il arrive assez souvent qu'on ait besoin de plusieurs styles pour un même élément. On peut, par exemple, vouloir définir plusieurs type de paragraphes dont les alignements varieraient. On aurait donc les paragraphes alignés à droite, les paragraphes alignés à gauche, les paragraphes centrés et les paragraphes justifiés.

On pourrait certes s'amuser à écrire le code suivant:
```
<p style="text-align: left;"> Ce paragraphe est aligné à gauche. </p> <p style="text-align: left;"> Ce paragraphe aussi est aligné à gauche. </p> <p style="text-align: right;"> Ce paragraphe est aligné à droite. </p> <p style="text-align: center;"> Ce paragraphe est centré. </p> <p style="text-align: justify;"> Ce paragraphe est justifié. </p> 
```
On obtiendrait alors le résultat suivant:

Ce paragraphe est aligné à gauche.

Ce paragraphe aussi est aligné à gauche.

Ce paragraphe est aligné à droite.

Ce paragraphe est centré.

Ce paragraphe est justifié.

Mais cette méthode risque d'être un brin fastidieuse. Surtout si on a des paragraphes alignés à gauche avec du texte bleu sur fond blanc, des paragraphes alignés à droite avec une police de taille 17, etc...

Heureusement il existe une méthode pour définir des groupes de propriétés et leur attribuer un nom. Ce sont les classes. L'exemple suivant est un fragment de feuille de style montrant comment définir une classe red-right-aligned qui lorsqu'elle est attribuée à un élément aligne le contenu de cet élément à droite et lui donne la couleur rouge.
```
.red-right-aligned { color: red; text-align: right; }
```
Et ce fragment de code html montre comment attribuer cette classe à paragraphe:
```
<p class="red-right-aligned"> Oh le joli paragraphe en rouge aligné à droite ! </p>
```
Cet exemple ressemble au fragment suivant:

Oh le joli paragraphe en rouge aligné à droite !

Les curieux se demanderont probablement déjà pourquoi le nom de la classe est précédé d'un point lors de sa définition dans la partie feuille de style. Ils pourraient penser, non sans raison, que c'est pour différencier les classes des styles des éléments de base. Ils n'auraient pas complètement tort. Mais cela va encore un peu plus loin. On peut en effet écrire des classes de style destinées à des éléments de type spécifique. On peut par exemple modifier notre style red-light-aligned (que l'on renommera paragraphe-red-right-aligned pour l'occasion) pour qu'il ne s'applique qu'à des paragraphes. Pour ce faire on modifiera le style de façon à ce qu'il ressemble à ça:
```
p.paragraph-red-right-aligned { color: red; text-align: right; } 
```
Et voilà ! Maintenant si on définit par exemple le titre:
```
<h1 class="paragraph-red-right-aligned"> Mon joli titre en rouge aligné à droite </h1> 
```
il aura l'aspect suivant:

Mon joli titre en rouge aligné à droite

Questions:
1. Ajoutez un style à votre feuille de style les classes de style red-text, green-text et blue-text, qui comme leurs noms l'indiquent donneront respectivement la couleur rouge, verte ou bleue aux éléments auxquelles elles seront appliquées.
2. Créez une page dont le code sera le suivant:
  <html> <head> <style>  </style> </head> <body> <p> paragraph 1 </p> <p class="uneclasse"> paragraph 2 </p> <p> paragraph 3 </p> <p> paragraph 4 </p> </body> </html>
  Visualisez cette page. Que constatez vous ?
3. Héritage, cascade.

Le CSS permet également de faire des choses encore un peu plus complexes. On peut par exemple écrire ceci:
```
div p { text-indent: 10px; } 
```
Cet exemple dit que tout paragraphe se trouvant à l'intérieur d'un div doit voir sa première ligne indentée de 10 pixels. On dit que cette règle n'affecte que les éléments de type p descendants d'un élément de type div.

On peut également utiliser des classes pour affiner encore un peu plus la sélection comme dans les exemples suivants:
```
/* n'affecte que les paragraphes descendants * d'un élément de type div de classe 'mondiv' */ div.mondiv p { text-indent: 20px; } /* n'affecte que les paragraphes de classe * 'monparagraphe' et descendants * d'un élément de type div. */ div p.monparagraphe { text-indent: -10px; } /* n'affecte que les paragraphes de classe * 'monparagraphe' descendants d'un élément * de type div de classe 'mondiv'. */ div.mondiv p.monparagraphe { text-indent: 40px; } 
```
Encore plus fort, il est possible de spécifier ces éléments de style sur plus de deux niveaux:
```
/* N'affecte que les spans de classe 'rouge' descendants des * paragraphes eux mêmes descendants des div de classe 'boite' */ div.boite p spam.rouge { color: red; } 
```
Questions:
- Copier les différents styles définis ci dessus et appliquez les à un document.
- Comment sont appliqués les divers styles définis lorsqu'ils se chevauchent ? Par exemple si un style "div.a p" et un style "div p.b" sont définis, que se passe t'il pour le fragment de code suivant:
  
  <div class="a"> <p class="b"> tut </p> </div> ?

Feuille de style

2. La class internationale ?

Mon joli titre en rouge aligné à droite

3. Héritage, cascade.

2. La `class` internationale ?