Scribd
Importer
26 vues14 pages

Introduction au CSS pour débutants

Le document présente une introduction au CSS, un langage utilisé pour styliser les documents HTML et XML, en expliquant ses principes, ses méthodes d'intégration, et ses fonctionnalités. Il aborde également les différentes manières de formater le texte, de dimensionner et de positionner les éléments, ainsi que les propriétés de formatage de texte. Enfin, il souligne l'importance de l'accessibilité et de la compatibilité des styles sur divers supports.

Transféré par

footsauvage
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
26 vues14 pages

Introduction au CSS pour débutants

Le document présente une introduction au CSS, un langage utilisé pour styliser les documents HTML et XML, en expliquant ses principes, ses méthodes d'intégration, et ses fonctionnalités. Il aborde également les différentes manières de formater le texte, de dimensionner et de positionner les éléments, ainsi que les propriétés de formatage de texte. Enfin, il souligne l'importance de l'accessibilité et de la compatibilité des styles sur divers supports.

Transféré par

footsauvage
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

1 Introduction1
CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire
la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World
Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans
la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

1.1 Principe
Il s'agit d'apporter un peu de style aux pages web que nous allons créer. En effet, ce langage permet de
gérer par exemple la couleur du texte ou du fond, la taille ou la police du texte, les images etc.

Pour cela il faut ajouter du code CSS à la page HTML. Trois solutions s'offrent à nous :
• dans un fichier .css (le moyen le plus recommandé)
• dans l'en-tête du fichier HTML, entre les balises <head></head>
• dans les balises (a éviter absolument !!!)

1.2 Fichier CSS or not ?


Il faut se poser la question puisque nous avons trois possibilités. Le fichier CSS reste à priori la meilleure
solution. Les informations de mise en page sont ainsi centralisées dans un seul fichier. En cas de
modification du design du site, un seul fichier est à retoucher.

1.3 Le fichier css et ses liens avec le fichier html


Le fichier contenant le style sera nommé : [Link] ou mon_style.css ou le_nom_que_vous_voulez.css
Il sera "appellé" par le fichier html par une commande située dans l'en-tête du fichier :

<!DOCTYPE html>

<head>
<title>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design"
href="[Link]" />
</head>
<body>
<p>Cette page comporte une feuille de style externe. C'est la meilleure méthode
à utiliser quand on fait du CSS.</p>
</body>
</html>

La commande pour joindre une feuille de style à un fichier html se présente de cette façon :
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="[Link]"
/>

rel = "stylesheet" : indique le genre de fichier lié : ici feuille de style


media = "screen" : indique le type de sortie, pour une impression : print, pour un pda : handled
type= "text/css" : precise que le langage sera CSS
title= "monstyle" : un titre pour la feuille
href="[Link]" : le fichier contenant le CSS

1.4 Comment ça marche ?


Le style est affecté à une ou plusieurs balises. Nous avons utilisé les balises html pour préciser quel était
le genre du texte, par exemple un titre, une citation etc. Nous pouvons attribuer un style à la balise <h1>
dans le fichier css. Lors de l'ouverture de la page, le navigateur ira chercher les informations de style
dans le document concerné et appliquera le style à la page.

1
[Link]

CSS 1 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

1.5 Exemple
Dans le fichier html [Link] :

<!DOCTYPE html>

<head>
<title>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style"
href="[Link]" />
</head>

<body>
<h1>Ceci est un titre</h1>
<p>Cette page comporte une feuille de style externe. C'est la meilleure
méthode à utiliser quand on fait du CSS.</p>
<blockquote>
Cher internaute,<br/>Vous venez de recevoir un virus informatique.
Comme nous ne sommes pas très avancés technologiquement, ceci est un virus
manuel. S'il vous plaît, effacez tous les fichiers de votre disque dur et
envoyez ce message à tous ceux que vous connaissez.
Merci de votre aide.
</blockquote>
</body>
</html>

Dans le fichier css [Link] :

h1
{
font-family : arial; /*defini la police de carctères*/
color : #999999; /*defini la couleur du texte*/
font-size : x-large; /*define la taille de la police*/
text-align : center; /*indique l'alignement du texte*/
}

