<< Retour au sommaire

 

HTML 5, Style CSS, la feuille de style

 

 

Table des matières

1.      Présentation du CSS ;

2.      La feuille de style ;

3.      La définition de styles dans l’en-tête de la page ;

4.      Du CSS directement dans une balise ;

5.      Règles du CSS

5.1  La priorité ;

5.2  Définir plusieurs balises simultanément ;

5.3  Définir une balise imbriquée ;

6.      Les principales propriétés du CSS 3

6.1  Pour le texte ;

6.2  L’alignement et les marges ;

6.3  Le fond de l’écran ;

6.4  Les bordures ;

6.5  L’ombre ;

6.6  Le positionnement ;

6.7  Les listes ;

6.8  Les autres propriétés CSS ;

6.9  Les pseudo-formats ;

7        ;

8        Les balises universelles <span> et <div> ;

9        Des exemples

9.1  Un exemple pour la propriété background-color ;

9.2  Un exemple pour la propriété background-image ;

9.3  Un exemple de définition CSS dans une feuille de style ;

9.4  Un exemple de définition CSS dans l’en-tête.

 

 

 

Présentation du CSS

 

Que signifie CSS ?

« Cascading Style Sheet », en français, « feuilles de style en cascade ».

 

Le CSS 3 est un système de codage qui permet de définir des styles, de mettre en forme vos pages WEB, et il répond à une syntaxe bien précise.

Il est donné la possibilité d’inscrire le code CSS dans différentes parties de votre site, exprimer par des instructions « propriétés/valeurs » pour déterminer l’apparence de vos pages, le texte, l’alignement, les bordures, les images etc.

Où peut-on introduire nos instructions CSS ?

  1. Dans un fichier externe dédié à cet usage et indépendant de vos pages, c’est-à-dire dans une feuille de style avec l’extension .css :

Dans ce cas, la portée de la définition des styles n’est pas restreinte, toute page du net peut inclure cette définition par l’intermédiaire de la balise <link>.

  1. Dans l’en-tête d’une page par l’intermédiaire de la balise <style> :

Dans ce cas, la portée de la définition CSS est restreinte à cette page.

  1. Directement dans une balise par l’intermédiaire de l’attribut <style> :

Dans ce cas, seule la balise concernée est affectée par la définition.

 

La feuille de style

 

Dans ce chapitre, vous allez découvrir l’élaboration de styles dans un fichier externe, la « feuille de style ».

La feuille de styles est un fichier texte dont l’extension doit être .css, il vous suffit de créer un document « txt » et de procéder au changement de son extension.

Dans ce fichier, vous définissez les propriétés de vos balises, et dans les pages à partir desquelles vous désirez inclure ces styles, vous recourez à la balise <link>.

 

La syntaxe :

<link rel="stylesheet" href="MonCSS.css" />

 

La description :

A titre d’exemple, voici l’en-tête d’une page qui inclut la feuille de styles « MonStyle.css » :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Trucs et astuces</title>

<link rel="stylesheet" href="http://www.trucs-et-astuces.com/MonCSS.css" />

</head>

<body>

 

Quant à la feuille de styles, voici la manière de noter vos définitions…

 

La syntaxe :

balise1

{

propriété1: valeur;

propriété2: valeur;

propriété3: valeur

}

balise2

{

propriété1: valeur;

propriété2: valeur;

propriété3: valeur

}

 

La description :

p

{

color: blue;

font-size: 12px

}

Ici nous avons définit la balise « p » avec les propriétés « color » pour la couleur du texte, et « font-size » pour la taille du caractère, cette dernière ne se clôturant pas par un « point virgule » dans la mesure où elle est la dernière propriété du bloc. Dans cette structure particulière, « p » est appelé le « sélecteur ».

Maintenant, on définit le style pour « p » et « h1 » :

p{

color: blue;

font-family: verdana;

font-size: 12px

}

h1

{

color: green;

font-family: arial;

font-size: 18px

}

 

Pour vous aider à améliorer la lisibilité de votre fichier CSS, vous avez la possibilité de saisir du texte qui ne sera pas pris en compte, on appelle cela du « commentaire ».

