« CSS » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 350 : Ligne 350 :
* <span style="font-family:monospace; font-size:24px;">Monospace</span> : tous les caractères ont la même largeur
* <span style="font-family:monospace; font-size:24px;">Monospace</span> : tous les caractères ont la même largeur
** <span style="font-family:'Courier New',Courier,monospace; font-size:x-large;">Courier New, Courier</span>
** <span style="font-family:'Courier New',Courier,monospace; font-size:x-large;">Courier New, Courier</span>
** <span style="font-family:'Lucida Console',Monaco,monospace; font-size:x-large;">Lucida Console, Monaco</span>
** <span style="font-family:Consolas,'Lucida Console',Monaco,monospace; font-size:x-large;">Consolas, Lucida Console, Monaco</span>


== Fonts embarqués ==
== Fonts embarqués ==

Version du 14 avril 2020 à 15:01

Sélection d'éléments

Bases

Css.svg
balise { propriété: valeur; }
.classe { propriété: valeur; }
#id { propriété: valeur; }
[attribut] { propriété: valeur; }

Et

Css.svg
/* toutes les balises b appartenant à la classe c */
b.c { propriété: valeur; }

/* la balise ayant l'id i et appartenant à la classe c */
#i.c { propriété: valeur; }

/* toutes les balises appartenant aux deux classes c1 et c2 mais pas celles appartenant seulement à l'une des deux */
.c1.c2 { propriété: valeur; }

Ou

Css.svg
/*  toutes les balises appartenant à la classe c1 ou c2 */
.c1, .c2 { ... }

Enfant, descendant

Css.svg
/* toutes les balises b2 descendantes (enfants directes ou non) de balises b1 */
b1 b2 { propriété: valeur; }

/* toutes les balises b2 enfants directes (de 1er rang) de balises b1 */
b1>b2 { propriété: valeur; }

/* la balise b2 placée directement après une balise b1 au même niveau  */
b1+b2 { propriété: valeur; }

/* toutes les balises b2 placées après une balise b1 au même niveau  */
b1~b2 { propriété: valeur; }

Attribut

Css.svg
/* toutes les balises ayant un attribut a quelque soit sa valeur */
[a] { propriété: valeur; }

/* toutes les balises n'ayant pas un attribut a */
:not([a]) { propriété: valeur; }

/* toutes les balises b ayant un attribut a quelque soit sa valeur */
b[a] { propriété: valeur; }

/* toutes les balises b ayant un attribut a de valeur v */
b[a=v] { propriété: valeur; }

/* toutes les balises b ayant un attribut a dont la valeur contient v1 seule ou séparée par des espaces */
b[a~=v1] { propriété: valeur; }

/* toutes les balises b ayant un attribut a dont la valeur commence par v1 */
b[a^="v1"] { propriété: valeur; }

/* toutes les balises b ayant un attribut a dont la valeur contient v1 */
b[a*="v1"] { propriété: valeur; }

Actions

Css.svg
/* Rédefinit les couleurs du texte sélécionné (Pour Firefox) */ 
::-moz-selection { background: black; color: white; }

Autres

Css.svg
/* toutes les balises b qui n'appartiennent pas à la classe c */
b:not(.c) { ... }
b:not(.c):not(.d) { ... } /* ni à la classe d */

/* toutes les balises b premiers fils de leur parent */
b:first-child
/* toutes les balises b derniers fils de leur parent */
b:last-child

/* toutes les balises b 2ème fils de leur parent */
b:nth-child(2)
/* même chose en CSS 2 : toutes les balises b 2ème fils de leur parent */
b:first-child + b { ... }
/* toutes les balises b multiple de 2: 0,2,4,...  */
b:nth-child(2n) { ... }
/* toutes les balises b avant-derniers fils de leur parent */
b:nth-last-child(2)

/* toutes les 2ème occurrences de balises b (à la différence de nth-child seule les balises de type b sont prise en compte) */
b:nth-of-type(2) { ... }
/* toutes les avant-dernières occurrences de balises b */
b:nth-last-of-type(2)
/* toutes les occurrences de balises b sauf la première */
b:nth-of-type(n+2)
/* toutes les occurrences de balises b sauf la dernière */
b:nth-last-of-type(n+2)

