border - InfoNice

Réussir son site web avec XHTML et CSS
Leçon 09
Mettre en forme les listes à puces et dessiner des bordures
1.


2.




Propriétés CSS des listes à puces ..............................................................................................................................................1
Présentation de la puce ........................................................................................................................................................1
Changer la puce par une image ........................................................................................................................................2
Dessiner des bordures en CSS ...................................................................................................................................................2
Type de bordure ......................................................................................................................................................................2
Épaisseur de bordure ..............................................................................................................................................................3
Couleur de bordure ................................................................................................................................................................3
Position de bordure .................................................................................................................................................................4
1. Propriétés CSS des listes à puces
 Présentation de la puce
On peut changer l’apparence de la puce à l’aide de la propriété list-style-type. Certaines valeurs sont
adaptées aux listes non ordonnées <ul> et d’autres aux listes ordonnées <ol>.
Liste non ordonnée <ul>
Propriétés
list-style-type
Valeur(s)
disc

un disque noir (valeur par défaut)
circle

un cercle
square

un carré
none
pas de puce
Liste ordonnée <ol>
propriétés
list-style-type
Valeur(s)
decimal
decimal-leading-zero
upper-roman
lower-roman
upper-alpha
lower-alpha
lower-greek
1, 2, 3, 4… (valeur par défaut)
01, 02, 03, 04….
I, II, III, IV…
i, ii, iii, iv….
A, B, C, D…
a, b, c, d…
α, β, γ, δ…
Vous allez changer le style des puces présentes dans la page gastronomie.
 Modifiez dans Notepad++ la feuille de style style.css en rajoutant le code suivant :
ul
{
list-style-type: square;
}
 Enregistrez la feuille de style et observez les changements.
Vous souhaitez changer le style des puces présentes dans les puces principales.
 Modifiez dans Notepad++ la feuille de style style.css en rajoutant le code suivant :
ul ul
{
list-style-type: circle
}
 Enregistrez la feuille de style et observez les changements.
Frédéric PERRET
Réussir son site web avec XHTML et CSS
leçon 09 – p.1/4
Vous souhaitez changer le style de la numérotation des puces du Top 5 de la classe dans la page
Gastronomie.
 Modifiez dans Notepad++ la feuille de style style.css en rajoutant le code suivant :
ol
{
list-style-type: upper-roman
}
 Enregistrez la feuille de style et observez les changements.
 Changer la puce par une image
Pour une liste non ordonnée, vous pouvez utiliser une image en tant que puce. La spécification de
l’utilisation d’une image en tant que puce s’effectue via la propriété list-style-image. L’image à utiliser
ne doit pas être trop grande.
Utiliser une image comme puce
propriété
Valeur(s)
list-style-image
url("image")
L’adresse de l’image indiquée dans l’url est
relative à la position du fichier CSS.
Vous utilisez l’image d’un smiley comme puce.
 Copiez l’image heureux.png du dossier Ressources dans le dossier Site-nice/images
 Ouvrez dans Notepad++ la feuille de style style.css et modifiez le code suivant :
ul
{
list-style-image: url("images/heureux.png");
}
 Enregistrez la feuille de style et observez les changements.
2. Dessiner des bordures en CSS
On dispose de plusieurs propriétés CSS pour créer des bordures (border-style : type de bordure ; borderwidth : épaisseur de la bordure ; border-color : couleur de la bordure)
 Type de bordure
La propriété border-style indique le type de bordure que l’on veut utiliser.
Type de bordure
propriétés
border-style
Frédéric PERRET
Valeur(s)
Description
dotted
Ligne en pointillés
dashed
Ligne en tirets
solid
Ligne pleine
double
Ligne double
groove
En relief
ridge
Autre type d’effet
inset
3D Effet 3D enfoncé
outset
Effet 3D surélevé
none
Pas de bordure (valeur par défaut)
Réussir son site web avec XHTML et CSS
leçon 09 – p.2/4
 Épaisseur de bordure
