EPI Digital School 3ème Ing TC

Liste Des Propriétés CSS

I. Formatage du texte
Type de
propriété Description
formatage
Une valeur obsolue :
en pixels(px), en centimètres(cm) ou millimètres(mm) en
pourcentage (80%, 130%…) ou en taille normale (1em)
Une valeur relative :
La taille font-size  xx-small : minuscule ;
 x-small : très petit ;
 small : petit ;
 medium : moyen ;
 large : grand ;
 x-large : très grand ;
 xx-large : gigantesque.

Les polices les plus courantes

 Arial ;
 Arial Black ;
 Comic Sans MS ;
 Courier New ;
 Georgia ;
 Impact ;
 Times New Roman ;
La police font-family  Trebuchet MS ;
 Verdana.

{font-family: police1, police2, police3, police4;}

Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a
pas, il essaiera la police2. S'il ne l'a pas, il passera à
la police3, et ainsi de suite.
En général, le tout dernier est le serif, ce qui correspond à
une police par défaut (qui ne s'applique que si aucune autre
police n'a été trouvée).
 italic : le texte est mis en italique.
 oblique : le texte est passé en oblique (les lettres sont
font-style penchées, le résultat est légèrement différent de
Italique
l'italique proprement dit).
 normal : le texte sera normal (par défaut). Cela vous
permet d'annuler une mise en italique.
Mettre en gras font-weight  bold : le texte sera en gras ;
 normal : le texte sera écrit normalement (par défaut).
Petites  small-caps : petites capitales
font-variant
Capitales  normal : normal (par défaut)

Responsable : Neila Hochlef Page -1

EPI Digital School 3ème Ing TC
 underline : souligné.
 line-through : barré.
 overline : ligne au-dessus.

 blink : clignotant. Ne fonctionne pas sur tous les

Soulignement et
navigateurs (Internet Explorer et Google Chrome,
autres text-decoration
décorations notamment).
 none : normal (par défaut).
Applique une indentation à la première ligne du paragraphe.
Exemple :
Indentation du
text-indent p{
texte
text-indent : 30px;
}
 left : texte à gauche
 center : texte centré.
L'alignement text-align
 right : texte à droite.
 justify : le texte sera « justifié ».
 uppercase : tout mettre en majuscules
text-  lowercase : tout mettre en minuscules
Capitales
transform  capitalize : début des mots en majuscules
 none : normal (par défaut)
La valeur de la propriété est simplement celle de
l'espacement désiré.
Espacement
des lettres letter-spacing h1 {
letter-spacing: 6px;
}
prend quatre valeurs dans l'ordre suivant :

1. le décalage horizontal de l'ombre ;

2. le décalage vertical de l'ombre ;
L’ombre du 3. l'adoucissement du dégradé ;
texte 4. la couleur de l'ombre.
text-shadow
Exemple :
p
{
text-shadow: 2px 2px 4px black;
}

Les propriétés qui peuvent être définies, sont (dans l'ordre):

"font-style font-variant font-weight font-size/line-height font-
family"

Attention exception : le nom de la police (font-family) doit

Méga-
être placé en dernier dans la liste dans tous les cas.
propriété de font Vous n'êtes pas obligés de mettre une valeur de chacune
de ces propriétés.
police
Exemple :
font: bold, 16px, Arial; /-- ! Cela mettra votre texte en gras,
16 pixels, Arial.--/

Responsable : Neila Hochlef Page -2

EPI Digital School 3ème Ing TC

II. La couleur et le fond

Type de formatage propriété Description
 choisir une couleur en tapant son nom.
Exemple  color: maroon;
 Ou utiliser La notation hexadécimale
Couleur du texte color
Exemple  color: #FFFFFF;
 La méthode RGB
Exemple  color: rgb(240,96,204);

background- indiquer une couleur de fond, Elle s'utilise de la même

Couleur de fond manière que la propriété color
color
permet d'indiquer le niveau d'opacité (c'est l'inverse de la
transparence).
 Opacity : 1  l'élément sera totalement opaque : c'est
le comportement par défaut.
La transparence opacity
 Opacity : 0 , l'élément sera totalement transparent.

Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi,

avec une valeur de 0.6, votre élément sera opaque à
60%…

III. Images de fond

Type de
propriété Description
formatage
Comme valeur, on doit renseigner url("nom_de_l_image.png").
Appliquer une background- Exemple :
image de fond image background-image: url("neige.png");
Deux valeurs sont disponibles :
Pour « fixer » le background-
 fixed : l'image de fond reste fixe ;
fond attachment
 scroll : l'image de fond défile avec le texte (par défaut).

Par défaut, l'image de fond est répétée en mosaïque.

Répétition du background-
 no-repeat : le fond ne sera pas répété. L'image sera donc
fond repeat
unique sur la page.

 repeat-x : le fond sera répété uniquement sur la première ligne,

horizontalement.

 repeat-y : le fond sera répété uniquement sur la première

colonne, verticalement.
 repeat : le fond sera répété en mosaïque (par défaut).

Responsable : Neila Hochlef Page - 3

EPI Digital School 3ème Ing TC

Cette propriété n'est intéressante que si elle est combinée

avec background-repeat : no-repeat; (un fond qui ne se répète
pas)
Position du fond background- 2 façons possibles :
position * En notant une distance en px ou %, par rapport au coin
supérieur gauche (à gauche en haut) de la page ou du
paragraphe

background-position: 30px 50px;

* Il est aussi possible d'utiliser des valeurs une pour la verticale et
une pour l'horizontale :

 top : en haut, verticalement

 center : au milieu, verticalement
 bottom : en bas, verticalement
 left : à gauche, horizontalement
 center : au centre, horizontalement
 right : à droite, horizontalement
Exemple : background-position: top right;
 aligner une image en haut à droite

une sorte de « super-propriété » permettant de combiner

Combiner les plusieurs propriétés en rapport avec le fond, comme : background-
propriétés background image, background-repeat,background-attachment et background-
position.
Exemple  background: url("soleil.png") fixed no-repeat top right;

IV. Les bordures :

Type de
propriété Description
formatage
La largeur : indiquez la largeur de votre bordure. Mettez
border-width une valeur en pixels (comme 2px).
La couleur : c'est la couleur de votre bordure. Utilisez,
comme on l'a appris, soit un nom de couleur (black, red,…),
border-color
soit une valeur hexadécimale (#FF0000), soit une valeur
RGB (rgb(198, 212, 37)).
Le type de bordure : là, vous avez le choix. Votre bordure
peut être un simple trait, ou des pointillés, ou encore des
tirets, etc. Voici les différentes valeurs disponibles :

Bordures  none : pas de bordure (par défaut) ;

standard
 solid : un trait simple ;
border-style
 dotted : pointillés ;

 dashed : tirets ;

 double : bordure double ;

 groove : en relief ;

Responsable : Neila Hochlef Page - 4

EPI Digital School 3ème Ing TC

 ridge : autre effet relief ;

 inset : effet 3D global enfoncé ;

 outset : effet 3D global surélevé.

 border-top  bordure du haut

 border-bottom  bordure du bas ;
super-propriétés
 border-left  bordure de gauche ;
de Position : En
haut, à droite, à  border-right  bordure de droite.
gauche, en
bas… Exemple : 
border-left: 2px solid black;
border-right: 2px solid black;

Méga-propriété border border: 3px blue dashed;

permet d'arrondir facilement les angles de n'importe quel

border-radius
élément. Il suffit d'indiquer la taille (« l'importance ») de
l'arrondi en pixels :
p
{
border-radius: 10px;
Bordures }
On peut aussi préciser la forme de l'arrondi pour chaque
arrondies
coin. Dans ce cas, indiquez quatre valeurs :

border-radius: 10px 5px 10px 5px;

Les valeurs correspondent aux angles suivants dans cet
ordre :

1. en haut à gauche ;
2. en haut à droite ;
3. en bas à droite ;
4. en bas à gauche.

Responsable : Neila Hochlef Page - 5

EPI Digital School 3ème Ing TC

V. Propriétés des listes

Type de
Propriété Valeurs possibles
formatage
Pour les listes non ordonnées (<ul>) :
 disc : un disque noir (par défaut).
 circle : un cercle.
 square : un carré.
 none : aucune puce ne sera utilisée.
Pour les listes ordonnées (<ol>) :
 decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
 decimal-leading-zero : des nombres commençant
Type de liste list-style-type par zéro (01, 02, 03, 04, 05...).
 upper-roman : numérotation romaine, en majuscules
(I, II, III, IV, V...)
 lower-roman : numérotation romaine, en minuscules
(i, ii, iii, iv, v...)
 upper-alpha : numérotation alphabétique, en
majuscules (A, B, C, D, E...)
 lower-alpha : numérotation alphabétique, en
minuscules (a, b, c, d, e...)
 lower-greek : numérotation grecque.

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

list-style-image
personnalisée list-style-image: url("images/puce.png");
Vous pouvez réunir les valeurs de list-style-type, list-style-
position et list-style-image. Vous n'êtes pas obligés de
Méga-propriété de list-style
mettre toutes les valeurs, et l'ordre n'a pas d'importance.
liste
list-style: inside square;

VI. Propriétés des Tableaux

Type de
Propriété Valeurs possibles
formatage
 permet de déplacer l'élément caption
Emplacement de  prend 4 valeurs : bottom, left, right, top.
la légende caption-side

 separate : les bordures du tableau et des cellules sont

Types de séparées (par défaut).
border-collapse
bordures  Collapse : les bordures de chaque cellule sont
fusionnées.

Espacement border-spacing: Xpx Ypx;

border-spacing (ou x représente la taille de l'espacement horizontal et y
entre les
le vertical).
cellules

Permet d'afficher ou de masquer les cellules vides.

Les cellules empty-cells La propriété CSS prend soit comme valeur hide,
vides soit show.

Responsable : Neila Hochlef Page - 6