p
{
font-family : arial ;
color : gray;
font-size : medium;
text-align : justify;
}

blockquote
{
border-color : silver; /* trace une bordure grise */
border-style : solid; /* la bordure sera tracée avec un trait continu */
border-width : 2px; /*la bordure fera 2 pixels de large*/
font-family : vernada;
font-size : medium ;
font-style : italic ;
}

Ces deux fichiers produiront l'affichage suivant :

CSS 2 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

Dans le fichier css, chaque balise est répertoriée et son format est précisé. Tous les paramètres d'une
page simple peuvent être mis en place de cette façon.

2 Choix du style en fonction de la balise


Il est parfois nécessaire d'appliquer un style différent à certains paragraphes. La balise <p> ne distingue
pas un paragraphe d'introduction d'un paragraphe de contenu.
Nous donnerons donc un identifiant à la balise afin de lui appliquer un style particulier. Par exemple :
Dans le .html :

<p id="intro">ceci est une introduction et je ne veux pas le même style que dans mon
paragraphe</p>

Dans le .css :

#intro
{
text-align : center;
}

En utilisant l'attribut id, nous donnons un identifiant unique à la balise. Dans le css, nous pourrons faire
un style juste pour cette balise. Par contre, je ne peux l'utiliser qu'une fois sur la page.

Dans le cas ou nous avons plusieurs composants identiques (cas des menus par exemple), il n'est plus
possible d'utiliser l'attribut id. Il faudra utiliser l'attribut class. Par exemple :

Dans le .html :

<p class="menu">
<ul>
<li>lien1</li>
<li>lien2</li>
</ul></p>

Dans le .css :

.menu
{
text-align : left;
}
Il est alors possible de formater des listes ou des menus de la même manière. Vous noterez que l'attribut
class est appelé par un point dans le css et que l'attribut id est appelé par un dièse.

CSS 3 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

3 Mettre en forme le texte


3.1 Taille du texte :
Les valeurs définissant la taille sont multiples.
• pixels,
• taille relative,
• %,
• .em

Pixels, px
Certaines dimensions parlent mieux que d'autres ! Ainsi, l'em ne vous dira sans doute rien alors que les
pixels sont plus courants. Cela dit, ce n'est pas parce que c'est plus courant que c'est bien. Je vous
rappelle qu'un site doit être lisible sur plusieurs supports. Il semble donc compromis de mettre un titre de
page en 32px, sinon sur mon téléphone, je ne verrai que le titre et point le reste. Dommage !
La taille en px est donc à éviter si possible.

La taille relative
C'est très simple :
• xx-small : minuscule
• x-small : très petit
• small : petit
• medium : moyen
• large : grand
• x-large : très grand
• xx-large : gigantesque

Le pourcentage %
Encore aussi simple ! 100% c'est la taille normale, donc 70% c'est plus petit, et 150% c'est beaucoup
plus gros !!

Les em
C'est comme le pourcentage, 1em c'est la taille normale, 1.3em c'est plus gros etc.

3.2 Polices
Là encore attention à l'accessibilité. Les polices exotiques ne sont pas utilisables car présentes sur trop
peu d'ordinateurs. Nous pourrons utiliser à volonté :

• Texte en Arial
• Texte en Arial Black
• Texte en Comic Sans MS
• Texte en Courier New
• Texte en Georgia
• Texte en Impact
• Texte en Times New Roman
• Texte en Trebuchet MS
• Texte en Verdana

Dans le style nous préciserons plusieurs polices au cas ou celle que nous avons choisi ne soit pas
disponible :
font-family : "bookman old style", arial, Georgia, verdana;
Si le surfeur n'a pas la police bookman old style, son navigateur prendra la suivante, soit arial.

3.3 Alignement
Les alignements classiques sont : gauche, droite, centré, justifié. (left, right, center, justify)
Justifié est très répandu du fait qu'il démarque bien les bords de page.

CSS 4 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

4 Dimensionner et placer des éléments dans la page


Il faut se souvenir qu'il existe deux types de balises, les blocs et les lignes. L'application d'attributs à une
balise bloc portera sur tout le bloc, c'est-à-dire la largeur complète de la page. L'application d'attributs à
une balise ligne, portera sur les mots compris entre les bornes de la balise.