Le commentaire doit être placé entre /* et */

/* ceci est du commentaire */

En reprenant l’exemple précédent…

/* Définition de la balise paragraphe */

p{

color: blue; /* couleur bleue */

font-family: verdana; /* type de la police verdana */

font-size: 12px /* taille de la police 12 pixels */

}

/* Définition de la balise titre de niveau 1 */

h1

{

color: green; /* couleur vert */

font-family: arial; /* type de la police arial */

font-size: 18px /* taille de la police 18 pixels */

}

 


La définition de styles dans l’en-tête de la page

 

Si vous souhaitez définir les styles directement dans une page HTML, vous devez employer la balise <style></style> avant la fermeture du bloc <head>.

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title> mon titre </title>

<style>

/* Définition de la balise paragraphe */

p{

color: blue; /* couleur bleue */

font-family: verdana; /* type de la police verdana */

font-size: 12px /* taille de la police 12 pixels */

}

/* Définition de la balise titre de niveau 1 */

h1

{

color: green; /* couleur vert */

font-family: arial; /* type de la police arial */

font-size: 18px /* taille de la police 18 pixels */

}

</style>

</head>

<body>

<!-- la page ici -->

</body>

</html>

 


Du CSS directement dans une balise

 

Et oui, grâce à l’attribut « style », il vous est possible d’improviser du CSS. Bien sûr, ce dernier n’affectera

Que la balise le contenant, les autres balises de même type de la page n’hériteront en rien de cette définition !

Dans l’exemple suivant, seul le premier paragraphe sera affecté par l’emploi de l’attribut « style » :

<p style="color: blue; font-family: times new roman; font-size: 14px">

Je vous souhaite la bienvenue sur mon site !

</p>

<p>

Je vous remercie pour votre visite...

</p>

Note :

·         Tout comme la syntaxe vue dans les chapitres précédents pour une feuille de styles ou dans l’en-tête de la page, la dernière valeur de la définition de la balise ne se termine pas par un « point virgule ».

 


 

Règles du CSS

 

La priorité

 

Résumé :

Le style d’une balise peut être défini, soit :

1.       Directement dans la balise par l’intermédiaire de l’attribut « style » ;

2.       Dans l’en-tête de la page par l’intermédiaire de la balise <style> ;

3.       Dans un fichier externe par l’intermédiaire d’une feuille de styles.

 

Note :

Dès lors qu’une balise hérite de plusieurs définitions, dans une feuille de styles, dans l’en-tête de la page ou directement dans la balise, la priorité est donnée à la définition la plus locale.

Voici donc l’ordre de priorité :

  1. L’attribut « style », directement placé dans la balise ;
  2. La balise <style>, placée dans l’en-tête de la page ;
  3. La feuille de styles externe.

 

Définir plusieurs balises simultanément

 

Lorsque vous devez appliquer des propriétés identiques sur plusieurs balises, vous avez la possibilité de traiter les balises en une seule fois.

Par exemple, pour définir la taille du caractère simultanément pour les balises <h3> <h4> et <h5> :

h3, h4, h5

{

font-size: 140%

}

 

·         Comme vous l’avez constaté, les différentes balises réunies dans le même sélecteur sont séparées par une « virgule ».

 

Définir une balise imbriquée

 

Vous avez la possibilité de définir le style d’une balise pour un contexte d’imbrication donné.

A titre d’exemple, voici la définition de la balise <p>, mais seuls les paragraphes imbriqués dans le bloc <header> seront concernés !

header p

{

text-align: center; /* Centrer le texte dans le bloc */

font-family: arial; /* Police de type arial */

font-size: 18px /* Taille de police absolue, 18 pixels */

}


 

Les principales propriétés du CSS 3

 

Pour le texte

 

Propriétés

Valeurs

Color

Couleur de la police de caractères :

Blue (bleu), red (rouge), green (vert), yellow (jaune), white (blanc), silver (argenté), gray (gris), black (noir), maroon (maron), olive (vert olive), navy (bleu marine), fuchsia (rose fuchsia), purple (pourpre), lime (citron vert).

 

font-size

Taille de la police de caractères :