/* Insert le contenu après chaque balise b */
b:after { content:... }
/* content:url(images/tape.gif);
   content:"Texte"; */

/* Quand le champs est sélectionné */
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

Margin-padding.png 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
Css.svg
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; /* arrondis */
border-radius: 40px 10px; /* arrondis effet vague */
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

Position

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.

Css.svg
#column {
    position: fixed; /* par opposition à static */
    top: 0; /* remonte l'élément au besoin */
    background-color: #333333; /* force une couleur de fond au cas ou d'autres éléments viendrait à le chevaucher (scroll) */
}

relative

Déplace un élément par rapport à sa position normale.

Css.svg
#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.

Css.svg
#element {
    /* placer l'élément en bas */
    position: absolute;
    bottom: 0;
    /* centrer l'élément */
    left: 50%;
    margin-left: -200px;
}

sticky

Image

Css.svg
/* forcer une image à se redimensionner en fonction de son conteneur */
img {
    max-width: 100%;
    max-height: 100%;
}

Background-image

Css.svg
/* définit une couleur du fond, si on veut autre chose que blanc */
background-color: black;
background-image: url("mon-image.jpg");
/* n'afficher l'image qu'une seule fois */
background-repeat: no-repeat;
/* fixe l'image, elle ne se déplace plus lors de scroll */
background-attachment: fixed;
background-position: center;
background-size: 400px;

Crop image

Css.svg
.conteneur {
    overflow: hidden;
    margin: 0;
}
.conteneur > img {
    display: block;
    width: 100%;
    margin: -6% 0;
}

Texte

Css.svg
color: black;

text-decoration: underline;     /* souligner */
text-decoration: line-through;  /* barrer */
text-decoration: blink;	        /* texte qui clignote */

line-height: 150%;              /* espacement entre les lignes */

letter-spacing: 1px;            /* Espacement entre les lettres */
letter-spacing: normal;         /* valeur par défaut */

/* ajouter une image a gauche du texte */
background-image: url(mon_image.gif);
background-repeat: no-repeat;
padding-left: 11px;

Position du texte dans son conteneur

Css.svg
text-align: left / right / center / justify;

float: left / right;

Ombre

Css.svg
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
/* décalage suivant X / décalage suivant Y / flou (0px par défaut) / couleur (noir par défaut) */

Retrait

Css.svg
/* Décalage à droite de la première ligne */
text-indent:10px;

/* Décalage à droite de toutes les lignes sauf la première */
text-indent:-10px;
padding-left:10px;

Ajoutez du texte

Css.svg
#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.

Css.svg
/* Décalage à gauche du texte à remplacer */
#monlabel { text-indent: -10em; }
/* Ajout du nouveau texte avec un padding à gauche si besoin */
#monlabel:after { content: "Nouveau texte"; padding-left: 1em; }

Style du texte par défaut (placeholder) d'un conteneur input

Css.svg
/* Firefox 51+ */
input::placeholder {
  color: blue;
  opacity: 1;
}

Fonts

Css.svg
/* Si la police DejaVu Sans n'est installé chez le client, la police suivante est utilisée
 * sans-serif désigne la police sans-serif par défaut du système */
font-family: "DejaVu Sans", sans-serif;

/* taille */
font-size: xx-large x-large large medium small x-small xx-small;
font-size: 12px;

/* gras */
font-weight: bold;

/* italique */
font-style: italic;

Familles

  • 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 ?

Css.svg
@font-face {
    font-family:'Nom du font';
    font-weight:normal; /* bold */
    font-style:normal; /* italic */
    src:url('chemin/font.eot'); /* compatibilité IE */
    src:local('font'), url('chemin/font.woff') format('woff');
    /* chargement du font en local ou depuis l'url qui peut être relative aux dossiers du serveur */
}

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 :

Css.svg
@import url("http://fonts.googleapis.com/css?family=UnifrakturMaguntia&subset=latin");
Html.svg
<link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia&subset=latin'
      rel='stylesheet' type='text/css'>