4.1 Taille et marge des éléments

On peut modifier la largeur et la hauteur d'un bloc. En ajoutant dans le css les attributs suivants :
• height : hauteur; /*en px, en em, en %, en ex*/
• width : largeur; /*en px, en em, en %, en ex*/

Le centrage dans la page ou par rapport aux autres éléments se fera avec les attributs
• margin : marge_exterieure; /*en px, en em, en %, en ex*/
• padding : marge_interieure; /*en px, en em, en %, en ex*/

Avec ces attributs nous pouvons mettre en forme un bloc facilement. Il suffira de lui donner une largeur
et des marges identiques de chaque côtés pour le centrer sur la page. Par exemple :

p
{
width : 50%;
margin-left : auto;
margin-right : auto;
}
Cela produira l'affichage du bloc en plein centre de l'écran. Celui-ci prendra la moitié de la taille du
navigateur.

4.2 Positionner des éléments.

L'utilisation d'un jeu de balises génériques devient nécessaire. Elles sont génériques car elles n'ont pas
de sens particulier dans le navigateur. Autant le navigateur sait ce qu'est un titre ou un commentaire,
autant une balise générique ne correspond à rien de particulier. Pourtant elles permettent de créer des
blocs ou des lignes que nous pourrons placer où nous voulons !

• <span> </span> balise type inline


• <div> </div> balise type bloc

Il existe quatre types de positionnement :


• flottant
• absolu
• fixé
• relatif
Nous pouvons positionner chaque élément avec ces caractéristiques.

Le flottant :
Le texte va entourer le bloc. Idéal si on veut insérer une lettrine ou une image dans le texte. Cela se
présente de cette façon :
p
{
float : left; /* ou right ou none*/
}
Dans ce cas le texte prendra la hauteur du bloc qui sera placé à gauche.

CSS 5 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

L'absolu
Le positionnement absolu pourrait être sympathique si il était davantage compatible avec IE<7. Il permet
de positionner un élément par rapport à la fenêtre du navigateur.

CSS :
.decalage1 {
position:absolute;
border:2px solid black;
left:10px;top:10px;
width:150px;height:200px;
}
.decalage2 {
position:absolute;
border:1px solid red;
left:20px;
top:20px;
width:100px;height:100px;
}

HTML :
<div class="decalage1">
<div class="decalage2">
texte
</div>
</div>

Le fixé :
On peut définir les coordonnées d'un bloc par rapport au coin haut gauche du navigateur et fixer les blocs.
Encore une fois cela ne marche pas très bien avec IE<7.

CSS : HTML :
.bloc_fixe { <div class="bloc_fixe">
position:fixed; Texte du bloc fixe.
border:solid 1px; </div>
width:100px; <div class="bloc_variable">
top:10px; Texte du bloc variable.
left:10px; </div>
bottom:10px;
}
.bloc_variable {
position:fixed;
border:solid 1px;
top:10px;
left:120px;
bottom:10px;
right:10px;
}

Le relatif
Cette fois on donne la position par rapport à l'endroit d'origine du bloc. Ainsi on peut positionner le bloc
où l'on veut.
CSS : HTML :
.jaune { <p>Lorem
position: relative; <span class="jaune">boîte en
bottom: 5px; position relative</span>
left: 3em; ipsum dolor.</p>
background-color: #ffff00;
}

CSS 6 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

5 Propriétés de formatage de texte2


Je résume ici la plupart des propriétés de formatage de texte.

Qu'est-ce que le formatage de texte ? C'est tout ce qui consiste à mettre en forme le texte : mettre en
gras, italique, souligné, changer la police, l'alignement etc...

5.1 Police, taille et décorations

Type Nom Valeurs possibles


Indiquer les noms de polices possibles par ordre de préférence :
1 font-family:police1, police2, police3;

Si le visiteur a la police 1, il l'utilisera. Sinon, il regarde s'il a la police 2,


Nom de police font-family puis la police 3 etc.

Utilisez des guillemets si le nom de la police comporte des espaces. Essayez de toujours
mettre comme dernière police possible "serif" ou "sans-serif".
1 font-family: "Arial Black", Arial, Verdana, serif;

