ISN - CSS : Les fondamentaux

(1)

M. Lagrave

CSS

Pourquoi le CSS ? Utiliser le CSS Où placer le code ? Premiers styles Styles spécifiques Formater les textes Marge et bordure Le background Les listes Taille des éléments Positionnement Styles par état Conclusion Bluefish

ISN - CSS : Les fondamentaux

M. Lagrave

Lycée Beaussier

2012–2013

(2)

M. Lagrave

CSS

Sommaire

CSS

Pourquoi le CSS ? Utiliser le CSS Où placer le code ? Premiers styles Styles spécifiques Formater les textes Marge et bordure Le background Les listes

Taille des éléments Positionnement Styles par état Conclusion Bluefish

(3)

M. Lagrave

CSS

Qu’est-ce que le CSS ?

Le langage informatique CSS« Cascading Style Sheets » permet de créer des mises en page complexes pour vos sites Internet.

Couplé au langage HTML, le CSS vous permet de mettre en place des styles pour vos textes, vos photos, vos liens hypertextes, etc.

Les styles sont regroupés dans un fichier portant l’extension .css. Ce fichier, appelé « feuille de styles », peut-être importé sur chaque page de votre site,

permettant ainsi de gagner un temps considérable en cas de modification de la présentation.

(4)

M. Lagrave

CSS

Qu’est-ce que le CSS ?

Le langage informatique CSS« Cascading Style Sheets » permet de créer des mises en page complexes pour vos sites Internet.

Couplé au langage HTML, le CSS vous permet de mettre en place des styles pour vos textes, vos photos, vos liens hypertextes, etc.

Les styles sont regroupés dans un fichier portant l’extension .css. Ce fichier, appelé « feuille de styles », peut-être importé sur chaque page de votre site,

permettant ainsi de gagner un temps considérable en cas de modification de la présentation.

(5)

M. Lagrave

CSS

Pourquoi utiliser le CSS ?

Lorsque vous créez une feuille de styles, vous dissociez complètement la structure HTML (les balises) de la présentation de votre site internet.

Cela vous permet de réaliser des pages HTML plus simples (code source simplifié) mais surtout plus lisibles. L’utilisation d’une feuille de styles facilite la mise à jour de votre charte graphique, ce qui constitue le principal avantage du CSS.

(6)

M. Lagrave

CSS

Pourquoi utiliser le CSS ?

Lorsque vous créez une feuille de styles, vous dissociez complètement la structure HTML (les balises) de la présentation de votre site internet. Cela vous permet de réaliser des pages HTML plus simples (code source simplifié) mais surtout plus lisibles.

L’utilisation d’une feuille de styles facilite la mise à jour de votre charte graphique, ce qui constitue le principal avantage du CSS.

(7)

M. Lagrave

CSS

Pourquoi utiliser le CSS ?

Lorsque vous créez une feuille de styles, vous dissociez complètement la structure HTML (les balises) de la présentation de votre site internet. Cela vous permet de réaliser des pages HTML plus simples (code source simplifié) mais surtout plus lisibles. L’utilisation d’une feuille de styles facilite la mise à jour de votre charte graphique, ce qui constitue le principal avantage du CSS.

(8)

M. Lagrave

CSS

Pourquoi utiliser le CSS ?

Par exemple, imaginez que vous ayez dix titres de niveau 1 (balise <h1>) sur votre site internet ; par défaut, ces titres seront affichés en noir. Pour changer leur couleur, vous devriez modifier la balise<font>sur chacun d’eux.

En CSS, vous ferez la même chose en une seule ligne.

Même facilité pour changer la couleur puisqu’il suffit de modifier le code hexadécimal défini dans la propriété.

(9)

M. Lagrave

CSS

Pourquoi utiliser le CSS ?

Par exemple, imaginez que vous ayez dix titres de niveau 1 (balise <h1>) sur votre site internet ; par défaut, ces titres seront affichés en noir. Pour changer leur couleur, vous devriez modifier la balise<font>sur chacun d’eux.

En CSS, vous ferez la même chose en une seule ligne.

Même facilité pour changer la couleur puisqu’il suffit de modifier le code hexadécimal défini dans la propriété.

(10)

M. Lagrave

CSS

Comment utiliser le CSS ?

Le code CSS est très différent du langage HTML, ce qui vous oblige à maîtriser un second langage informatique.