La notation absolue, utilise le pixel comme unité :

font-size: 12px

La notation relative, utilise le « pourcentage » comme unité, par exemple, pour une taille 20% supérieures à la taille standard du navigateur :

font-size: 120%

font-family

Permet de spécifier la police désirée.

font-family: arial;

Voici la liste des polices les plus courantes :

arial, comic sans ms, courier new, georgia, times new roman,trebuched ms et verdana.

Il vous est possible de spécifier plusieurs polices, ainsi, si la première police n’est pas compatible avec le navigateur, la seconde sera vérifiée, et si cette dernière n’est pas compatible, la troisième sera vérifiée etc.

font-family: times new roman, arial, sans-serif;

font-style

Permet de pencher le texte.

Pour mettre en italique :

font-style: italic;

Pour mettre en oblique :

font-style: oblique;

D’ailleurs, vous devez savoir que certains navigateurs peuvent avoir recours à un autre style que « italique » pour présenter le texte que vous placez dans la balise <em>. Par conséquent, si vous désirez réellement que <em> soit une balise de mise en italique, il conviendra de la définir…

em

{

font-style: italic

}

font-weight

Met le texte en gras, doit être employé avec la valeur « bold » :

font-weight: bold;

D’ailleurs, vous devez savoir que certains navigateurs peuvent avoir recours à un autre style que « gras » pour présenter le texte que vous placez dans la balise <strong>. Par conséquent, si vous désirez réellement que <strong> soit une balise de mise en italique, il conviendra de la définir…

strong

{

font-weight: bold

}

text-decoration

Permet de décorer le texte, les valeurs que peut prendre cette propriétés sont :

underline pour souligné ;

line-through pour barré ;

overline pour au-dessus ;

blin pour faire clignoter le texte, ne fonctionne pas avec INTERNET EXPLORER.

text-indent

Permet de réaliser une indentation, un alinéa à exprimer en pixels, par exemple, pour une indentation de 30 pixels pour la première ligne du paragraphe :

p

{

text-indent: 30px

}

 

L’alignement et les marges

 

Propriétés

Valeurs

text-align

Permet de spécifier l’alignement et ne peut être employée que sur des balises de type bloc. Cette propriété peut recevoir les valeurs suivantes :

left (gauche), center (centrer), right (droite) et justify (justifier).

margin-top

Permet de spécifier en pixels la marge extérieure haute d’un bloc.

margin-right

Permet de spécifier en pixels la marge extérieure droite d’un bloc.

margin-bottom

Permet de spécifier en pixels la marge extérieure basse d’un bloc.

margin-left

Permet de spécifier en pixels la marge extérieure gauche d’un bloc.

Margin

Super propriété qui permet de spécifier les 4 marges extérieures d’un bloc et dans l’ordre suivant : haute, droite, basse et gauche, par exemple :

p

{

margin: 20px 12px 20px 12px

}

padding-top

Permet de définir, en pixels, la marge intérieure haute d’un bloc.

padding-right

Permet de définir, en pixels, la marge intérieure droite d’un bloc.

padding-bottom

Permet de définir, en pixels, la marge intérieure basse d’un bloc.

padding-left

Permet de définir, en pixels, la marge intérieure gauche d’un bloc.

Padding

Super propriété permettant de définir les 4 marges intérieures d’un bloc dans l’ordre suivant : haut, droit, bas et gauche, par exemple :

p

{

padding: 15px 10px 15px 10px

}

 

Le fond de l’écran

 

Propriétés

Valeurs

background-color

Couleur du fond de l’écran :

Blue (bleu), red (rouge), green (vert), yellow (jaune), white (blanc), silver (argenté), gray (gris), black (noir), maroon (maron), olive (vert olive), navy (bleu marine), fuchsia (rose fuchsia), purple (pourpre), lime (citron vert).

background-image

Permet d’afficher une image en fond d’écran !

La syntaxe :

background-image: url("NomDeL'image");

Propriétés complémentaires :

background-attachment, permet de définir le comportement de l'image.

background-attachment: fixed; /* L'image est fixe, elle ne défile pas avec le contenu de la page */

