Explorateur CSS

Texte exemple

color black red blue green

style="color: black;"

p { color: black; }

Texte exemple

font-size 12px 16px 24px 32px

style="font-size: 12px;"

p { font-size: 12px; }

Texte exemple

font-weight normal bold lighter bolder

style="font-weight: normal;"

p { font-weight: normal; }

Texte exemple

font-style normal italic oblique initial

style="font-style: normal;"

p { font-style: normal; }

Texte exemple

text-decoration none underline line-through overline

style="text-decoration: none;"

p { text-decoration: none; }

Texte exemple

text-transform none uppercase lowercase capitalize

style="text-transform: none;"

p { text-transform: none; }

Texte exemple

letter-spacing normal 1px 2px 4px

style="letter-spacing: normal;"

p { letter-spacing: normal; }

Texte exemple

word-spacing normal 4px 8px 12px

style="word-spacing: normal;"

p { word-spacing: normal; }

Texte exemple

line-height normal 1.2 1.5 2

style="line-height: normal;"

p { line-height: normal; }

Texte exemple

text-align left center right justify

style="text-align: left;"

p { text-align: left; }

width 100px 200px 300px auto

style="width: 100px;"

img { width: 100px; }

height 100px 150px 200px auto

style="height: 100px;"

img { height: 100px; }

object-fit fill contain cover none

style="object-fit: fill;"

img { object-fit: fill; }

border-radius 0 10px 50% 100px

style="border-radius: 0;"

img { border-radius: 0; }

filter none grayscale(100%) sepia(100%) blur(4px)

style="filter: none;"

img { filter: none; }

opacity 1 0.75 0.5 0.25

style="opacity: 1;"

img { opacity: 1; }

Élément 1
Élément 2
Élément 3

list-style-type disc circle square decimal

style="list-style-type: disc;"

ul { list-style-type: disc; }

Élément 1
Élément 2
Élément 3

list-style-position inside outside initial inherit

style="list-style-position: inside;"

ul { list-style-position: inside; }

Élément 1
Élément 2
Élément 3

padding-left 0 20px 40px 60px

style="padding-left: 0;"

ul { padding-left: 0; }

Élément 1
Élément 2
Élément 3

text-align left center right justify

style="text-align: left;"

ul { text-align: left; }

Nom	Âge
Alice	25
Bob	30

border-collapse collapse separate initial inherit

style="border-collapse: collapse;"

table { border-collapse: collapse; }

Nom	Âge
Alice	25
Bob	30

border-spacing 0 5px 10px 15px

style="border-spacing: 0;"

table { border-spacing: 0; }

Nom	Âge
Alice	25
Bob	30

table-layout auto fixed initial inherit

style="table-layout: auto;"

table { table-layout: auto; }

Nom	Âge
Alice	25
Bob	30

width auto 100% 300px 600px

style="width: auto;"

table { width: auto; }

Nom	Âge
Alice	25
Bob	30

text-align left center right justify

style="text-align: left;"

table { text-align: left; }

Lien exemple

color blue red green black

style="color: blue;"

a { color: blue; }

Lien exemple

text-decoration none underline overline line-through

style="text-decoration: none;"

a { text-decoration: none; }

Lien exemple

font-weight normal bold lighter bolder

style="font-weight: normal;"

a { font-weight: normal; }

Lien exemple

font-style normal italic oblique initial

style="font-style: normal;"

a { font-style: normal; }

Lien exemple

text-transform none uppercase lowercase capitalize

style="text-transform: none;"

a { text-transform: none; }

Box 1

Box 2

Box 3

style="display: block;"

div { display: block; }

Voir sur MDN

Flex & Grid — Contrôles d'agencement

Item 1

Item 2

Item 3

flex-direction row column row-reverse column-reverse

Spécifie la direction principale dans laquelle les éléments flex sont placés.

style="flex-direction: row;"

div { flex-direction: row; }

Voir sur MDN

Item 1

Item 2

Item 3

justify-content flex-start center space-between space-around

Définit l'alignement des éléments enfants sur l'axe principal d'un conteneur flex ou grid.

style="justify-content: flex-start;"

div { justify-content: flex-start; }

Voir sur MDN

Item 1

Item 2

Item 3

align-items stretch center flex-start flex-end

Contrôle l'alignement des éléments enfants sur l'axe secondaire d'un conteneur flex ou grid.

style="align-items: stretch;"

div { align-items: stretch; }

Voir sur MDN

Item 1

Item 2

Item 3

gap 0 10px 20px 40px

Définit l'espacement entre les lignes et/ou colonnes dans les layouts flex ou grid.

style="gap: 0;"

div { gap: 0; }

Voir sur MDN

Animation

animation-name slide fade grow rotate

Nom de l’animation définie dans @keyframes.

style="animation-name: slide;"

div { animation-name: slide; }

Voir sur MDN

Animation

animation-duration 1s 2s 3s 5s

Durée que met l’animation pour s’exécuter.

style="animation-duration: 1s;"

div { animation-duration: 1s; }

Voir sur MDN

Animation

animation-timing-function ease linear ease-in-out steps(4)

Définit la vitesse de progression de l’animation.

style="animation-timing-function: ease;"

div { animation-timing-function: ease; }

Voir sur MDN

Animation

animation-iteration-count 1 2 infinite 3

Détermine le nombre de répétitions de l’animation.

style="animation-iteration-count: 1;"

div { animation-iteration-count: 1; }

Voir sur MDN

Explorateur CSS

Texte (p, h1-h6)

Image (img)

Liste (ul)

Tableau (table)

Lien (a)

Conteneur (div) — Principaux display

Flex & Grid — Contrôles d'agencement

Animations CSS

hover (:hover)

focus (:focus)

first-child (:first-child)

last-child (:last-child)

before (::before)

after (::after)

Texte (p, h1-h6)

Image (img)

Liste (ul)

Tableau (table)

Lien (a)

Conteneur (div) — Principaux display

Flex & Grid — Contrôles d'agencement

Animations CSS

hover (:hover)

focus (:focus)

first-child (:first-child)

last-child (:last-child)

before (::before)

after (::after)