La propriété border-width sert à modifier l’épaisseur de la bordure. L’unité utilisée est généralement le px
(pixel).
Épaisseur de bordue
propriété
Valeur(s)
…px
border-width
thin
medium
thick
Épaisseur de la bordure en pixels.
Bordure fine
Bordure moyenne
Bordure épaisse
 Couleur de bordure
La propriété border-color sert à modifier la couleur de la bordure. Elle s’utilise de la même manière que
color et background. Vous pouvez utiliser des noms de couleur comme valeur, ou encore utiliser une
notation hexadécimale ou RGB.
Couleur de la bordure
propriétés
border-color
Valeur(s)
un nom
#
rgb(R,G,B)
Indiquer la couleur avec un nom de couleur
Indiquer la couleur en hexadécimal
Indiquer la couleur en RGB
Vous souhaitez ajouter un fond et une bordure sur la barre de navigation :
 Ouvrez dans Notepad++ la feuille de style style.css et modifiez le code suivant :
#barre-navigation
{
text-align: right;
color: white;
background-color: #C7DFE7;
border-style: dotted;
border-width: 2px;
border-color: #2EA9CA;
}
 Enregistrez la feuille de style et observez les changements.

Remarque
La super-propriété border peut regrouper les valeurs des 3 propriétés que vous venez
d’aborder, à savoir : border-style, border-width et border-color.
 Vous allez simplifier le code CSS qui permet de placer une bordure autour de la barre de navigation
en remplaçant le code suivant :
border-style: dotted;
border-width: 2px;
border-color: #2EA9CA;
par :
#barre-navigation
{
text-align: right;
color: white;
background-color: #C7DFE7;
border: dotted 2px #2EA9CA;
}
Frédéric PERRET
Réussir son site web avec XHTML et CSS
leçon 09 – p.3/4
Vous souhaitez ajouter un fond et des bordures à votre tableau de la page Localisation & climat :
 Ouvrez dans Notepad++ la feuille de style style.css et ajoutez le code suivant :
table
{
background-color: #EAF086;
border: ridge 6px #2EA9CA;
}
 Enregistrez la feuille de style et observez les changements.
 Ouvrez dans Notepad++ la feuille de style style.css et ajoutez le code suivant :
td
{
border: solid 1px #2EA9CA;
}
 Enregistrez la feuille de style et observez les changements.

Remarque
La propriété border-collapse indique que les bordures des cellules seront collées entre elles.
On utilise souvent cette propriété car l'effet qu'elle procure est intéressant. Les valeurs possibles
sont :
separate : les bordures seront séparées les unes par rapport aux autres (par défaut).
collapse : les bordures seront collées entre elles.
 Rajoutez cette propriété à la balise table avec la valeur collapse et observez le résultat.
 Position de bordure
Il est possible d’affecter une bordure différente à chacun des 4 côtés d’un objet. En effet, border
s’applique aux 4 côtés, mais si vous voulez changer la bordure en fonction du côté, vous pouvez avoir
recours à ces 4 autres super-propriétés :
-
border-left : bordure de gauche
border-right : bordure de droite
border-top : bordure du haut
border-bottom : bordure du bas
Ces 4 super-propriétés s’utilisent exactement de la même manière que border.
Vous souhaitez ajouter une bordure inférieure aux titres de niveau 2 :
 Ouvrez dans Notepad++ la feuille de style style.css et ajoutez le code suivant :
h2
{
text-decoration: overline;
color: navy;
background-color: #EDD7B8;
border-bottom: 2px solid #2EA9CA;
}
 Enregistrez la feuille de style et observez les changements dans vos différentes pages.

Remarque
Supprimer la bordure bleue qui apparait autour des images transformées en lien
Avec la propriété border du CSS vous allez pouvoir éviter ce petit désagrément :
a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
}
Frédéric PERRET
Réussir son site web avec XHTML et CSS
leçon 09 – p.4/4