proprietes-css.md 2.11 KB
Newer Older
Stéphane Bouvry's avatar
Stéphane Bouvry committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
% Mise en forme CSS
% Stéphane Bouvry
% 2018

# Introduction

## Un monde vaste

Il existe plusieurs 100ènes de propriétés CSS pour gérer la mise en forme des documents.

Nous aborderons ici quelques propriétés usuelles uniquement. Pour plus de détail sur les usages / problème de compatibilité,
le site : [MDN](https://developer.mozilla.org/fr/docs/Web/CSS) centralise une documentation en français exhaustive maintenue par une communauté de développeur (une sorte de wikipedia pour intégrateur Web).

## Préfixe

Les préfixes sont généralement utilisés pour garantir la viabilité d'un propriété sur des navigateurs dattés

ex : [Voir en bas de page](https://developer.mozilla.org/fr/docs/Web/CSS/filter) ou encore [CanIUse](https://caniuse.com)



# Aspect de la font

## font

[Propriété FONT](https://developer.mozilla.org/fr/docs/Web/CSS/filter)

 - `font-family` : Famille de la police de caractère (ou typo), `@font-face`
 - `font-size`: Taille (en EM, REM, PX, %)
 - `font-weight` : Graisse (bold, normal, 100 < 900)
 - `font-style` : italic | normal
 - `font-variant` : Petites capitales (Attention à la font)

## font sans font

 - `line-height` : Interlignage
 - `text-transform` : Capitale, UPPER, lower
 - `color` : #HEXA, rgb, rgba
 - `text-decoration` : underline, none, etc...


## Texte

- `white-space` : Gestion des blancs
- `letter-spacing` : Espacement des lettres
- `text-align` : left|right|center|justify
- `word-spacing` : Espacement des mots
- `letter-spacing` : Espacement des lettres
- `text-shadow` : Ombres/lumières


# Bloc

## Arrière plan

 - `background-color` : couleur
 - `background-repeat` : répétition
 - `background-position` : placement
 - `background-url` : url()
 - `background-size` : COVER / TAILLE

## Habillage

- `border` : Voir doc
- `padding` : espacement intérieur
- `margin` : espacement extérieur
- `border-radius` : Arrondis
- `box-shadow` : Ombre / lumière
- `opacity` : alpha
- `visibility` : hidden (on reviendra sur ça)
- `transform` : scale(X,Y), rotate(Ddeg), translate(X,Y), skew(Xdeg,Ydeg)
- `filter` : blur(PX), greyscale(%), contrast(%), saturate(%) etc...