background-attachment: scroll; /* L'image défile avec le contenu de la page */

Par défaut, l’image est répétée en mosaïque, mais il vous est donné la possibilité d’intervenir sur cette particularité, et ce, par le biais de la propriété background-repeat :

background-repeat: no-repeat; /* L'image n'est pas répétée */

background-repeat: repeat-x; /* L'image est répétée sur la première ligne uniquement */

background-repeat: repeat-y; /* L'image est répétée sur la première colonne uniquement */

Avec la propriété background-position, vous pouvez choisir la position de l’image dans le fond de l’écran, cependant, l’image ne doit pas être répétée, d’où la nécessité d’employer background-position en association avec la propriété background-repeat.

background-repeat: no-repeat;

background-position: 30px 90 px /* Le coin supérieur de l'image sera positionné à 30 pixels de la bordure gauche de la fenêtre ou du paragraphe, et à 90 pixels de la bordure supérieure de la fenêtre ou du paragraphe */

Toutefois, 4 mots clefs permettent de définir si la position est spécifiée depuis la bordure gauche, left, la bordure supérieure, top, la bordure droite, right, et la bordure inférieure, bottom.

Voici la syntaxe pour positionner l’image en haut à droite :

background-position: top right;

Ou bien, pour la positionner à 15 pixels du haut et 30 pixels de la droite :

background-position: top 15px right 30px;

border-radius vous permet de définir des angles arrondis.

Les angles sont spécifiés en « pixels », dans l’ordre suivant :

Haut gauche, haut droite, bas droite et bas gauche, par exemple :

border-radius: 0px 0px 20px 20px;

Background

Il s’agit d’une super propriété, elle permet de combiner toutes les propriétés background-image, background-repeat et background-position.

Par exemple :

background: url("MonImage") no-repeat top 15px right 90px;

 


 

Les bordures

 

Propriétés

Valeurs

border-width

Permet de définir l’épaisseur de la bordure, la valeur doit être exprimée en « pixels » :

border-width: 3px;

border-color

Définit la couleur de la bordure :

border-color: grey;

border-style

Permet de définir un style de bordure, « none », (pas de bordure), « solid » (un simple trait), « dotter » (pointillés), « dasher » (des tirets), « double » (bordure double), « groove «  (en relief), ridge (second effet de relief), « inset » (effet 3D enfoncé), « et outset » (effet 3D surélevé). Par exemple :

border-style: outset;

border-radius

border-radius vous permet de définir des angles arrondis.

Les angles sont spécifiés en « pixels », dans l’ordre suivant :

Haut gauche, haut droite, bas droite et bas gauche, par exemple :

border-radius: 0px 0px 20px 20px;

Border

Voici ici la super propriété qui permet de regrouper les 3 propriétés border-width, border-color et border-style. Par exemple :

border: 3px grey outset;

Remarque :

Vous avez également la possibilité de définir individuellement les 4 bordures, et ce, par l’intermédiaire des 4 propriétés suivantes :

Border-top pour la bordure supérieure, border-right pour la bordure de droite, border-bottom pour la bordure inférieure, et border-left pour la bordure de gauche. Par exemple :

border-top: 2px red groove;

Et si vous désirez définir individuellement les 3 propriétés, pas de problème !

Pour la bordure supérieure :

border-top-width, border-top-color et border-top-style ;

Pour la bordure de droite :

border-right-width, border-right-color et border-right-style ;

Pour la bordure inférieure :

border-bottom-width, border-bottom-color et border-bottom-style ;

Et pour la bordure de gauche :

border-left-width, border-left-color et border-left-style.

           


 

L’ombre

 

Propriétés

Valeurs

box-shadow

Permet de définir une ombre pour le contour d’un bloc et doit prendre au minimum 4 valeurs :

Le décalage horizontal de l’ombre, le décalage vertical, l’adoucissement du dégradé, et la couleur de l’ombre, par exemple :

p

{

box-shadow: 6px 6px 4px black

}

Note :

Pour l’effet de l’ombre, vous avez la possibilité d’employer les mêmes valeurs que la bordure, par exemple :

box-shadow: 6px 6px 4px black inset

