LES FEUILLES DE STYLES
Introduction
A l'origine, le HTML était uniquement un langage de description. Avec le temps il s'est enrichi de balises de mise en forme, capables de contrôler plus spécifiquement l'aspect esthétique des pages. La structure du HTML n'étant pas orientée vers la présentation des pages, elle présente des lacunes. Pour pallier ces lacunes, le W3C propose depuis 1998, les Feuilles de styles en cascade (CSS).
Les feuilles de styles permettent de soulager le code HTML des aspects de mise en forme, elles permettent alors de travailler la présentation des pages de façon plus fonctionnelle, plus cohérente et plus sécurisée. Le développement et la maintenance de sites web sont alors plus faciles.
Imaginez votre site, codé en HTML pur, dont tous les textes sont en
police Arial (avec un nombre impressionnant de balise font), et que
vous décidiez que tous les textes seront maintenant en police
Verdana... Une seule solution, modifier chaque balise font de chaque
page de votre site, sans en oublier aucune. Et si votre site se compose
de plusieurs dizaines de pages... argh !!!
Avec les feuilles de
style, vous n'avez que quelques balises à modifier (voire une seule).
L'opération se réalise donc en quelques minutes....
Les avantages des CSS :
- Dissociation de la présentation (mise en forme) et de la description (contenu).
- Simplification du développement et de la maintenance de site.
- Lisibilité des pages accrue. (le code HTML n'est plus surchargé de balises de mise en forme).
- Accélération du chargement des pages. (ce n'est pas énorme, mais bon...)
- Possibilité de choix de mise en forme accrue.
Definir les CSS
Il existe principalement trois méthodes pour injecter du code CSS dans une document HTML : deux internes, une externe.
Première méthode : l'attribut Style
L'attribut Style se place dans n'importe quelle balise ouvrante à partir de Body : la valeur de l'attribut style (placé en doute guillements) sera du language CSS.
<body style="background-color: red">
Deuxième méthode : la balise Style
La balise <style> </style> ne se place qu'à l'intérieur de la partie <head> </head>
<head> <title> La balise STYLE</title> <meta charset="UTF-8"> <style> </style> </head>
En HTML 4 et XHTML un attribut était obligatoire pour la balise Style : l'attribut TYPE : text/css, mais il n'est plus obligatoire en HTML5.
Règles de présentation
Lorsque l'on redige des règles de style il convient de respecter quelques règles basiques de présentation, et ce, lorsqu'on travaille en équipe ou bien pour retrouver les maladresses de frappes!
1- L'accolade doit etre placé juste apres le selecteur
2- le selecteur sera place sans espace sans tabulation en debut de ligne
3- l'accollade fermante sera placé en debut de ligne au niveau du selecteur (SANS ESPACE)
4- la liste des propriétés css sera indenté (avec une tabulatation). Une propriété CSS par ligne (séparée par le symbole ;)
5- il est d'usage de tout mettre sur une seule ligne s'il n'y a qu'UNE SEULE propriété CSS dans une régle.
body{background-color: yellow;}
h1{
background-color: black;
color: white;
}
Troisième méthode : le(s) fichier(s) CSS
Des fichiers CSS seront créés, ils auront l'extension .CSS. Dans ce type de fichier, le HTML est proscrit.
Une fois ces fichiers CSS créés, ils seront reliés à notre document web, grâce à la balise LINK (=lien) dans la partie HEAD de mon document HTML.
Chaque fichier CSS aura sa balise LINK.
Si j'ai deux fichiers CSS j'aurai deux fois la balise link dans la partie HEAD de ma page HTML.
<head>
<title> La balise STYLE</title>
<meta charset="UTF-8">
<link href="styles/styles.css" rel="stylesheet">
...
...
</head>
Le vocabulaire à connaître
Une déclaration : liste des propriétés css (placées entre accolades)
Un sélecteur : c'est ce qui permet de selectionner l'élément HTML concernée par la règle de style qu'on souhaite lui appliquer. Il existe 3 principaux sélecteurs : le nom de balise (à partir de body), l'identifiant (#) et la calsse (.).
Une règle de style : selecteur + déclaration de style.
Constitution d'une règle de style
La syntaxe des CSS et celle-ci : sélecteur { déclaration(s); } ou la déclaration s'écrit : propriété:valeur ce qui donne :
sélecteur { propriété:valeur; propriété:valeur; }
Le sélecteur peut être :
- une balise HTML : p { color:red; }
- des éléments imbriqués : p b { color:red; }
- une sous-classe : p.txtrouge { color:red; }
- une sous-classe indépendante : .txtrouge { color:red; }
- un identificateur : #txtrouge { color:red; }
- un pseudo-élément : a:link { color:red; }
Déclaration dans une balise, avec l'attribut style :
| Code source | Affichage |
|---|---|
<p style="color:red;">Texte rouge</p> |
Texte rouge |
Attention : ne pas confondre l'attribut style et la balise <style> (ci-dessous).
Les attributs style sont utilisables dans chaque balise HTML. L'avantage de la méthode, c'est qu'elle est simple. Par contre, elle n'a pas beaucoup d'intérêt, puisqu'on avait le même résultat en HTML grâce à : <p><font color="red">Texte rouge</font></p>. De même, on perd tous les avantages des CSS.
Déclaration dans une balise, avec la balise <style> dans l'entête HTML:
| Code source | Affichage |
|---|---|
<html><head>
<style>
<!--
p { color: red; }
-->
</style>
<head>
<body>
<p>Texte en rouge</p>
</body> </html>
|
Texte rouge |
Attention : ne pas confondre l'attribut style et la balise <style> (ci-dessus).
On utilise les balises de commentaires dans la balise <style> pour les navigateurs ne comprenant pas les les CSS.
Cette méthode est meilleure que la précédente, puisque le style ainsi déclaré est appliqué à toute la page.
La déclaration dans une fichier distinct :
| Code source | Affichage | |
|---|---|---|
| style.css | /*Ma feuille de style*/
p { color: red; }
|
|
| page.htm | <html> <head> <link href="style.css" rel="stylesheet"> </head> <body> <p>Texte en rouge </p> </body> </html> |
Texte rouge |
Le style est déclaré dans un fichier.css, et on relie la page HTML à la feuille de style par la balise <link href="style.css" rel="stylesheet" type="text/css">.
La feuille de style externe est toujours avec l'extension .css
Dans cette feuille, il est possible d'utiliser des commentaires. Ils sont toujours entre /* et */.
Utiliser les CSS
Nous avons vu comment il fallait déclarer les styles, nous allons maintenant développer les façons d'utiliser ceux-ci.
Le sélecteur est une balise HTML
p { color:red; }
Il n'y a pas besoin de spécifier l'utilisation du style, celui-ci étant automatiquement appliqué à toutes les balises concernées.
| Déclaration | Utilisation |
|---|---|
p { color:red; } |
<p>Texte rouge</p> |
Le sélecteur est un ensemble d'éléments imbriqués
p b { color:red; }
Ce style sera automatiquement appliqué aux balises <b> si et seulement si, celles-ci sont imbriquées dans une balise <p>
| Déclaration | Utilisation |
|---|---|
p b { color:red; } |
<p>texte normal <b> texte rouge et gras </b> texte normal</p> <b>texte gras sans couleur spécifiée</b> |
Le sélecteur est une sous-classe
p.txtrouge { color:red; }
Ce style est appliqué à toutes les balises <p> signalées comme étant de sous-classe txtrouge.
Pour attribuer une sous-classe à une balise on utilise l'attribut class="xxx"
C'est le point "." qui signale une sous-classe dans la feuille de style, cependant, il n'est pas utilisé dans l'attribut class.
| Déclaration | Utilisation |
|---|---|
p.txtrouge { color:red; } |
<p>texte normal </p> <p class="txtrouge">texte rouge</p> |
Le sélecteur est une sous-classe indépendante
.txtrouge { color:red; }
Les sous-classes sont utilisables de façon indépendante d'une balise spécifique. Il est alors possible de les utiliser sur toutes les balises (si celles-ci acceptent le style).
| Déclaration | Utilisation |
|---|---|
.txtrouge { color:red; } |
<h1 class="txtrouge">titre rouge</h1> <p class="txtrouge">texte rouge</p> |
Le sélecteur est un identificateur
#txtrouge { color:red; }
Les identificateurs s'utilisent avec l'attribut id="xxx" et n'apportent pas grand-chose par rapport aux sous-classes indépendantes. En effet, dans la spécification HTML, un identificateur doit être unique (on n'utilise pas plusieurs fois la même valeur pour l'attribut id). La raison, les langages de programmation objet.
Je vous conseille donc d'utiliser les sous-classes plutôt que les identificateurs.
| Déclaration | Utilisation |
|---|---|
#txtrouge { color:red; } |
<p id="txtrouge">texte rouge</p> |
Le sélecteur est un pseudo-éléments
a:link { color:red; }
Tous les éléments HTML ne peuvent pas être affectés par un style. Difficile, en effet, de donner une couleur au texte lors du survol du lien : il n'existe pas de balise correspondant à cet état. C'est pour cette raison que CSS a introduit le concept de pseudo-éléments. Il existe très peu de pseudo-éléments, les principaux sont :
- a:link = couleur d'un lien,
- a:visited = couleur d'un lien précédemment visité,
- a:active = couleur d'un lien au moment du clic,
- a:hover = couleur d'un lien au survol,
| Déclaration | Utilisation |
|---|---|
a:link { color:red; }
a:visited { color:blue; }
a:hover { color:red; }
a:active { color:blue; }
|
<a href="www.toto.fr">Lien</a> |
Combiner des sélecteurs
Il est possible de combiner les sélecteurs entre-eux.
| Déclaration | Utilisation |
|---|---|
p { color: red; }
p b.txtbleu{ color: blue; }
p b{ color: green; }
|
<p>texte normal <b class="txtbleu"> texte rouge et gras </b> texte normal</p> <p>texte normal <b> texte rouge et gras </b> texte normal</p> |
De nombreuses combinaisons sont possibles, mais de préférence, restez simple....
BALISES <span> <div>
Ces deux balises permettent de sélectionner une section d'un document HTML, notamment pour lui appliquer un style CSS.
Généralement on utilise <span> pour une petite sélection (à l'intérieur d'un paragraphe, par exemple), tandis qu'on utilise <div> pour de plus importantes sélections (regroupant, par exemple, plusieurs paragraphes).
La balise <div> couplée au CSS permet aussi de simuler des "calques".
| Code source | Affichage |
|---|---|
<div class="testdiv"> |
blablabla patati patata blabla patati patata bla patati patata blabla patati patata blabla patati patata bla patati patata blablabla patati patata blablabla pati pata blabla patati patata blabla patati patati patata bla patati patata blabla patati patata blabla patati patata bla patati patata blablabla patati patata blablabla pati pata |
Les propriétés
Voici une petite liste des différentes propriétés possibles (il en existe beaucoup d'autres) :
| Type | Propriété | Valeur | Description |
|---|---|---|---|
| Police | font-family | Police précise (Arial, Times, Verdana ...) Famille (serif, fantasy, monospace) |
Définit un nom de police ou une famille |
| font-style | normal, italic, oblic | Définit le style d'écriture | |
| font-weight | - normal, bold, light, bolder, lighter - valeur numérique |
Définit l'épaisseur de la police | |
| font-size | xx-small, x-small, small, medium, large, x-large, xx-large taille en points (pt), cm, % |
Définit la taille de la police | |
| font-variant | normale, small-caps | Définit une variante | |
| font | {font: bold italic} | Raccourci permettant de mettre toutes les propriétés | |
| Style | text-align | left, center, right | Définit l'alignement du texte |
| text-indent | en pouces (in), en cm, ou en % | Définit un retrait | |
| text-decoration | blink, underline, line-through, overline ou none (clignotant, souligné, barré, surligné ou aucune) | Définit une décoration | |
| text-transform | uppercase, lowercase, capitalize (majuscule, minuscule, première lettre en minuscules) | Définit la casse du texte | |
| color | "#RRGGBB" | Définit la couleur du texte | |
| word-spacing | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Définit l'espace entre les mots | |
| line-height | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Définit l'interligne | |
| width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Définit la longueur d'un élément de texte ou d'une image | |
| height | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Définit la hauteur d'un élément de texte ou d'une image | |
| white-space | normal, pre, nowrap | Espacement ou blanc | |
| Arrière-plans | background-color | "#RRGGBB" | Définit la couleur du fond |
| background-image | URL | Définit l'image d'arrière-plan | |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | Définit la façon de répéter l'arrière-plan | |
| background-attachment | scroll, fixed | Spécifie si l'image reste fixe avec les déplacements de l'écran | |
| background-position | - top, center, bottom, left, center ou right - En points (pt), pouces (in), en cm, en pixels (px), ou en % |
Position de l'image par rapport au coin supérieur gauche | |
| background | {background: test.jpg fixed repeat} | Raccourci pour les propriétés d'arrière-plan | |
| Marges | margin-top | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Valeur de la marge supérieure |
| margin-right | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Valeur de la marge de droite | |
| margin-bottom | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Valeur de la marge inférieure | |
| margin-left | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Valeur de la marge de gauche | |
| margin | Raccourci pour les propriétés de marge | ||
| Bordures | border-top-width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Epaisseur du bord supérieur |
| border-right-width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Epaisseur du bord droit | |
| border-bottom-width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Epaisseur du bord inférieur | |
| border-left-width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Epaisseur du bord de gauche | |
| border-width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Raccourci vers les propriétés d'épaisseur de trait | |
| border-color | "#RRGGBB" | Couleur de la bordure | |
| border | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Raccourci vers les propriétés de bordure | |
| padding-top | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Ecartement entre l'élément et le bord supérieur | |
| padding-right | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Ecartement entre l'élément et le bord droit | |
| padding-bottom | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Ecartement entre l'élément et le bord inférieur | |
| padding-left | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Ecartement entre l'élément et le bord gauche | |
| padding | Raccourci vers les propriétés d'écartement | ||
| Listes | list-style-type | disc, circle ou square | Type de puces et de numérotation |
| list-style-image | URL | Permet de remplacer les puces par une image | |
| list-style-position | inside ou outside | Spécifie si les puces sont à l'intérieur ou à l'extérieur du texte | |
| list-style | Raccourci vers les propriétés de liste |
source : commentcamarche.net
Un exemple : allez voir la feuille de style utilisée par cette page.
V4 © 2015/2017
francois -point- duarte -arobase- gmail -point- com