Propriétés CSS3
Annexe : Quelques Propriétés CSS3
Partie 1 : Gestion du texte en CSS
1- Les propriétés CSS de type font-
Nom Description
Permet de fixer l’inclinaison d’un texte. Elle accepte 4 valeurs
différentes :
font-style Normal (valeur par défaut) ;
Italic (change le texte en italique) ;
Oblique (pour forcer certaines polices d’être en italique) ;
Inherit (hérite des propriétés de l’élément parent).
font-size Permet de modifier la taille de nos textes
Permet de définir le poids d’un texte, c’est dire son épaisseur. Elle
peut être :
Normal (la valeur par défaut) ;
Lighter (police plus fine) ;
font-weight Bold (la police est en gras) ;
Bolder (la police est encore plus en gras) ;
Une centaine compris entre 100 et 900 (du plus léger au plus
gras, Notez que 400 correspond à normal et 700 à bold).
Inherit (hérite des styles de ses parents).
line-height Sert à fixer l’écartement, i.e la distance entre deux lignes de texte
2- Opacité d’un texte
C’est le fait d’être plus ou moins transparent. Cette propriété peut prendre une
valeur entre 0 (texte totalement transparent) et 1 (texte totalement opaque).
Exemple : opacity:0.2 /* quasiment transparente */
3- Propriétés CSS de type text-
Nom Description
Pour définir l’alignement de notre texte:
Left : texte aligné à gauche (par défaut)
text-align Right : texte aligné à droite
Center : texte centré
Justify : texte justifié
Inherit : hérite de la valeur de l’élément parent
text-transform Permet de transformer un texte ou une partie d’un texte en
majuscules ou en minuscules. Elle peut prendre la valeur :
Lowercase : met tout le texte en minuscules
Uppercase : met tout le texte en majuscules
Capitalize : met la première lettre de chaque mot en
majuscule
Inherit : hérite de la valeur de l’élément parent
1
Propriétés CSS3
None : pas de transformation du texte. Utile pour annuler
une transformation par défaut donnée par héritage
Permet d’ajouter ou d’enlever des décorations à nos textes. Cette
propriété accepte une des valeurs suivantes :
Underline : le texte sera souligné
Overline : une ligne apparaît au-dessus du texte
text-decoration Line-through : le texte sera barré
Inherit : hérite de la valeur de l’élément parent
None : pas de décoration
Cette propriété va par exemple nous permettre d’enlever le
soulignement automatique qui apparaît dès que l’on créé un lien.
text-indent Permet de décaler un texte vers la droite. Elle accepte des valeurs
en % ou en px. On peut lui attribuer des valeurs négatives afin de
décaler un texte vers la gauche
text-shadow Permet de créer des ombres autour des textes afin que ceux-ci se
détachent de l’arrière-plan. Il faut indiquer 4 valeurs dans un ordre
précis à cette propriété afin qu’elle fonctionne correctement :
1- La projection horizontale de l’ombre
2- La projection horizontale de l’ombre
3- Le rayon de projection de l’ombre (le radius) en px)
4- La couleur de l’ombre
4- Gestion des espaces au sein d’un texte
line-height Permet de choisir la distance ou l’écartement entre deux
lignes de texte. Elle accepte des valeurs absolues ou relatives.
letter-spacing et Permettent respectivement de définir l’espace entre les
word-spacing lettres et entre les mots dans un texte
5- Exemples
font-style
<head> <style>
.p1 { font-style : italic ;}
.p2 {font-style :oblique ;}
.p3 {font-style :normal ;}
</style> </head>
<body>
<p class= "p1"> Para 1</p>
<p class= "p2"> Para 2</p>
<p class= "p3"> Para 3</p>
<p> Para 4</p>
</body>
font-weight
2
Propriétés CSS3
<head> <style>
.p1 { font-weight : bold;}
.p2 { font-weight :400 ;}
</style> </head>
<body>
<p class= "p1"> Para 1</p>
<p class= "p2"> Para 2</p>
<p> Para 3</p>
</body> </html>
text-transform
<head> <style>
.p1 { text-transform : lowercase;}
.p2 { text-transform : uppercase;}
.p3 {text-transform : capitalize;}
</style> </head>
<body>
<p class= "p1"> Para 1</p>
<p class= "p2"> Para 2</p>
<p class="p3"> Para 3</p>
</body>
text-decoration
<head> <style>
.p1 {text-decoration : underline;}
.p2 {text-decoration : line-
through;}
.p3 {text-decoration : overline;}
a {text-decoration : none;}
</style></head>
<body >
<p class= "p1"> Para 1</p>
<p class= "p2"> Para 2</p>
<p class="p3"> Para 3</p>
<a href=""> lien sans soulignement
</a>
</body>
text-indent
<head> <style>
.p1 { text-indent :-50px;}
.p2 { text-indent : 20px;}
.p3 { text-indent : 40px;}
</style> </head>
<body style="font-size:40px">
<p class= "p1"> Para 1</p>
<p class= "p2"> Para 2</p>
3
Propriétés CSS3
<p class="p3"> Para 3</p>
</body>
text-shadow
<head> <style>
.p1 {text-shadow:1px 5px 10px
red;}
.p2{text-shadow:-5px 10px 5px
blue;}
</style> </head>
<body style="font-size:40px">
<p class= "p1"> Para 1</p>
<p class= "p2"> Para 2</p>
</body>
line-height
<head> <style>
.p1 { line-height :20px;}
.p2 { line-height :40px;}
</style> </head>
<body >
<p class= "p1"> Para 1 avec <br>
espace entre les lignes de
20px</p>
<p class= "p2"> Para 2 avec <br>
espace entre les lignes de40px</p>
</body>
letter-spacing et word-spacing
<head> <style>
.p1 { letter-spacing :5px;
word-spacing:20px;}
.p2 { letter-spacing :10px;
word-spacing:20px;}
</style> </head>
<body >
<p class="p1"> Para 1 spacing </p>
<p class="p2"> Para 2 spacing </p>
</body>
Partie 2 : Le modèle des boîtes en CSS
1- Les bordures
Il est possible de définir les bordures d’un élément de différentes manières en CSS :
soit en utilisant les trois propriétés border-style, border-width et border-
color, soit un utilisant directement la notation courte border.
Exemple :
4
Propriétés CSS3
<html>
<head> <style>
.p1 {
background-color:pink;
width: 400px;
border: 10px solid black;}
.p2 {
background-color:pink;
width: 400px;
border-width: 10px ;
border-style: solid;
border-color : black;}
</style> </head>
<body >
<p class= "p1"> Para 1 spacing </p>
<p class= "p2"> Para 2 spacing </p>
</body> </html>
2- Les styles de bordures
La propriété border-style peut prendre huit valeurs différentes qui définissent
l’allure générale (le style) de la bordure.
Exemple :
<html>
<head> <style>
.p1 {
background-color:pink;
width: 400px;
border: 10px ridge black; }
.p2 {
background-color:pink;
5
Propriétés CSS3
width: 200px;
border-width: 8px ;
border-style: dashed;
border-color :black; }
</style> </head>
<body >
<p class= "p1"> Para 1 spacing </p>
<p class= "p2"> Para 2 spacing </p>
</body> </html>
3- Les bordures arrondies
Il est possible de créer des bordures arrondies avec la propriété border-radius.
Cette propriété prend une valeur en pixels qui correspond à la valeur du radius de la
bordure, et elle est utilisée avec la propriété border.
Exemple :
<html>
<head> <style>
.p1 {
background-color:pink;
width: 400px;
border: 10px dashed black;
border-radius: 20px;}
</style> </head>
<body >
<p class= "p1"> Para 1 spacing </p>
</body> </html>
4- Les ombres des boites : la propriété box-shadow
Il est possible de créer des ombres autour des boîtes (à l’extérieur ou à l’intérieur
des bordures) grâce à la propriété CSS box-shadow. Tout comme la propriété text-
shadow, box-shadow va prendre quatre valeurs différentes dans l’ordre suivant :
- Le déplacement horizontal (vers la droite ou la gauche) de l’ombre ;
- Le déplacement vertical (vers le bas ou le haut) de l’ombre ;
- Le rayon de propagation de l’ombre ;
- La couleur de l’ombre.
Exemple :
<html>
<head> <style>
.p1 { background-color:pink;
width: 400px;
border: 10px dashed black;
border-radius: 20px;
box-shadow: 10px 5px 9px orange; }
</style> </head>
6
Propriétés CSS3
<body >
<p class= "p1"> Para 1 spacing </p>
</body> </html>
5- Les images de fond en CSS
La propriété background-image permet d’ajouter une image de fond derrière un
élément. Si l’image de fond est plus petite que l’élément auquel on l’applique, elle
sera dupliquée par défaut pour « remplir » tout le fond de l’élément.
Exemple :
<html>
<head> <style>
body {
background-
image:url("papillon.png");
}
</style></head>
<body >
</body></html>
Exemple :
<html>
<head> <style>
body {
background-image:
url("papillon.png");
background-size:100%;
background-repeat:
no-repeat;}
</style></head>
<body >
</body></html>
Partie 3 : Les tableaux en CSS
1- Ajouter une bordure à un tableau
Si vous ne spécifiez pas de bordure pour la table, elle sera affichée sans frontières.
Une frontière est définie en utilisant la propriété CSS « border » :
Exemple 1
<html>
<head> <style>
table{ border : 3px solid red;}
</style> </head>
<body >
<table>
<tr>
7
Propriétés CSS3
<th> Nom </th><th> Prenom </th>
</tr> <tr>
<td> Ben Foulen </td><td> Foulen</td>
</tr>
</table>
</body></html>
Exemple 2
<html>
<head> <style>
table, th, td
{ border : 3px solid red;}
</style> </head>
<body >
<table>
<tr>
<th> Nom </th> <th> Prenom </th>
</tr> <tr>
<td> Ben Foulen </td><td> Foulen</td>
</tr>
</table>
</body></html>
2- Ajouter une bordure à un tableau
Si vous voulez que les frontières des cellules et du tableau se confondent, utilisez
alors la propriété CSS border-collapse.
Exemple :
table, th, td {
border: 1px solid black;
border-collapse: collapse; }
3- Espace entre contenu d’une cellule et ses frontières : padding
La propriété padding spécifie l’espace entre le contenu de la cellule et ses
frontières.
Exemple :
th, td {padding: 20px;}