text-shadow

Permet de définir une ombre pour le  texte et doit prendre au minimum 4 valeurs :

Le décalage horizontal de l’ombre, le décalage vertical, l’adoucissement du dégradé, et la couleur de l’ombre, par exemple :

p

{

text-shadow: 2px 2px 2px black

}

Note :

Pour l’effet de l’ombre, vous avez la possibilité d’employer les mêmes valeurs que la bordure, par exemple :

text-shadow: 2px 2px 2px black outset

 

Le positionnement

 

Propriétés

Valeurs

position

Détermine la position d’un élément dans la page et peut recevoir les valeurs suivantes :

Relative, la position de l’élément sera calculée depuis le bloc précédent ;

Absolute, la position sera calculée depuis les bordures de la fenêtre.

Top

Permet de spécifier la position d’un élément en pixels depuis le haut.

Right

Permet de spécifier la position d’un élément en pixels depuis la droite.

bottom

Permet de spécifier la position d’un élément en pixels depuis le bas.

left

Permet de spécifier la position d’un élément en pixels depuis la gauche.

overflow

Définit le comportement d’un bloc dans lequel le contenu dépasse les dimensions fixées dans le CSS, les valeurs pouvant être :

auto, un ascenseur est affiché si nécessaire ;

scroll, l'ascenseur est affiché, grisé si le contenu ne dépasse pas le bloc ;

Visible, le contenu est entièrement affiché, le bloc quant à lui est étiré.

 


 

Les listes

 

Propriétés

Valeurs

list-style-type

Permet de définir le style de la liste et peut recevoir les valeurs suivantes :

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, et none pour aucun style.

list-style-position

Retrait de la liste par rapport à la marge ou la bordure gauche :

Outside, la liste débute à la bordure gauche ;

Inside, retrait de la  liste dans le bloc.

list-style-image

Permet de personnaliser la puce, par exemple :

list-style-image: url("SuperPuce.png");

list-style

Super propriété permettant de combiner les 3 propriétés list-style-type, list-style-position et list-style-image, par exemple :

list-style: url("SuperPuce.png") inside none;

 

Les tableaux

 

Propriétés

Valeurs

border-collapse

Aspect des cellules, peut recevoir 2 valeurs :

collapse, les bordures communes aux cellules voisinnes sont fusionnées ;

separate, les bordures aux cellules voisinnes ne sont pas fusionnées.

empty-cells

Permet d’indiquer si les cellules vides doivent être affichées ou non, les 2 valeurs sont :

Hide, les cellules vides ne sont pas affichées ;

Show, les cellules vides sont affichées.

caption-side

Position du titre du tableau :

Top, le titre est placé au-dessus du tableau ;

Bottom, le titre est placé en-dessous.

 


 

Les autres propriétés CSS

 

Propriétés

Valeurs

display

Propriété qui modifie le type naturel de la balise, les 2 valeurs possibles sont :

Block, pour convertir une balise de type « inline » en balise de type « block » ;

Inline, pour convertir une balise de type « block » en balise de type « inline ».

visibility

Permet de rendre un élément visible ou non. Les 2 valeurs disponibles sont :

Visible, pour visible ;

Hidden, pour invisible.

cursor

Permet de définir le style du pointeur de la souris, les différents styles sont :

crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto...

 

Les pseudo-formats

 

Qu’est-ce que c’est ?

·        Le pseudo-format permet de modifier le style d’un élément selon son état.

En effet, à titre d’exemple, un lien hypertexte ne peut-il pas basculer entre plusieurs états ? Bien sûr que si ! Un lien peut :

1.      Être non visité ;

2.      Être visité ;

3.      Être survolé par le pointeur de la souris.

Voici une liste non exhaustive des pseudo-formats :

Propriétés

Valeurs

a:hover

Lien survolé.

a:active

Lorsque le lien est activé.

a:focus

Lorsque le lien est sélectionné.

a:visited

Lorsque le lien a déjà été visité.

 


 

Les classes

 

Une classe est un style que l’on définit et que l’on doit nommer.

Ultérieurement, on peut appliquer la classe depuis son nom dans une balise, et ce, par l’intermédiaire de l’attribut « class ».