La tâche pourrait paraître fastidieuse et pousser certains à préférer les balises HTML pour mettre en page vos contenus. Cependant, je vous conseille fortement de vous mettre au CSS car les possibilités de mise en page qu’il vous procurera sont infinies.

voir CSS zen garden

(11)

M. Lagrave

CSS

Comment utiliser le CSS ?

Le code CSS est très différent du langage HTML, ce qui vous oblige à maîtriser un second langage informatique.

La tâche pourrait paraître fastidieuse et pousser certains à préférer les balises HTML pour mettre en page vos contenus. Cependant, je vous conseille fortement de vous mettre au CSS car les possibilités de mise en page qu’il vous procurera sont infinies.

voir CSS zen garden

(12)

M. Lagrave

CSS

Comment utiliser le CSS ?

Le langage CSS s’écrit comme ceci

sélecteur { propriété CSS à utiliser : valeur ; }

(nom de la balise HTML à modifier)

Exemple

Voici le code CSS pour définir la couleur de fond d’une page en rouge :

body{background-color:red;}

Pour la changer en noir, modifiez simplement la valeur :

body{background-color:black;}

(13)

M. Lagrave

CSS

Comment utiliser le CSS ?

Le langage CSS s’écrit comme ceci

sélecteur { propriété CSS à utiliser : valeur ; } (nom de la balise HTML à modifier)

Exemple

Voici le code CSS pour définir la couleur de fond d’une page en rouge :

body{background-color:red;}

Pour la changer en noir, modifiez simplement la valeur :

body{background-color:black;}

(14)

M. Lagrave

CSS

Une syntaxe précise

La syntaxe en CSS est très précise, faites attention à toujours la respecter.

En cas d’erreur, vos styles ne seront tout simplement pas pris en compte.

(15)

M. Lagrave

CSS

Une syntaxe précise

La syntaxe en CSS est très précise, faites attention à toujours la respecter.

En cas d’erreur, vos styles ne seront tout simplement pas pris en compte.

(16)

M. Lagrave

CSS

Comment commencer ?

Où placer le code ?

• vous pouvez directement l’ajouter à votre page HTML ;

• ou bien le placer dans un fichier externe (la feuille de styles qui porte obligatoirement l’extension .css) et ainsi l’importer dans plusieurs fichiers HTML.

(17)

M. Lagrave

CSS

Comment commencer ?

Où placer le code ?

• vous pouvez directement l’ajouter à votre page HTML ;

• ou bien le placer dans un fichier externe (la feuille de styles qui porte obligatoirement l’extension .css) et ainsi l’importer dans plusieurs fichiers HTML.

(18)

M. Lagrave

CSS

Code CSS interne

Pour insérer du CSS directement dans la page, vous devez le coder entre les balises

Exemple

modification de la couleur de fond de la page :

body{

background-color:red;

}

</style>

premiers styles

(19)

M. Lagrave

CSS

Code CSS externe

Pour extérioriser le CSS, vous devez en premier lieu créer un nouveau fichier ayant pour extension .css dans lequel vous rédigerez vos propriétés. Vous devrez ensuite l’importer dans toutes les pages de votre site Internet où vous désirez appliquer les modifications.

Pour importer une feuille de styles, il faut placer une balise <link>dans l’en-tête des fichiers HTML

le hrefpermet de définir l’emplacement de votre fichier CSS.

(20)

M. Lagrave

CSS

Une syntaxe précise

Pour modifier la couleur de la page en rouge, vous devez sélectionner la balise

<body>puis utiliser la propriété background-color avec la valeur red. voir le code

(21)

M. Lagrave

CSS

Une syntaxe précise

Pour modifier la couleur de la page en rouge, vous devez sélectionner la balise<body>puis utiliser la propriété

background-color avec la valeur red. voir le code

(22)

M. Lagrave

CSS

Une syntaxe précise

Pour modifier la couleur de la page en rouge, vous devez sélectionner la balise<body>puis utiliser la propriété background-color avec la valeur red. voir le code

(23)

M. Lagrave

CSS

Des styles en cascade

Les propriétés CSS bénéficient d’un système d’héritage et toutes sont appliquées en cascade aux autres balises contenues dans la feuille de styles.

Exemple

Si vous modifiez la couleur du texte dans la balise body, tous les textes qu’elle contient seront modifiés.

(24)

M. Lagrave

CSS

Des styles en cascade