Indiquez la taille du texte. Plusieurs unités sont possibles :

• px (pixels)
• % (pourcentage, 100% = normal)
• em (taille relative, 1.0 = normal)
• ex (taille relative à la hauteur de la lettre "x". 1.0 = normal)
• nom de taille :
Taille du texte font-size o xx-small : très très petit
o x-small : très petit
o small : petit
o medium : moyen
o large : grand
o x-large : très grand
o xx-large : très très grand

bold : gras
font-weight bolder : plus gras
Gras
lighter : plus fin
normal : pas gras (par défaut)
italic : italique
Italique font-style oblique : autre façon de mettre en italique
normal : normal (par défaut)
underline : souligné
overline : ligne au-dessus
text-
Décoration decoration line-through : barré
blink : clignotant
none : normal (par défaut)
font-variant small-caps : petites capitales
Petites capitales
normal : normal (par défaut)
text- uppercase : tout mettre en majuscules
Capitales transform lowercase : tout mettre en minuscules

2
[Link]

CSS 7 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

Type Nom Valeurs possibles


capitalize : début des mots en majuscules
none : normal (par défaut)
Indiquez dans n'importe quel ordre des valeurs possibles pour font-weight, font-style,
font-size, font-variant, font-family.

Attention exception : le nom de la police (font-family) doit être placé en dernier dans la
Méga-propriété font liste dans tous les cas.
de police Vous n'êtes pas obligés de mettre une valeur de chacune de ces propriétés.
1 font: bold, 16px, Arial;

Cela mettra votre texte en gras, 16 pixels, Arial.

5.2 Alignement

Type Propriété Valeurs possibles


left : à gauche (par défaut)
Alignement text-align center : centré
horizontal right : à droite
justify : texte justifié (prend toute la largeur de la page)
A utiliser dans des cellules de tableau, ou dans des éléments inline eux-mêmes contenus
dans un élément inline.
Alignement vertical-
align top : en haut
vertical
middle : au milieu
bottom : en bas
Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou en pourcentage (%)

text-indent
Indiquez une valeur en pixels (px) pour définir l'alinéa de vos paragraphes.
Alinéa
Vos paragraphes commenceront avec le retrait que vous avez indiqué.
normal : le passage à la ligne est automatique (par défaut)
nowrap : pas de passage à la ligne automatique, à moins qu'une balise xHTML
Césure white-space comme <br /> ne soit présente.
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source
(comme la balise xHTML <pre>)

6 Propriétés de couleur et de fond


6.1 Couleur

Type Propriété Valeurs possibles


Indiquer une couleur avec l'une des méthodes suivantes :

• En tapant le nom de la couleur en anglais (black, blue, green, white, red...).