Dans la définition CSS, le nom de la classe doit être impérativement précédé d’un point.

Voici un exemple, ici, nous allons définir la classe « important » :

Le code CSS :

.important

{

font-weight: bold; /* Mettre en gras */

color: red; /* Couleur de texte rouge */

font-color: yellow /* font d'écran jaune */

}

 

Désormais, vous pourrez utiliser la classe !

<p classe="important">

Je suis absent tous les vendredi !

</p>

 

La classe « important » peut d’ailleurs être employée de façon illimitée dans une même page…

Il existe cependant une manière très particulière de définir et d’appeler une classe qui ne doit être utilisée qu’une seule fois dans une même page.

Dans la définition CSS, on remplace le « point » par un « dièse », et dans la page, on applique plus la classe depuis l’attribut « class », mais « id ».

 


 

Les balises universelles <span> et <div>

 

Ces 2 balises ne produisent aucun effet, elles sont utilisées uniquement histoire de pouvoir exécuter un ou plusieurs attributs.

Par exemple :

Le code CSS :

.important

{

font-weight: bold; /* Mettre en gras */

color: red; /* Couleur de texte rouge */

font-color: yellow /* font d'écran jaune */

}

 

La page HTML :

<p>

Vous devez impérativement vous rendre à <span class="important">PARIS</span> avant la fin de la semaine !

</p>

 

La balise <span> est de type « inline », et la balise <div> de type super-block.

Voici un exemple d’utilisation de la balise <div> :

Le code CSS :

.cadre /* Définition de la classe cadre */

{

border: 3px grey outset

}

 

Le code de la page HTML :

<div class="cadre">

<p>Bonjour !

</p>

<p align="center">

Nous vous souhaitons la bienvenue sur ce site.

</p>

<p align="center">

Affaire à suivre...

</p>

</div>

 

 


 

Des exemples

 

Un exemple pour la propriété background-color

 

Voici un exemple, ici, des couleurs ont tété définies dans la balise <style> de l’en-tête de la page.

·        Les titres de niveaux 1 et 2 sont en rouge ;

·        Le texte des paragraphes est en bleu marine ;

·        Le fond de l’écran est en jaune.

 

Tester la page >>

 

Le code :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Un peu de couleur</title>

<bgsound src="../../audio/exemple.mp3" />

<!-- Définition du style CSS -->

<style>

body

{

background-color: yellow /* Définit le fond de l'écran en jaune */

}

h1, h2

{

color: red /* Définit les titres de niveaux 1 et 2 en rouge */

}

p

{

color: navy /* Définit les texte des paragraphes en bleu marine */

}

</style>

</head>

<body>

<h1>L'arc-en-ciel</h1>

<hr />

<p>

nom masculin, arc lumineux coloré parfois visible dans le ciel, à l'opposé du soleil, pendant une averse.

<br />

adjectif invariable, qui présente les couleurs de l'arc-en-ciel ; multicolore. Un foulard arc-en-ciel.

</p>

<h2>Complément encyclopédique</h2>

<p>

Observable à l'opposé du soleil, l'arc-en-ciel présente toutes les couleurs du spectre de la lumière blanche du soleil, et résulte de la dispersion de cette

lumière par réfraction et réflexion dans les gouttelettes d'eau qui

se forment lorsqu'un nuage tombe en pluie. Une tradition ancienne, fondée sur la symbolique

des nombres, distinguait sept couleurs : rouge, orangé, jaune, vert, bleu, indigo, violet. Aujourd'hui, en optique, on ne prend plus en compte l'indigo

; il reste donc six couleurs conventionnelles.

</p>

</body>

</html>

 


 

Un exemple pour la propriété background-image

 

Dans cet exemple, l’image « note-de-musique.jpg » est affichée en fond décran et fixée avec la propriété background-attachment.

 

Tester la page >>

 

Le code :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Un super jukebox</title>

<!-- Définition du style CSS -->

<style>

body

{

background-image: url("note-de-musique.jpg"); /* Affiche l'image note-de-musique.jpg comme image de fond */

background-attachment: fixed /* L'image de fond ne défilera pas avec le contenu de la page */

}