Les propriétés CSS bénéficient d’un système d’héritage et toutes sont appliquées en cascade aux autres balises contenues dans la feuille de styles.

Exemple

Si vous modifiez la couleur du texte dans la balise body, tous les textes qu’elle contient seront modifiés.

(25)

M. Lagrave

CSS

Des styles en cascade

Lorsque vous créez votre feuille de styles, il est parfois utile de modifier l’apparence de plusieurs balises en même temps. Vous pouvez donc définir des propriétés sur plusieurs sélecteurs différents.

(26)

M. Lagrave

CSS

Des styles en cascade

Exemple

Pour modifier simultanément la couleur de plusieurs niveaux de titre, il suffit simplement de séparer les sélecteurs par une virgule.

h1,h2,h3{

color:red;

}

(27)

M. Lagrave

CSS

Commentaires

Il est parfois utile de commenter vos styles, notamment lorsque vous travaillez à plusieurs personnes sur les mêmes fichiers. Dans ce cas, vous devez simplement entourer votre commentaire par /* */.

Le texte sera visible dans le fichier (code source) mais ne sera pas affiché à la consultation de vos pages Internet.

(28)

M. Lagrave

CSS

Styles spécifiques

Le langage CSS permet de modifier l’apparence en utilisant un sélecteur global. Par exemple, on peut

modifier tous les titres de niveau 1 en utilisant le sélecteur global h1.Il est aussi possible de créer des styles

spécifiques et de les appliquer sur certains titres. On utilise alors une classe ou un ID.

(29)

M. Lagrave

CSS

Les classes

Une classe permet de spécifier des propriétés CSS sur une balise spécifique.

La mise en place d’une classe se passe en deux-temps :

I création de la classe dans votre feuille de styles ;

I puis déclaration de la classe dans la balise HTML souhaitée.

(30)

M. Lagrave

CSS

Les classes

Une classe permet de spécifier des propriétés CSS sur une balise spécifique. La mise en place d’une classe se passe en deux-temps :

(31)

M. Lagrave

CSS

Les classes

Une classe permet de spécifier des propriétés CSS sur une balise spécifique. La mise en place d’une classe se passe en deux-temps :

(32)

M. Lagrave

CSS

Les classes

Exemple

Vous avez trois titres rouges de niveau 1 dans votre fichier HTML ; cependant, vous désirez modifier la couleur du dernier en bleu.

Dans votre fichier HTML, vous déclarez la classe dans la troisième balise de titre simplement dans la balise ouvrante.

(33)

M. Lagrave

CSS

Les classes

Puis vous créez la classe "titre-en-bleu"dans votre feuille de styles. La syntaxe est la même que

précédemment, à ceci près que l’on fait précéder le sélecteur d’un point.

Le nom du sélecteur est peu important, cependant je vous conseille de le rendre le plus explicite possible (vous ne pouvez pas ajouter d’espaces ou de caractères spéciaux dans le nom d’une classe).

.titre-en-bleu{

color:blue;

}

(34)

M. Lagrave

CSS

Les ID

Les ID permettent de faire la même chose que les classes. Leur utilisation diffère à trois choses près : on ne peut les utiliser qu’une fois dans votre fichier HTML ; on doit faire précéder le sélecteur d’un dièse # ; enfin on doit écrire dans la balise ouvrante id=" "et non pasclass="

".

Les ID sont le plus souvent utilisés pour définir la mise en page globale d’une interface graphique.

Exemple

#titre-en-bleu{

color:blue;

}

(35)

M. Lagrave

CSS

Formater les textes

Grâce aux propriétés CSS on peut bien sûr modifier l’apparence des textes et bien entendu les combiner pour appliquer plusieurs de ces styles sur un seul et même texte.

(36)

M. Lagrave

CSS

Changer la couleur

Pour changer la couleur d’un texte on utilise la propriétécolor suivie de la couleur souhaitée.

La couleur peut s’exprimer de trois façons différentes :

I par son nom (red, black, blue, orange, etc.) ;