px, em, ex, cm

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

Css.svg
/* définir une taille maximale */
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

Css.svg
table {
    width: 100%;
    table-layout: fixed;
    /* à combiner avec white-space: pre-wrap et word-wrap: break-word */
}

/* la suite ne semble pas nécessaire */

/* définir la taille des lignes */
table td:first-child {
    width: 40px;
}
/* définir l'overflow sur la div contenue dans la cellule */
div.class {
    overflow: auto;
}

texte

Css.svg
/* retour à la ligne entre les mots (comportement par défaut), puis coupe les mots qui dépassent */
word-wrap: break-word;

/* pas de retour à la ligne entre les mots, coupe les mots qui dépassent, */
word-break: break-all;

/* ajoute des points de suspension pour indiquer que le texte a été tronqué. À utiliser avec overflow: hidden */
text-overflow: ellipsis;
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

Table

Bordures

Css.svg
/* bordure simple autour de la table */
table { border: 1px solid black; }

/* bordure autour de la table et bordures autours des cellules */
table, th, td { border: 1px solid black; }

/* bordure unique autour de la table et des cellules */
table, th, td { border: 1px solid black; }
table { border-collapse:collapse; }

Alignement du texte dans sa cellule

Css.svg
/* aligner horizontalement le contenu de la cellule (left, right, center) */
td { text-align: center; }

/* aligner verticalement le contenu de la cellule (top, middle, bottom) */
td { vertical-align: middle; }

Equivalent de cellpadding

Css.svg
th, td { padding: 10px; }

Attributs non-css

cellpadding, cellspacing, frame, rules voir HTML#Tableau

scrollbar dans une cellule

Css.svg
td {
    width: 600px; /* forcer la taille */
    display: block;
    overflow: auto; /* afficher une scrollbar si le contenu déborde */
}

flex

Css.svg
.container {
    display: flex;
    flex-direction: column; /*  */
}
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)
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

Css.svg
ul {
    display: flex;
    padding-left: 0;
}
li {
    list-style: none;
}

Souris / mouse

Css.svg
/* lorsque la souris se retrouve sur un élément de classe class, 
   le curseur devient une main, puis redevient une flèche une fois que la souris a quittée l'élément */
.class:hover {
    cursor: pointer;
}

Valeurs des couleurs

Css.svg
/* Hexadecimal */
background-color: #3F3F3F;

/* RGB */
background-color: rgb(63, 63, 63);
/* RGBA (canal alpha: opacité)*/
background-color: rgba(63, 63, 63, 0);

/* HSL: hue (teinte), saturation, lightness */
background-color: hsl(0, 0, 25%);
/* HSLA */
background-color: hsla(0, 0, 25%, 0);

/* Nom de couleur */
background-color: black;

Noms des couleurs

Transparence

Css.svg
opacity: 0.5;

/* background transparent mais pas le contenu */
background-color: rgba(255, 255, 255, 0.5);

Dégradé

Ultimate CSS Gradient Generator

Css.svg
/* gradient de gauche a droite de white vers black */

background: white; /* pour les browsers qui ne supportent pas CSS3 */

background: linear-gradient(left, white 0%, black 100%); /* W3C */

background: -moz-linear-gradient(left, white 0%, black 100%); /* FF3.6+ */

background: -ms-linear-gradient(left, white 0%, black 100%); /* IE10+ */
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='black', GradientType=1);

background: -webkit-linear-gradient(left, white 0%, black 100%); /* Chrome10+,Safari5.1+ */
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(100%, black));

Transformations 2D

Zoom

Css.svg
body {
    /* supporté par Chrome, Edge, IE, Safari */
    /* mais pas par Firefox ni Opera */
    zoom: 2;

    /* Pour Firefox transform scale peut être utilisé mais est appliqué après le rendu, alors que zoom est appliqué avant */
    -moz-transform: scale(2); /* x2 */
    -moz-transform-origin: 0 0; /* centrer le zoom */
}

How can I zoom an HTML element in Firefox

Rotation

Css.svg
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);

Transition

