ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  FIN DE PAGE |  INDEX

Les feuilles de styles Valid HTML 4.01 Transitional



Introduction:

 
Avant l'adoption des CSS ( Cascading style sheet, feuille de style en "cascade"), le HTML ne permettait qu'un contrôle grossier du style d'une page.
Les feuilles de styles remédient à cette insuffisance :
EN PRINCIPE, LES FEUILLES DE STYLE PERMETTENT DE CONTROLER L'ASPECT DE TOUT CE QUE LE HTML PERMET D'AFFICHER.
 
Le W3C a défini un standard adopté, à la fois, par Microsoft et Netscape.  Malgré cela, il reste certains problèmes ( nous les découvrirons au fur et à mesure de la présentation des attributs de style ).
 

Principe des feuilles de styles :

Il existe trois méthodes d'utilisation des feuilles de style :

1 - Feuilles de styles internes (locales) avec emploi de l'attribut STYLE

Dans ce cas, on déclare le style directement à l'intérieur d'une balise HTML existante.
 
<P style="font : 14pt arial">  Ce texte est en arial 14 points</P>
<SPAN style="color: red">  Ce texte est rouge </SPAN>
 
rendu ainsi :

Ce texte est en arial 14 points

Ce texte est rouge
 

2 - Feuiles de styles incorporées avec emploi de la balise <STYLE>

Dans ce cas, la déclaration des styles se fait entre les balises <STYLE> ... </STYLE> que l'on place entre les balises <HEAD>... </HEAD> ou encore, de manière plus générale, entre les balises <HTML> et <BODY>. La mise en page de ce document repose, en partie, sur une feuille de style incorporée( voir ci-dessous ).

3 - Feuilles de styles externes ( fichiers *.CSS) avec emploi de la balise <LINK>

Dans ce cas, on utilise un fichier externe (*.CSS) qui stocke la feuille de style principale. La syntaxe est la même que pour une feuille de style incorporée. Il suffira d'attacher ce fichier ( à l'aide de la balise <LINK> ) à tous les documents qui auront besoin des styles qu'il contient.
 
<LINK REL="STYLESHEET" HREF="bqstyle.css" TYPE="text/css">
 

CSS ou styles en cascade :

Le terme cascade fait référence au fait que plusieurs styles peuvent être présents dans une même page HTML, et surtout au fait que le navigateur va respecter un ordre ( en cascade ) pour interpréter les informations de style.
 
Si les trois sortes de styles sont présents, le navigateur interprètera

Glossaire :

Terminologie
CSS
Cascading Style Sheet : feuilles de styles en cascade
CSS1
Cascading Style Sheet Level 1 : spécification des CSS de premier niveau (W3C)
attributs
Ils jouent un rôle important avec les feuilles de style.
On distinguera, suivant leur niveau:
  • les attributs de l'élément STYLE : type, media, title
  • les attributs associés aux éléments HTML : style, id, class
déclaration
énoncé de propriétés typographiques ou de mise en page avec des valeurs associées.
exemple :
BODY  {background-color: beige}
.grostitre {font: 24pt impact,arial,sans serif;color: maroon; text-align: center}
H1  {color: blue}
H1 EM {color: red}
DIV P  {font: small garamond; color: orange}
.red H1 {color: red}
DIV.sidenote H1 {font-size: large; color: gray}
#x78y CODE {background: blue}
document
Document HTML
élément
Elément HTML
héritage
Possibilité de transmettre des propriétés de style d'un élément (parent) à un autre élément (enfant)
priorité
Elle définit les règles de préséances entre différentes déclarations de styles susceptibles d'entrer en conflit.
Ces règles sont codifiées et intégrées au navigateur.
propriété

Paramètre de style auquel est associé une ou plusieurs valeurs :
{color: red} constitue une propriété

pseudo-élément
Conçu en dehors du langage, il permet des effets typographiques particuliers.
exemple : première ligne d'un élément, première lettre d'une phrase (lettrine), etc...
classe
Collection de propriétés attachées à un  élément HTML et à laquelle on confère un nom.
exemples :
.maFonte1 { font-family: Times New Roman, lucida Handwriting, cursive; font-size:16pt;font-style:normal; color: maroon }
pseudo-classe
Elle permet la prise en compte d'informations externes au document et au langage HTML
règle
Une rège de style est composée d'un sélecteur ( généralement un élément HTML comme H1, P, EM, DIV, etc.. ) auquel est rattaché un ensemble de propriétés. L'énoncé d'une ou plusieurs règles constituent une déclaration
exemple :
H1 { color: burlywood; font-family: Verdana; font-size: 36pt; font-style: italic; text-align: center}
sélecteur
Identifiant de l'élément auquel s'applique un ensemble de règles.
Un identifiant peut être :
  • simple
    • H1    {color: blue}
  • contextuel ou multiple
    • DIV P   {color: red}
    • .reddish H1    {color: red}
    • DIV.sidenote H1    {font-size: large}
feuille de style
Collection de règles déclarées d'une certaine manière avec une syntaxe particulière.
tag / marqueur
Tag est souvent utilisé pour désigner un élément HTML (balise). Il existe cependant une légère nuance entre "tag" et "élément" :
un élément est généralement désigné sans ses marqueurs : DIV, IMG, H1
un tag est un élément présenté avec ses marqueurs : <DIV>... </DIV>
style
Un style est un ensemble de propriétés typographiques ou de mise en page attachées à un document HTML, à une section de document, à un élément HTML.
Un style se définit sous forme d'une ou plusieurs règles ( déclaration).
Une règle se compose des éléments suivants :
un élément HTML auquel la règle se rapporte,
une énumération de propriétés attachées à l'élément.
exemple :
H1 { color: burlywood; font-family: Verdana; font-size: 36pt; font-style: italic; text-align: center}
canvas
Portion utile et active de l'écran
groupe
 Afin de réduire la taille, d'une feuille de style, il est possible de grouper :
  • les sélecteurs en une liste séparée par des virgules
    • H1, H2, H3    {font-family: helvetica}
  • les règles
    • H1    {font : bold 12pt/14pt helvetica}
élément substituable
Notion qui fait la distinction entre ce que l'élément peut contenir et le contenu lui-même.
Lorsque le navigateur interprète un élément substituable, il commence par dessiner un cadre aux dimensions spécifiés, puis dans un deuxième temps il substitue à ce cadre le contenu dont la source (URL) est spécifié.
exemples:
IMG, TEXTAREA, INPUT, SELECT, OBJECT

Pages exemples :

Cliquer sur les cases correspondantes
             

ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  DEBUT DE PAGE |  INDEX