Bases
|
balise { propriété: valeur; }
.classe { propriété: valeur; }
#id { propriété: valeur; }
[attribut] { propriété: valeur; }
|
Et
|
b.c { propriété: valeur; }
#i.c { propriété: valeur; }
.c1.c2 { propriété: valeur; }
|
Ou
|
.c1, .c2 { ... }
|
Enfant, descendant
|
b1 b2 { propriété: valeur; }
b1>b2 { propriété: valeur; }
b:first-child
b:last-child
b:nth-child(2)
b:first-child + b { ... }
b:nth-child(2n) { ... }
b:nth-last-child(2)
|
Parent
|
b1:has(b2) { propriété: valeur; }
|
|
[a] { propriété: valeur; }
:not([a]) { propriété: valeur; }
b[a] { propriété: valeur; }
b[a=v] { propriété: valeur; }
b[a~=v1] { propriété: valeur; }
b[a^="v1"] { propriété: valeur; }
b[a*="v1"] { propriété: valeur; }
|
Actions
|
::-moz-selection { background: black; color: white; }
|
Autres
|
b:not(.c) { ... }
b:not(.c):not(.d) { ... }
b1+b2 { propriété: valeur; }
b1~b2 { propriété: valeur; }
b:nth-of-type(2) { ... }
b:nth-last-of-type(2)
b:nth-of-type(n+2)
b:nth-last-of-type(n+2)
b:after { content:... }
input:focus { }
input:not(:focus) { }
|
color, background-color, min-width, display, visibility, border-radius
color |
couleur d'avant-plan
|
background-color |
couleur d'arrière-plan
|
min-height; min-width |
hauteur ou largeur minimal
|
display |
type de box généré
- none: supprimé (l'espace n'est pas conservé)
- inline: pas de retour à la ligne avant et après (box par défaut)
- block: retour à la ligne avant et après
- inline-block: l'élément est inline et l'intérieur de l'élément est block. Utile pour avoir des éléments inline avec une width.
|
visibility |
définit si l'élément est affiché ou non
- hidden: caché (l'espace est conservé)
- visible
|
border-radius |
arrondis sur les blocks
|
 |
Il n'est pas possible de définir le width d'un élément inline (ex: span) |
w3schools
Margin, Padding, Border
|
5px 5px 5px 5px → top right bottom left 5px 10px 20px → top right&left bottom 5px 10px → top&bottom right&left 5px → top&bottom&right&left
|
|
margin-top: 1px;
padding-bottom: 2px;
border: 1px solid #000;
border-bottom: 2px solid #603913;
border-width: 5px;
border-style: dotted solid double dashed;
border-radius: 15px;
border-radius: 40px 10px;
|
Border Style
|
Rendu
|
solid |
ligne
|
none |
pas de bordure
|
dotted |
pointillés
|
dashed |
tirets
|
double |
ligne double
|
dotted solid double dashed |
pointillés en haut, ligne à droite, ligne double en bas, tirets à gauche
|
fixed
Positionné par rapport à la fenêtre, ne bouge pas lors du scroll.
L'élément sort du layout et n'est plus considéré comme prenant de la place par rapport aux autres éléments.
|
#column {
position: fixed;
top: 0;
background-color: #333333;
}
|
relative
Déplace un élément par rapport à sa position normale.
|
#element {
position: relative;
left: 100px;
top: -200px;
}
|
 |