Css.svg
div {
    width: 100px;
    transition: width 2s;
    /* transition: property  duration  timing-function (ease par défaut)  delay (0s par défaut); */
}
div:hover {
    width: 300px;
}

div {
    transition-property: top, left;
    transition-duration: 2s;
    transition-timing-function: linear;
    /* linear, ease (ralenti un peu au début et plus à la fin), ease-in (ralenti au début), 
       ease-out (ralenti à la fin), ease-in-out (ralenti au début et à la fin) */
    transition-delay: 2s;
}

transition-timing-function

Animation

Css.svg
@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

Css.svg
margin-left: auto;
margin-right: auto;
/* pour une image */
display: block;

/* Autre solution (à mettre dans la balise contenante) */
text-align: center;

Centrer verticalement un bloc

Css.svg
vertical-align: middle;

Comment centrer verticalement sur tous les navigateurs ?

Centrer la balise body

Css.svg
html, body {   
    height: 100%;
    width: 100%;
}
html {
    display: table;
}
body {
    display: table-cell;
    vertical-align: middle;
}

Aligner un bloc à droite

Css.svg
/* avec float */
float: right;

/* avec position */
position: absolute;
right: 0px;

Ombre d'un bloc

Css.svg
box-shadow: 0px 0px 7px 1px black;
/* box-shadow: h-shadow v-shadow blur spread color inset; */
  • 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

Css.svg
img {
    width: 0; /* on masque l'ancienne image en réduisant sa taille à 0 */
    height: 0;
    padding: 32px; /* création d'un espace pour afficher la nouvelle image (ici 64x64) */
    background: url("nouvelle-image.png");
}

Superposer 2 div

Css.svg
#div1, #div2 {
    position: absolute; /* superpose les div */
    width: 100%;        /* ajuster la taille des div */
    height: 100%;
    text-align: center; /* centrer horizontalement le texte si les div en contiennent */
}

#div1 {
    top: 50%; /* positionner verticalement la div1 */
}

Important

Css.svg
#id { display: none !important; }

Media

Permet d'appliquer un style en fonction du media :

  • screen → ordinateur
  • print → imprimante, pdf
Css.svg
@media print {
    body { ... }
}
@media screen {
    body { ... }
}

@media screen and (max-width : 320px){
    body { ... }
}
@media screen and (min-width : 320px){
    body { ... }
}
Html.svg
<head>
    <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
    <link rel="stylesheet" media="print" href="print.css" type="text/css" />

Colonnes

columns

Css.svg
.multicolumns {
    columns: 2;
    -moz-columns: 2;
    -webkit-columns: 2;
    column-gap: 50px;
    -moz-column-gap: 50px;
    -webkit-column-gap: 50px;
}
Html.svg
<div class="multicolumns">
  <p>Texte</p>
  <p>Texte</p>
  <p>Texte</p>
  <p>Texte</p>
</div>

float

Html.svg
<!-- colonne de droite -->
<div style="width:20%; float:right;"> ... </div>
<!-- colonne centrale -->
<div style="width:80%;"> ... </div>

4 Methods For Creating Equal Height Columns In CSS
Equal Height Columns with Cross-Browser CSS

Hyperlink: balise a

Css.svg
/* masque les pointillés */
a {
    outline: none;
}

/* ne pas afficher le texte du lien en bleu */
a {
    color: inherit;
}

/* ne pas souligner le texte */
a:hover {
    text-decoration: none;
}

a:link {
    color: cyan;
}
a:visited {
    color: cyan;
}

Lien d'une couleur et souligné d'une autre couleur

Html.svg
<!-- si le lien est composé de span -->
<a href="...">
    <span>...</span>
    <span>...</span>
</a>
Css.svg
/* souligné bleu */
a, a:visited {
    color: blue;
}
/* texte blanc */
a span {
    color: white;
}

Puces des listes

Css.svg
ul {
    list-style-type: square;  /* types prédéfinis: disc, circle, square */
    list-style-image: url(bullet.gif);
}

/* pour une gestion plus fine des puces utiliser une background-image */
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

Css.svg
@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)

Bash.svg
# installer clean-css
npm -g install clean-css-cli

cleancss -o mon-fichier-min.css mon-fichier.css