Couleur de texte color
• En indiquant la couleur en hexadécimal (#CC48A1)
• En indiquant la couleur en RGB : rgb (128, 255, 0)

Couleur de fond background-color Même fonctionnement que color. Cela définit cette fois la couleur de fond du texte

CSS 8 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

6.2 Image de fond


Type Propriété Valeurs possibles
Indiquer l'url de l'image (notation absolue ou relative)
background- background-image:url("images/[Link]"); /* Notation relative */
Image de fond image 1
background-image:url("[Link] /* Notation
2
absolue */
background- fixed : le fond reste fixe quand on descend plus bas sur la page
Fond fixé attachment scroll : le fond défile avec le texte (par défaut)
repeat : le fond se répète (par défaut)
Répétition du background- repeat-x : le fond ne se répète que sur une ligne, horizontalement
fond repeat repeat-y : le fond ne se répète que sur une colonne, verticalement
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois
2 façons de faire :

• En notant une distance en px ou %, par rapport au coin en haut à gauche.

1 background-position:50px 200px; /* 50 px à droite, 200px en bas */

• En utilisant des valeurs prédéfinies, une pour la verticale et une pour


Position du background- l'horizontale
fond position top : en haut, verticalement
center : au milieu, verticalement
bottom : en bas, verticalement

left : à gauche, horizontalement


center : au centre, horizontalement
right : à droite, horizontalement

1 background-position : bottom right; /* en bas à droite */

Indiquer une ou plusieurs valeurs issues des propriétés background-image, background-


repeat, background-attachment, background-position.
L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés de mettre toutes les
Méga-
background
valeurs de ces propriétés (au moins une suffit)
propriété de
fond
/* Le fond [Link] reste affiché en haut à droite de l'écran et n'est pas
1
répété. */
2
background:url("images/[Link]") no-repeat fixed top right;

7 Propriétés des boîtes


7.1 Dimensions
Type Propriété Valeurs possibles

width
Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à
Largeur
l'intérieur)
Hauteur height Idem
Largeur minimale min-width Indiquer une valeur, en pixels par exemple.
Largeur max-width Idem
maximale
min-
Hauteur minimale height Idem

CSS 9 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

Type Propriété Valeurs possibles


Hauteur max-
height Idem
maximale
7.2 Marges extérieures

Type Propriété Valeurs possibles


Marge en haut margin-top Indiquer une valeur comme 20px, 1.5em...
Marge à gauche margin-left Idem
margin-
Marge à droite right Idem
margin-
Marge en bas bottom Idem

Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la


signification change :

• 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite


• 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde
pour la gauche et la droite
Méga-propriété de margin • 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à
marge gauche et à droite, la troisième à la marge du bas
• 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

Par exemple, si je mets 2 valeurs :

margin:20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite


1
*/

7.3 Marges intérieures

Type Propriété Valeurs possibles


Marge intérieure en haut padding-top Indiquer une valeur comme 20px, 1.5em...
Marge intérieure à gauche padding-left Idem
Marge intérieure à droite padding-right Idem
Marge intérieure en bas padding-bottom Idem
Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous
mettez, la signification change :

• 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la


droite
Méga-propriété de marge padding • 2 valeurs : la première correspond à la marge pour le haut et le bas,
intérieure la seconde pour la gauche et la droite
• 3 valeurs : la première correspond à la marge du haut, la seconde
aux marges à gauche et à droite, la troisième à la marge du bas
• 4 valeurs : respectivement la marge du haut, de la droite, du bas,
de la gauche.

CSS 10 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

7.4 Bordures
Type Propriété Valeurs possibles
Epaisseur de la bordure border-width Indiquer une valeur en px.
Couleur de la bordure border-color Indiquer une valeur de couleur.
none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de bordure de 3px minimum)
Type de bordure border-style dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D
Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple :
Bordure à gauche border-left
border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D
1
"enfoncé" */

Bordure en haut border-top Idem


Bordure à droite border-right Idem
border-
Bordure en bas bottom Idem

Méga-propriété de border Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche.
bordure

8 Propriétés de positionnement et d'affichage


8.1 Affichage
Type Propriété Valeurs possibles
none : l'élément ne sera pas affiché
display
block : l'élément devient de type "block" (bloc, comme <p>)
Type d'élément
inline : l'élément devient de type "inline" (en ligne, comme <strong>)
list-item : l'élément devient de type "élément de liste à puce" (comme <li>)
hidden : masqué

visibility visible : visible (par défaut)


Affichage
display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque
l'élément, qui continue quand même à prendre de la place sur l'écran.
Indiquer 4 valeurs comme ceci :
1 clip: rect(valeur1, valeur2, valeur3, valeur4);

Afficher seulement clip


une partie Cela permet de n'afficher qu'une partie d'un élément. rect() permet d'indiquer les
coordonnées du rectangle qui sera affiché.
Les valeurs 1 à 4 correspondent respectivement aux coins haut, droite, bas et gauche du
rectangle.
visible : tout l'élément sera affiché (par défaut).
hidden : l'élément sera coupé s'il dépasse les limites définies par height et width.
Limiter les overflow
On ne pourra pas voir la partie du texte coupée.
dimensions scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites.
Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu'on
puisse voir la suite du texte.

CSS 11 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

Type Propriété Valeurs possibles


auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en
fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser la valeur
"scroll".
8.2 Positionnement
Type Propriété Valeurs possibles
left : flottant à gauche
Flottant float right : flottant à droite
none : pas de flottant (par défaut)
left : supprime l'effet d'un flottant à gauche précédent
clear
right : supprime l'effet d'un flottant à droite précédent
Stopper un flottant
both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite
none : pas de suppression de l'effet du flottant (par défaut)
absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe (fonctionne comme la position absolue). L'élément reste à sa
Type de position position même quand on descend plus bas dans la page.
positionnement
relative : position relative, par rapport à la position "normale" de l'élément
static : positionnement normal (par défaut)
Position par rapport top Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
au haut
Position par rapport bottom Idem
au bas
Position par rapport left Idem
à gauche
Position par rapport right Idem
à droite
En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index
permet d'indiquer quel élément doit être affiché au-dessus de l'autre.
z-index
Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant.
Ordre d'affichage
Par exemple, si vous avez 2 éléments positionnés en absolus avec un z-index de 10 pour
l'un et de 20 pour l'autre, c'est celui qui a un z-index de 20 qui sera affiché par-dessus.

8.3 Propriétés des listes


Type Propriété Valeurs possibles
• Pour les listes non ordonnées (<ul>) :
o disc : un disque noir (par défaut).
o circle : un cercle.
o square : un carré.
o none : aucune puce ne sera utilisée.

Type de liste list-style-type


• Pour les listes ordonnées (<ol>) :
o decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
o decimal-leading-zero : des nombres commençant par zéro (01, 02,
03, 04, 05...).
o upper-roman : numérotation romaine, en majuscules (I, II, III, IV,
V...)
o lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv,
v...)