Laisse un espace vide là ou l'élément aurait du se trouver. |
absolute
Positionné par rapport au premier élément parent positionné, à défaut le conteneur initial.
L'élément sort du layout et n'est plus considéré comme prenant de la place par rapport aux autres éléments.
|
#element {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -200px;
}
|
Image
|
img {
max-width: 100%;
max-height: 100%;
}
|
Background-image
|
background-color: black;
background-image: url("mon-image.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 400px;
|
|
.conteneur {
overflow: hidden;
margin: 0;
}
.conteneur > img {
display: block;
width: 100%;
margin: -6% 0;
}
|
Texte
|
color: black;
text-decoration: underline;
text-decoration: line-through;
text-decoration: blink;
line-height: 150%;
letter-spacing: 1px;
letter-spacing: normal;
background-image: url(mon_image.gif);
background-repeat: no-repeat;
padding-left: 11px;
|
|
text-align: left / right / center / justify;
float: left / right;
|
|
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
|
Retrait
|
text-indent:10px;
text-indent:-10px;
padding-left:10px;
|
Ajoutez du texte
|
#monlabel:after { content: "Nouveau texte"; }
|
Utilisez after ou before.
Attribut content
Remplacer du texte
Il n'est pas possible à proprement parler de remplacer du texte en CSS, mais voici une astuce qui permet de faire sortir du flux le texte à remplacer et d'ajouter à la suite le nouveau texte.
|
#monlabel { text-indent: -10em; }
#monlabel:after { content: "Nouveau texte"; padding-left: 1em; }
|
|
input::placeholder {
color: blue;
opacity: 1;
}
|
|
font-family: "DejaVu Sans", sans-serif;
font-size: xx-large x-large large medium small x-small xx-small;
font-size: 12px;
font-size: clamp(1.5rem, 2.5vw, 4rem);
font-weight: bold;
font-style: italic;
|
- Serif : avec des petits traits sur les caractères
- Times New Roman, Times
- Georgia
- Palatino Linotype, Book Antiqua, Palatino
- Sans-serif : sans les petits traits sur les caractères
- Arial, Helvetica
- Arial Black, Gadget
- Verdana, Geneva
- Comic Sans MS, cursive
- Monospace : tous les caractères ont la même largeur
- Courier New, Courier
- Consolas, Lucida Console, Monaco
Fonts embarqués
Télécharger des fonts ralentit l'affichage de la page.
Comment utiliser une fonte «non-standard» sur un site Web ?
|
@font-face {
font-family:'Nom du font';
font-weight:normal;
font-style:normal;
src:url('chemin/font.eot');
src:local('font'), url('chemin/font.woff') format('woff');
}
|
Formats :
woff |
woff
|
ttf |
truetype
|
otf |
opentype
|
svg
|
eot
|
Téléchargez des fonts libre de droits sur fontex.
Ajoutez des Google fonts au site web
Récupérez l'url du google font à ajouter.
Puis l'ajoutez au site web via CSS ou HTML, exemple avec le font UnifrakturMaguntia :
|
@import url("http://fonts.googleapis.com/css?family=UnifrakturMaguntia&subset=latin");
|
|
<link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia&subset=latin'
rel='stylesheet' type='text/css'>
|
px |
taille d'un pixel.
|
cm, mm, in |
1in = 96px = 2.54cm
|
em |
relatif à la taille de la police de l'élément courant. Si la police est à 12px alors 1em = 12 px.
|
rem |
relatif à la taille de la police de l'élément root.
|
vw |
relatif en % à la largeur du viewport (taille de la fenêtre)
|
vh |
relatif en % à la hauteur du viewport (taille de la fenêtre)
|
Débordement
|
display: block;
max-width: 100px;
overflow: auto;
|
overflow
|
Comportement si le contenu déborde
|
visible |
débordement autorisé (défaut)
|
hidden |
les parties des éléments qui débordent sont coupées et masquées
|
scroll |
les parties des éléments qui débordent sont coupées et une barre de défilement est ajoutée
|
auto |
les parties des éléments qui débordent sont coupées et une barre de défilement est ajoutée si nécessaire
|
table
|
table {
width: 100%;
table-layout: fixed;
}
table td:first-child {
width: 40px;
}
div.class {
overflow: auto;
}
|
texte
|
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
|
white-space
|
Description
|
normal |
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
|
nowrap |
Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is encountered
|
pre |
Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the pre tag in HTML
|
pre-line |
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
|
pre-wrap |
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
|
Bordures
|
table { border: 1px solid black; }
table, th, td { border: 1px solid black; }
table, th, td { border: 1px solid black; }
table { border-collapse:collapse; }
|
Alignement du texte dans sa cellule
|
td { text-align: center; }
td { vertical-align: middle; }
|
Equivalent de cellpadding
|
th, td { padding: 10px; }
|
Attributs non-css
cellpadding, cellspacing, frame, rules
voir HTML#Tableau
scrollbar dans une cellule
|
td {
width: 600px;
display: block;
overflow: auto;
}
|
|
.container {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
}
|
Propriété
|
Description
|
Valeurs
|
flex-direction |
sens d'affichage |
- row (distribution horizontale, valeur par défaut)
- row-reverse (distribution horizontale inversée)
- column (distribution verticale)
- column-reverse (distribution verticale inversée)
|
flex-wrap |
distribution sur une ou plusieurs lignes |
- nowrap (les éléments ne passent pas à la ligne, valeur par défaut)
- wrap (les éléments passent à la ligne dans le sens de lecture)
- wrap-reverse (les éléments passent à la ligne dans le sens inverse)
|
flex-flow |
regroupe les propriétés flex-direction et flex-wrap
|
justify-content |
alignement dans l'axe primaire |
- flex-start (éléments positionnés au début du sens de lecture, valeur par défaut)
- flex-end (éléments positionnés à la fin)
- center (position centrale)
- space-between (répartition “justifiée”)
- space-around (variante de répartition “justifiée”)
|
align-items |
alignement dans l'axe secondaire |
- flex-start (au début)
- flex-end (à la fin)
- center (au centre)
- baseline (généralement identique à flex-start)
- stretch (étirés dans l’espace disponible, valeur par défaut)
|
gap |
espace entre les éléments
|
flex-grow |
ratio d'étirement dans l'espace restant par rapport aux autres éléments |
0 par défaut, ratio
|
flex-shrink |
ratio de réduction par rapport aux autres éléments |
1 par défaut, ratio
|
flex-basis |
taille initiale de l’élément avant que l’espace restant ne soit distribué |
auto par défaut, taille (px)
|
flex |
regroupe les propriétés flex-grow, flex-shrink, flex-basis |
0 1 auto par défaut, les items occupent la taille minimale de leur contenu.
|
flex avec une liste
|
ul {
display: flex;
padding-left: 0;
}
li {
list-style: none;
}
|
|
.class:hover {
cursor: pointer;
cursor: default;
cursor: text;
cursor: wait;
}
|
|
background-color: #3F3F3F;
background-color: rgb(63, 63, 63);
background-color: rgba(63, 63, 63, 0);
background-color: hsl(0, 0, 25%);
background-color: hsla(0, 0, 25%, 0);
background-color: black;
|
Noms des couleurs
Transparence
|
opacity: 0.5;
background-color: rgba(255, 255, 255, 0.5);
|
Dégradé
Ultimate CSS Gradient Generator
|
background: white;
background: linear-gradient(left, white 0%, black 100%);
background: -moz-linear-gradient(left, white 0%, black 100%);
background: -ms-linear-gradient(left, white 0%, black 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='black', GradientType=1);
background: -webkit-linear-gradient(left, white 0%, black 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(100%, black));
|
Zoom
|
body {
zoom: 2;
-moz-transform: scale(2);
-moz-transform-origin: 0 0;
}
|
How can I zoom an HTML element in Firefox
Rotation
|
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
|
|
div {
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
div {
transition-property: top, left;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;
}
|
transition-timing-function
|
@keyframes mon_animation
{
0% {font-size: 100%;}
100% {font-size: 400%;}
}
#mon_texte {
animation-name: mon_animation;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
|
Ceaser CSS Easing Animation Tool
Centrer horizontalement un bloc
|
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
|
Centrer verticalement un bloc
|
vertical-align: middle;
|
Comment centrer verticalement sur tous les navigateurs ?
Centrer la balise body
|
html, body {
height: 100%;
width: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
|
Aligner un bloc à droite
|
float: right;
position: absolute;
right: 0px;
|
|
box-shadow: 0px 0px 7px 1px black;
|
- h-shadow → position horizontale
- v-shadow → position verticale
- blur → distance de flou (0px par défaut, pas de flou)
- spread → taille de l'ombre (0px par défaut, même taille que l'original)
- color (noir par défaut)
- inset → ombre externe (outset par défaut) ou interne (inset)
Remplacez une image
|
img {
width: 0;
height: 0;
padding: 32px;
background: url("nouvelle-image.png");
}
|
Superposer 2 div
|
#div1, #div2 {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#div1 {
top: 50%;
}
|
Important
|
#id { display: none !important; }
|
Media
Permet d'appliquer un style en fonction du media :
- screen → ordinateur
- print → imprimante, pdf
|
@media print {
body { ... }
}
@media screen {
body { ... }
}
@media screen and (max-width : 320px){
body { ... }
}
@media screen and (min-width : 320px){
body { ... }
}
|
|
<head>
<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
|
Colonnes
|
.multicolumns {
columns: 2;
-moz-columns: 2;
-webkit-columns: 2;
column-gap: 50px;
-moz-column-gap: 50px;
-webkit-column-gap: 50px;
}
|
|
<div class="multicolumns">
<p>Texte</p>
<p>Texte</p>
<p>Texte</p>
<p>Texte</p>
</div>
|
float
|
<div style="width:20%; float:right;"> ... </div>
<div style="width:80%;"> ... </div>
|
4 Methods For Creating Equal Height Columns In CSS
Equal Height Columns with Cross-Browser CSS
Hyperlink: balise a
|
a {
outline: none;
}
a {
color: inherit;
}
a:hover {
text-decoration: none;
}
a:link {
color: cyan;
}
a:visited {
color: cyan;
}
|
Lien d'une couleur et souligné d'une autre couleur
|
<a href="...">
<span>...</span>
<span>...</span>
</a>
|
|
a, a:visited {
color: blue;
}
a span {
color: white;
}
|
|
ul {
list-style-type: square;
list-style-image: url(bullet.gif);
}
ul {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 0;
margin-left: .2em;
}
ul > li {
background-image: url(icon.svg);
background-size: 1em;
background-repeat: no-repeat;
background-position: 0 .2em;
padding-left: 1.4em;
}
|
Importer d'autres feuilles CSS
|
@import url("monstyle.css");
|
Debugger
Pour Firefox : add-on Firebug
Pour les autres navigateurs : Firebug Lite. Ajouter la fonction javascript dans un marque-page → aller sur la page à debugger et ouvrir le marque-page.
Réduire la taille d'un fichier css (minify)
|
sudo pacman -S esbuild
esbuild --minify file.css --outfile=file.min.css
|
clean-css
|
npm -g install clean-css-cli
cleancss -o mon-fichier-min.css mon-fichier.css
|