Technologies internet

Feuilles de style (introduction, classes)

Principes

on associe un style d'affichage à certaines balises
on peut associer des styles différents à des mêmes balises
pour définir la manière d'afficher une balise on utilise les attributs "id" et "class".
- les identificateurs ("id") sont utilisés pour caractériser un élément unique du document HTML (une liste, un formulaire, etc.)
- les classes ("class") sont utilisées pour caractériser un ensemble d'éléments (comme des listes organisées de manière similaire).

Définition d'un style

balise.nom-de-la-classe {
  propriété de style: valeur;
  propriété de style: valeur;
  ...;
}

Exemple :

h2.titre {
  font-family: arial;
  font-style: italic
}

Remarques :

Les propriétés de style sont englobées par les accolades.
Le couple "propriété, valeur" est séparé par un ":".
Les couples "propriété, valeur" sont séparés par un ";".
Il n'y a pas de limite sur le nombre de couples "propriétés de style/valeur".
Les espaces et l'indentation dans les feuilles de style aident fortement à la lisibilité du code source.

Appel d'une classe

Code CSS :

b.rouge {
  font: Verdana 12px;
  color: #FF0000;
}

Code HTML :

<b class="rouge">Texte à mettre en rouge et en gras</b>

Dans le navigateur :

Texte à mettre en rouge et en gras

Classes universelles

Si on ne précise pas la balise dans la définition de la classe, la classe pourra être utilisée pour n'importe quelle balise pour laquelle le style sélectionné a un sens.

Code CSS :

.couleur {
  background-color:yellow;
}

Code HTML :

<h4 class="couleur">Titre en jaune</h4>
<p>La couleur du fond du paragraphe suivant sera jaune.</p>
<p class="couleur">Code HTML</p>

Dans le navigateur :

Titre en jaune

La couleur du fond du paragraphe suivant sera jaune.

Code HTML

Où mettre une feuille de style ?

Il y a trois possibilités :

on peut mettre la feuille de style directement dans l'en-tête du document, entre une paire de balises
<style type="text/css">...</style>

Exemple :

<html>
  <head>
    <title>Exemple<title>
    <style type="text/css">
      body {background-color: #000000;}
    </style>
  </head>
  <body>
    <p>Cette page est noire</p>
  </body>
</html>

on peut mettre la feuille de style dans un fichier séparé, par exemple, dans monStyle.css et ajouter la ligne suivante
<link rel="stylesheet" type="text/css" href="monStyle.css">
dans la section "head"
Exemple :
```
<html>
  <head>
    <title>Exemple<title>
    <link rel="stylesheet" type="text/css" href="monStyle.css" />
  </head>
  <body>
    <p>Cette page est noire</p>
  </body>
</html>
```
L'élément link spécifie :
- le type de lien : vers une "feuille de style"
- le type de la feuille de style liée : "text/css"
- la location de celle-ci au travers de l'attribut "href"

on peut appliquer du style CSS à un élément avec l'attribut "style"

Exemple :

<html>
  <head>
    <title>Exemple<title>
  </head>
  <body style="background-color: #000000">
    <p>Cette page est noire</p>
  </body>
</html>

la méthode recommandée est la deuxième - une feuille de style externe
Les feuilles de style en cascade
Plusieurs feuilles de styles peuvent caractériser un même document HTML. Par conséquent, un ordre de préséance doit être déterminé. Par exemple, les styles intra-ligne ont préséance sur les styles imbriqués. À leur tour, ces derniers sont traités en priorité par rapport aux feuilles de styles importées. Plusieurs règles légiférant le mécanisme de cascade existent. Cependant, la règle générale est que les styles plus spécifiques ont priorité sur les styles plus généraux.
Le principe de l'héritage

Certains éléments de la page HTML héritent des propriétés des styles définis.
Exemple: Supposons le style suivant où la couleur turquoise en arrière-plan est appliquée à la balise h1:
```
      <style type="text/css">
      h1 {background-color:#00FFFF; }
      </style>
      
```
Lorsque nous appliquons la balise h1 dans le corps de la page, il arrive fréquemment que nous y combinions d'autres balises comme ceci:
<H1> Le principe de <I> l'héritage </I> </H1>
Nous nous retrouvons avec la balise italique à l'intérieur de la balise H1. En conséquence, la balise italique héritera des propriétés du style H1 et affichera également la couleur de fond turquoise. Le même principe s'applique à beaucoup d'autres styles.
Exemples
- une boîte de texte
  Un effet agréable peut être obtenu si le fond d'une boîte est peinturé d'une plaine couleur. Pour cela, on utilise la propriété de background. On peut remplir la boîte englobante un "div" comme suit :
```
        div.color {
            background: rgb(204,204,255);
            padding: 0.5em;
            border: none;
        }
        
```
  On peut définir des valeurs différentes pour l'espacement de gauche, du haut, de droite et du bas avec les propriétés padding-left, padding-top, padding-right et padding-bottom, par ex.: padding-left: 1em.

Les bénéfices quant à l'utilisation des feuilles de style

Une plus grande flexibilité au programmeur Web quant à la mise en page des documents HTML; le style de toutes les balises HTML peut se modifier selon les besoins du concepteur.
Les feuilles de style aident le concepteur à assurer des styles consistants d'une page à l'autre d'un site Web. En appliquant des feuilles de styles externes aux pages d'un site Web, nous nous assurons que celui-ci présentera la même apparence.
L'entretien d'un site Web devient extrêmement facile à l'aide des feuilles de styles, puisqu'il suffit de modifier les styles en un seul endroit pour changer l'apparence des balises. Les feuilles de styles externes rendent le processus encore plus facile. En effet, nous n'avons qu'à faire le changement dans le fichier externe pour modifier l'apparence de balises à travers toutes les pages d'un site HTML.
Des feuilles de styles constituent une amélioration substancielle par rapport aux balises HTML statiques. Cependant, nous devons garder à l'esprit le problème de compatibilité selon les différents navigateurs, ce qui rend la tâche un peu plus complexe.

Comment organiser les fichiers html et css ?

En général, nous avons un fichier css et plusieurs fichiers html qui utilisent ce fichier css.

structure des fichiers

Une modification dans le fichier css s'appliquera automatiquement à tous les fichiers html.

Exemples :

Tutoriel de ZVON: exemple 3
Tutoriel de ZVON: exemple 4
Tutoriel de ZVON: exemple 5
Tutoriel de ZVON: exemple 6
Tutoriel de ZVON: exemple 7
Tutoriel de ZVON: exemple 9
Tutoriel de ZVON: exemple 10
Tutoriel de ZVON: exemple 15
Tutoriel de ZVON: exemple 16
Tutoriel de ZVON: exemple 17