</style>

</head>

<body>

<h2>Un peu de musique !</h2>

<p></p><p></p><p></p>

<!-- affichage du code permettant de lire le fichier "desert-wonderer.mp3" depuis le lecteur "dewplayer" -->

<p align="center">

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=desert-wonderer.mp3&amp;autostart=1" width="200" height="20"><param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf?mp3=desert-wonderer.mp3&amp;autostart=1" /></object>

</p>

<p></p><p></p><p></p>

<p><em>ça roule ?</em></p>

</body>

</html>

 


 

Un exemple de définition CSS dans une feuille de style :

Le code CSS dans le fichier MonStyle.css :

/* Définition de la balise <em> en italique */

em

{

font-style: italic

}

/* Définition de la balise <strong> en gras */

strong

{

font-weight: bold

}

/* Définition de la couleur du fond d'écran de la page entière */

body

{

background-color: grey /* applique le fond de l'écran en gris */

}

/* Définition du titre de niveau 1 */

h1

{

font-size: 18pt; /* taille 18 points */

color: lime; /* citron vert */

background-color: black; /* Définit le fond en noir */

border: 1px lime outset; /* définition de la bordure */

text-align: center /* Centrer le titre */

}

/* Définition du titre de niveau 2 */

h2

{

font-size: 14pt; /* taille 14 points */

color: green; /* vert */

font-style: oblique; /* Application du style oblique */

text-indent: 50px /* Retrait de texte vers la gauche */

}

/* Définition du paragraphe */

p

{

font-size: 100%; /* taille standard, environ 12 points */

color: blue; /* couleur bleue */

margin: 20px 12px 20px 12PX /* Définition des 4 marges intérieures */

}

/* Définition de la classe "en-tete" pour le formatage des titres de colonnes */

.en-tete

{

text-align: center; /* Centrer l'en-tête */

font-weight: bold; /* Style gras */

font-size: 150%; /* Grande police */

background-color: yellow /* Fond d'écran jaune */

}

/* Définition de l'élément dt pour la liste de type <dl> */

dt

{

font-weight: bold; /* Style gras */

font-size: 125%; /* Agrandissement de la police */

text-decoration: underline /* Souligné */

}

/* Définition de l'élément dd pour la liste de type <dl> */

dd

{

font-family: italic; /* Style italique */

text-indent: 25px /* Indentation de 25 pixels */

}

 

La page « index.html » :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>La feuille de style</title>

<bgsound src="../../../audio/exemple.mp3" />

<!-- Inclusion de la feuille de style MonCSS.css -->

<link rel="stylesheet" href="MonCSS.css" />

</head>

<body>

<h1>Le système solaire</h1>

<h2>Liste des planètes intérieures du système solaire</h2>

<table align="center">

<caption>

<strong><em>Par ordre croissant d'éloignement du soleil</em></strong>

</caption>

<tr><td class="en-tete">Planètes</td><td class="en-tete">Surface</td></tr>

<tr><td>Mercure</td><td>Atmosphère légère, surface composée essentiellement de roche</td></tr>

<tr><td>Vénus</td><td>Atmosphère épaisse, surface volcanique</td></tr>

<tr><td>La Terre</td><td>Atmosphère riche d'hoxygène, surface composée de 71% d'océans et de 29% de continents</td></tr>

<tr><td>Mars</td><td>Atmosphère légère, surface composée de roche et de poussières</td></tr>

</table>

<h2>La ceinture d'astéroïdes</h2>

<p>

Entre les planètes intérieures et extérieures du système solaire, évoluent des milliards d'astéroïdes de toutes tailles et de compositions variées dont l'origine remonte à quatre milliards-cinq cent-millions d'années, c'est-à-dire à l'origine de la naissance du système solaire.

</p>

<p align="center">

<img src="asteroide.jpg" alt="Un astéroïdes" />

</p>

<h2>Liste des planètes extérieures du système solaire</h2>

<p><em>Par ordre croissant d'éloignement du soleil</em></p>

<p>

<dl>

<dt>Jupiter</dt>