CSS 12 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

Type Propriété Valeurs possibles


o upper-alpha : numérotation alphabétique, en majuscules (A, B, C,
D, E...)
o lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d,
e...)
o lower-greek : numérotation grecque

Position en list-style- inside : sans retrait


retrait position outside : avec retrait (par défaut)

list- Indiquer l'url de l'image qui servira de puce. Exemple :


Puce style-
personnalisée image 1 list-style-image: url("images/[Link]");

Vous pouvez réunir les valeurs de list-style-type, list-style-position et list-style-image.


Vous n'êtes pas obligés de mettre toutes les valeurs, et l'ordre n'a pas d'importance.
Méga-propriété list-style Exemple :
de liste
1 list-style: inside square;

8.4 Propriétés des tableaux


Type Propriété Valeurs possibles
collapse : les bordures du tableau et des cellules sont mélangées.
Type de bordure border-collapse
separate : les bordures du tableau et des cellules sont séparées (par défaut).

empty-cells
show : les bordures des cellules vides sont affichées.
Cellules vides
collapse : les cellules vides sont masquées (par défaut).
Indique la position du titre du tableau, défini via la balise <caption>

top : en haut du tableau


Position du titre caption-side
bottom : en bas du tableau
left : à gauche du tableau
right : à droite du tableau

8.5 Autres propriétés


Type Propriété Valeurs possibles
auto : curseur automatique (par défaut)
default : curseur standard
pointer : curseur en forme de main, comme quand on pointe sur un lien
text : curseur utilisé quand on pointe sur du texte
wait : curseur utilisé pour indiquer une attente (sablier)
progress : curseur utilisé pour indiquer une tâche de fond (curseur avec sablier)
help : curseur en forme de point d'interrogation, indiquant une aide
move : curseur en forme de croix, indiquant un déplacement possible
Curseur cursor
de souris n-resize : flèche vers le nord
ne-resize : flèche vers le nord-est
e-resize : flèche vers l'est
se-resize : flèche vers le sud-est
s-resize : flèche vers le sud
sw-resize : flèche vers le sud-ouest
w-resize : flèche vers l'ouest
nw-resize : flèche vers le nord-ouest

CSS 13 / 14
CIEL

Cours
Langages HTML+CSS
HTML+CSS
PART 2
Informatique pour les Réseaux et Systèmes Techniques

Type Propriété Valeurs possibles


url : curseur personnalisé, de type .cur ou .ani. Exemple :

1 cursor: url("images/[Link]"), auto;


Vous devez utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani. Notez
aussi la présence du mot auto à la fin. Cela signifie que le navigateur tentera de charger le curseur
personnalisé. S'il n'a pu être chargé pour une quelconque raison, le curseur correspondant à la valeur
auto sera utilisé.

CSS 14 / 14

Vous aimerez peut-être aussi