Aide en ligne > Site > Guide CSS complet

Accès direct
Contact

Guide CSS complet

Dans cet article sont présentées plusieurs classe CSS qui permettent de styliser les textes riches présents sur le site.

Télécharger la version mémo

Alignements

text img

Flottants

.fl

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.fr

.fl

.clear
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.fl

.bfc
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Inline-block

.inbl .inbl .inbl

.inbl .w25 .inbl w33 .inbl

Flexbox

div span ...

.w33 .w33 .w33

.w200p .w33 stuff

div span .flex-item-fluid

.flex-item-fluid .flex-item-fluid .flex-item-fluid

div span .item-last

div span .item-first

.flex-item-center

Grilles

Grilles mono-ligne

div span img p ...

Grilles multi-lignes

div span img p ...

div span img p ... ... ... ...

div span img p ... ... ... ... ... ... ... ... ... ... ... ...

Ordonnancement

div span img p .item-first

.item-last span img p ...

Grilles responsives

div span img p ... ... ... ...

div span img .push ...

Tailles individuelles

.one-half ... ...

.one-sixth .one-sixth .two-thirds .one-third .two-thirds .one-quarter .two-quarters .full ...

Largeurs

Largeurs en %

.w10

.w20

.w25

.w33

.w40

.w50

.w60

.w66

.w70

.w80

.w90

.w100

.wauto

Largeurs en pixels (px)

.w50p

.w100p

.w150p

.w200p

.w300p

.w400p

.w500p

.w600p

.w700p

.w800p

.w960p

.mw960p

Marges externes (margin)

.mls

.mlm

.mll

.mrs

.mrm

.mrl

.mts

.mtm

.mtl

.mbs

.mbm

.mbl

.mas

.mam

.mal

.man

Variables (Sass)

Espacements

$tiny-value             : .5rem;
$tiny-plus-value        : .7rem;
$small-value            : 1rem;
$small-plus-value       : 1.5rem;
$medium-value           : 2rem;
$medium-plus-value      : 3rem;
$large-value            : 4rem;
$large-plus-value       : 6rem;
$extra-large-value      : 8rem;
$extra-large-plus-value : 12rem;
$ultra-large-value      : 16rem;
$ultra-large-plus-value : 20rem

Breakpoints

$tiny: 480px;
$small: 576px;
$medium: 768px;
$large: 992px;
$extra-large: 1200px;

Taille de police

$base-font-size : 1.6rem; // "16px" equivalent
$line-height  : 1.5;
$h1-size      : 3.2rem;
$h2-size      : 2.8rem;
$h3-size      : 2.4rem;
$h4-size      : 2.0rem;
$h5-size      : 1.8rem;
$h6-size      : 1.6rem;

Index

Aller plus loin