<dd>Océan d'hydrogène liquide</dd>

<dt>Saturne</dt>

<dd>Océan d'hydrogène liquide</dd>

<dt>Uranus</dt>

<dd>Glace de méthane</dd>

<dt>Neptune</dt>

<dd>Glace de méthane</dd>

</dl>

</p>

</body>

</html>

 

Tester la page >>

 


 

Un exemple de définition CSS dans l’en-tête

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Style CSS dans l'entête</title>

<bgsound src="../../../audio/exemple.mp3" />

<!-- Définition du style CSS dans l'entête -->

<style>

/* Définition de la balise <em> en italique */

em

{

font-style: italic

}

/* Définition de la balise <strong> en gras */

strong

{

font-weight: bold

}

/* Définition de la couleur du fond d'écran de la page entière */

body

{

background-color: grey /* applique le fond de l'écran en gris */

}

/* Définition du titre de niveau 1 */

h1

{

font-size: 18pt; /* taille 18 points */

color: lime; /* citron vert */

background-color: black; /* Définit le fond en noir */

border: 1px lime outset; /* définition de la bordure */

text-align: center /* Centrer le titre */

}

/* Définition du titre de niveau 2 */

h2

{

font-size: 14pt; /* taille 14 points */

color: green; /* vert */

font-style: oblique; /* Application du style oblique */

text-indent: 50px /* Retrait de texte vers la gauche */

}

/* Définition du paragraphe */

p

{

font-size: 100%; /* taille standard, environ 12 points */

color: blue; /* couleur bleue */

margin: 20px 12px 20px 12PX /* Définition des 4 marges intérieures */

}

/* Définition de la classe "en-tete" pour le formatage des titres de colonnes */

.en-tete

{

text-align: center; /* Centrer l'en-tête */

font-weight: bold; /* Style gras */

font-size: 150%; /* Grande police */

background-color: yellow /* Fond d'écran jaune */

}

/* Définition de l'élément dt pour la liste de type <dl> */

dt

{

font-weight: bold; /* Style gras */

font-size: 125%; /* Agrandissement de la police */

text-decoration: underline /* Souligné */

}

/* Définition de l'élément dd pour la liste de type <dl> */

dd

{

font-family: italic; /* Style italique */

text-indent: 25px /* Indentation de 25 pixels */

}

</style>

</head>

<body>

<h1>Le système solaire</h1>

<h2>Liste des planètes intérieures du système solaire</h2>

<table align="center">

<caption>

<strong><em>Par ordre croissant d'éloignement du soleil</em></strong>

</caption>

<tr><td class="en-tete">Planètes</td><td class="en-tete">Surface</td></tr>

<tr><td>Mercure</td><td>Atmosphère légère, surface composée essentiellement de roche</td></tr>

<tr><td>Vénus</td><td>Atmosphère épaisse, surface volcanique</td></tr>

<tr><td>La Terre</td><td>Atmosphère riche d'hoxygène, surface composée de 71% d'océans et de 29% de continents</td></tr>

<tr><td>Mars</td><td>Atmosphère légère, surface composée de roche et de poussières</td></tr>

</table>

<h2>La ceinture d'astéroïdes</h2>

<p>

Entre les planètes intérieures et extérieures du système solaire, évoluent des milliards d'astéroïdes de toutes tailles et de compositions variées dont l'origine remonte à quatre milliards-cinq cent-millions d'années, c'est-à-dire à l'origine de la naissance du système solaire.

</p>

<p align="center">

<img src="asteroide.jpg" alt="Un astéroïdes" />

</p>

<h2>Liste des planètes extérieures du système solaire</h2>

<p><em>Par ordre croissant d'éloignement du soleil</em></p>

<p>

<dl>

<dt>Jupiter</dt>

<dd>Océan d'hydrogène liquide</dd>

<dt>Saturne</dt>

<dd>Océan d'hydrogène liquide</dd>

<dt>Uranus</dt>

<dd>Glace de méthane</dd>

<dt>Neptune</dt>

<dd>Glace de méthane</dd>

</dl>

</p>

</body>

</html>

 

Tester la page >>

 

Philippe BOULANGER