I par son code hexadécimal correspondant précédé d’un dièse (#000000pour le noir, #FFFFFFpour le blanc etc.) ;

I par son code RVB (rgb(255,255,255) ou rgb(0,0,0)).

Exemple

Voici comment modifier les textes contenus dans les balises paragraphes en bleu :

p{

color:blue; }

(37)

M. Lagrave

CSS

Changer la couleur

Pour changer la couleur d’un texte on utilise la

propriétécolor suivie de la couleur souhaitée. La couleur peut s’exprimer de trois façons différentes :

I par son code hexadécimal correspondant précédé d’un dièse (#000000pour le noir, #FFFFFFpour le blanc etc.) ;

Exemple

p{

color:blue; }

(38)

M. Lagrave

CSS

Changer la couleur

I par son code hexadécimal correspondant précédé d’un dièse (#000000pour le noir,#FFFFFF pour le blanc etc.) ;

Exemple

p{

color:blue; }

(39)

M. Lagrave

CSS

Changer la couleur

Exemple

p{

color:blue; }

(40)

M. Lagrave

CSS

Changer la couleur

Exemple

p{

color:blue; }

(41)

M. Lagrave

CSS

Changer la couleur

Exemple

p{

color:blue;

}

(42)

M. Lagrave

CSS

Alignement

Pour modifier l’alignement d’un texte on utilise la propriététext-align. On aligne le texte à gauche avec la valeur left au centre aveccenterou à droite avec right. On peut également justifier un texte avec la valeur justify

Exemple

Voici comment centrer les textes contenus dans les balises paragraphes :

p{

text-align:center; }

(43)

M. Lagrave

CSS

Alignement

Pour modifier l’alignement d’un texte on utilise la propriététext-align. On aligne le texte à gauche avec la valeur left au centre aveccenterou à droite avec right. On peut également justifier un texte avec la valeur justify

Exemple

Voici comment centrer les textes contenus dans les balises paragraphes :

p{

text-align:center;

}

(44)

M. Lagrave

CSS

Mettre en gras

Pour mettre en valeur certaines parties du texte on peut bien sûr utiliser les balises HTML <strong>ou <b>.

La propriété équivalente en CSS est font-weightsuivie d’une valeur100, 200, 300 (selon l’épaisseur des

caractères souhaitées) ou tout simplement la valeurbold.

Exemple

Voici comment mettre le texte des paragraphes en gras :

p{

font-weight:bold; }

(45)

M. Lagrave

CSS

Mettre en gras

Pour mettre en valeur certaines parties du texte on peut bien sûr utiliser les balises HTML <strong>ou <b>.

La propriété équivalente en CSS est font-weightsuivie d’une valeur100, 200, 300 (selon l’épaisseur des

caractères souhaitées) ou tout simplement la valeurbold.

Exemple

Voici comment mettre le texte des paragraphes en gras :

p{

font-weight:bold;

}

(46)

M. Lagrave

CSS

Mettre en italique

Pour changer le texte en italique, on utilise la propriété CSS font-styleavec la valeur italic.

Exemple

Pour mettre en italique le texte des paragraphes :

p{

font-style:italic; }

(47)

M. Lagrave

CSS

Mettre en italique

Pour changer le texte en italique, on utilise la propriété CSS font-styleavec la valeur italic.

Exemple

Pour mettre en italique le texte des paragraphes :

p{

font-style:italic;

}

(48)

M. Lagrave

CSS

Décoration

Pour changer la décoration des textes, on utilise la propriététext-decoration avec les valeurs suivantes : underline pour souligner,overline pour surligner,line through pour la barrer,blink pour la faire clignoter et enfinnone pour annuler la décoration d’un texte.

Exemple

Pour souligner les textes des paragraphes :

p{

text-decoration:underline; }

(49)

M. Lagrave

CSS

Décoration

Pour changer la décoration des textes, on utilise la propriététext-decoration avec les valeurs suivantes : underline pour souligner,overline pour surligner,line through pour la barrer,blink pour la faire clignoter et enfinnone pour annuler la décoration d’un texte.

Exemple

Pour souligner les textes des paragraphes :

p{

text-decoration:underline;

}

(50)

M. Lagrave

CSS

Hauteur et espacement

Pour espacer les lignes en augmentant la hauteur des lignes, on utilise la propriété line-height. Pour augmenter ou réduire l’espacement des lignes entre les caractères, c’est la propriété letter-spacing.

Exemple

Pour augmenter la hauteur des lignes ainsi que

l’espacement entre les lettres des textes des paragraphes :

p{

line-height:20px; letter-spacing:2px; }

(51)

M. Lagrave

CSS

Hauteur et espacement

Pour espacer les lignes en augmentant la hauteur des lignes, on utilise la propriété line-height. Pour augmenter ou réduire l’espacement des lignes entre les caractères, c’est la propriété letter-spacing.

Exemple

Pour augmenter la hauteur des lignes ainsi que

l’espacement entre les lettres des textes des paragraphes :

p{

line-height:20px;

letter-spacing:2px;

}

(52)

M. Lagrave

CSS

Majuscules et minuscules

On peut définir la casse d’un texte en utilisant la propriététext-transform suivie de la valeur lowercase pour changer le texte en minuscules ou uppercase pour le mettre en majuscules.

Exemple

Pour changer tous les textes des paragraphes en majuscules :

p{

text-transform:uppercase; }

(53)

M. Lagrave

CSS

Majuscules et minuscules

On peut définir la casse d’un texte en utilisant la propriététext-transform suivie de la valeur lowercase pour changer le texte en minuscules ou uppercase pour le mettre en majuscules.

Exemple

Pour changer tous les textes des paragraphes en majuscules :

p{

text-transform:uppercase;

}

(54)

M. Lagrave

CSS

Police de caractères

La limitation du nombre de police de caractères que l’on peut utiliser sur Internet permet d’augmenter la compatibilité de votre site entre les navigateurs (voir les possibilités en CSS3). Pour modifier la police de

caractères d’un texte, on utilise la propriétéfont-family avec le nom de la police souhaitée comme valeur. Pour définir plusieurs polices, on sépare les noms par une virgule ; ainsi si la première de la liste n’est pas disponible sur l’ordinateur de l’internaute, la seconde sera utilisée.

Exemple

Pour définir la police de caractères des textes des paragraphes en Verdana puis en Arial :

p{

font-family:Verdana,Arial; }

(55)

M. Lagrave

CSS

Police de caractères

La limitation du nombre de police de caractères que l’on peut utiliser sur Internet permet d’augmenter la compatibilité de votre site entre les navigateurs (voir les possibilités en CSS3). Pour modifier la police de

caractères d’un texte, on utilise la propriétéfont-family avec le nom de la police souhaitée comme valeur. Pour définir plusieurs polices, on sépare les noms par une virgule ; ainsi si la première de la liste n’est pas disponible sur l’ordinateur de l’internaute, la seconde sera utilisée.

Exemple

Pour définir la police de caractères des textes des paragraphes en Verdana puis en Arial :

p{

font-family:Verdana,Arial;

}

(56)

M. Lagrave

CSS

Taille des caractères

Pour modifier la taille des caractères de votre texte, on utilise la propriété font-sizesuivie de la taille souhaitée.

Exemple

Pour modifier la taille des textes des paragraphes en 12 pixels :

p{

font-size:12px; }

(57)

M. Lagrave

CSS

Taille des caractères

Pour modifier la taille des caractères de votre texte, on utilise la propriété font-sizesuivie de la taille souhaitée.

Exemple

Pour modifier la taille des textes des paragraphes en 12 pixels :

p{

font-size:12px;

}

(58)

M. Lagrave

CSS

Marges intérieure et extérieure

La marge intérieure est l’espace affiché entre un élément et sa bordure, la marge extérieure par contre est l’espace affiché au-delà de la bordure. Pour définir une marge intérieure, on utilise la propriétépadding et pour la marge extérieure la propriété margin.

Exemple

Pour définir des marges intérieure et extérieure de 10 pixels sur les images :

img{

padding:10px; margin:10px; }

(59)

M. Lagrave

CSS

Marges intérieure et extérieure

La marge intérieure est l’espace affiché entre un élément et sa bordure, la marge extérieure par contre est l’espace affiché au-delà de la bordure. Pour définir une marge intérieure, on utilise la propriétépadding et pour la marge extérieure la propriété margin.

Exemple

Pour définir des marges intérieure et extérieure de 10 pixels sur les images :

img{

padding:10px;

margin:10px;

}

(60)

M. Lagrave

CSS

Bordures

La propriété à utiliser estborderet les valeurstaille, couleur ettype. En ajoutant le nom d’un côté, on peut définir l’apparence des bordures de façon indépendante ; par exemple la propriété border-bottompour définir la bordure du bas.

Exemple

Pour créer une bordure noire de 10 pixels autour des images :

img{

border:10px solid black; }

(61)

M. Lagrave

CSS

Bordures

La propriété à utiliser estborderet les valeurstaille, couleur ettype. En ajoutant le nom d’un côté, on peut définir l’apparence des bordures de façon indépendante ; par exemple la propriété border-bottompour définir la bordure du bas.

Exemple

Pour créer une bordure noire de 10 pixels autour des images :

img{

border:10px solid black;

}

(62)

M. Lagrave

CSS

Le background

Couleur en fond d’écran : Pour modifier la couleur du background d’un élément, on utilise la propriété background-color, suivie du nom de sa couleur (ou de son code, RVB ou hexadécimal).

Exemple

Pour modifier la couleur de fond de la page en noir :

body{

background-color:black; }

(63)

M. Lagrave

CSS

Le background

Couleur en fond d’écran : Pour modifier la couleur du background d’un élément, on utilise la propriété background-color, suivie du nom de sa couleur (ou de son code, RVB ou hexadécimal).

Exemple

Pour modifier la couleur de fond de la page en noir :

body{

background-color:black;

}

(64)

M. Lagrave

CSS

Image en fond d’écran

Pour modifier le fond d’écran en utilisant une image la propriété est background-image. Par défaut l’image sera répétée pour tapisser le fond complet de votre écran.

Exemple

Pour tapisser votre page avec l’image photo.jpg :

body{

background-image:url(photo.jpg); }

(65)

M. Lagrave

CSS

Image en fond d’écran

Pour modifier le fond d’écran en utilisant une image la propriété est background-image. Par défaut l’image sera répétée pour tapisser le fond complet de votre écran.

Exemple

Pour tapisser votre page avec l’image photo.jpg :

body{

background-image:url(photo.jpg);

}

(66)

M. Lagrave

CSS

Position et répétition

Pour éviter que l’image soit répétée sur l’ensemble de l’écran, on utilise la propriété background-repeatavec comme valeurrepeat-xpour répéter l’image sur une ligne horizontale, repeat-ypour répéter l’image sur une ligne verticale et no-repeat pour ne l’afficher qu’une seule fois.

On peut également la positionner de façon précise avec la propriétébackground-position suivie de son

positionnement par rapport au bord haut gauche.

(67)

M. Lagrave

CSS

Position et répétition

Pour éviter que l’image soit répétée sur l’ensemble de l’écran, on utilise la propriété background-repeatavec comme valeurrepeat-xpour répéter l’image sur une ligne horizontale, repeat-ypour répéter l’image sur une ligne verticale et no-repeat pour ne l’afficher qu’une seule fois.

On peut également la positionner de façon précise avec la propriétébackground-position suivie de son

positionnement par rapport au bord haut gauche.

(68)

M. Lagrave

CSS

Position et répétition

Exemple

Pour ajouter une image de fond, qui ne se répète qu’une fois et qui est placée en haut au centre :

body{

background-image:url(photo.jpg);

background-position:top center;

background-repeat:no-repeat;

}

(69)

M. Lagrave

CSS

Apparence des puces

Apparence des puces : Par défaut, les puces affichées dans une liste sont rondes et noires. On en change le style en utilisant la propriété list-style-typeavec comme valeur le nom du type souhaité, circle,square, décimal, etc.

Pour supprimer l’affichage des puces on utilise la valeurnone.

Exemple

Pour supprimer les puces dans chaque liste :

ul{

list-style:none; }

(70)

M. Lagrave

CSS

Apparence des puces

Apparence des puces : Par défaut, les puces affichées dans une liste sont rondes et noires. On en change le style en utilisant la propriété list-style-typeavec comme valeur le nom du type souhaité, circle,square, décimal, etc. Pour supprimer l’affichage des puces on utilise la valeurnone.

Exemple

Pour supprimer les puces dans chaque liste :

ul{

list-style:none;

}

(71)

M. Lagrave

CSS

Puces en image

Pour personnaliser vos listes en remplaçant les puces par une image, on utilise la propriétélist-style-image suivie de l’URL du fichier graphique à utiliser.

Exemple

Pour remplacer les puces par l’image arrow.png :

ul{

list-style-image:url(arrow.png); }

(72)

M. Lagrave

CSS

Puces en image

Pour personnaliser vos listes en remplaçant les puces par une image, on utilise la propriétélist-style-image suivie de l’URL du fichier graphique à utiliser.

Exemple

Pour remplacer les puces par l’image arrow.png :

ul{

list-style-image:url(arrow.png);

}