Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:les_unites_en_css

Voir cette page sous forme de diaporama.

Les unités et valeurs en CSS

Sommaire

    • Les valeurs fixes : px et autres
    • Les valeurs proportionnelles
      • police : em et rem, “parent” : %,au “viewport” : vw, vh,…
  • Les valeurs de couleurs rgb(), hsl(), rgba(), hsla()
  • Les valeurs spéciales
    • une ressource : url() et les data URI
    • les gradients CSS
    • la valeur d'un attribut : attr()
    • un calcul : calc()
    • Une variable : var()

Longueurs fixes (''px'')

  • Pour un affichage écran : toutes sont équivalentes
.px { width: 100px;}
.in { width: 1.042in;} /*100/96*/
.pt { width: 75pt;} /*100/96*72*/
.pc { width: 6.25pc;} /*100/96*72/12*/
.cm { width: 2.646cm;} /*100/96*2.54*/
.mm { width: 26.46mm;} /*100/96*2.54*10*/
  • Utilisé les px et oublier les autres.

PX, Pixels et Hi-DPI

''1px'' != un pixel à l'écran !

  • De plus en plus fréquent (“Retina”, “Hi-DPI”,… )
  • On peut le tester avec des media queries

Les valeurs proportionnelles à la police

  • 1em === la taille de police (par défaut celle du parent !)
    • 1rem === la taille de la police de la racine (HTML)
  • Permet de fixer les tailles de police : Grille typographique
  • Mais aussi de dimensionner les éléments relativement à la taille de police (EG. marges).
  • Il existe aussi :
    • ex : la hauteur du ”x
    • ch : la largeur d'un ”0” (Support)

Les valeurs en pourcentage

les valeurs relatives à "l'écran"

  • Permet de construire des sites qui s'ajustent à la taille de l'écran.
  • Support par IE10, pas FF.
  • 1vw == 1% de la largeur
  • 1vh == 1% de la hauteur
  • 1vmin la plus petite des deux valeurs
  • 1vmax la plus grande des deux valeurs

La valeur "zéro"

  • 0 == 0px == 0em == 0% == …
  • On peut donc noter l'unité.
  • Généralement on ne la met pas (plus bref).

Les valeurs de couleurs (notation)

sel {
  background-color:#55AA55;          /*hexadecimal*/
  background-color:#5A5;             /*abrégée*/
  background-color:rgb(75,170,75);   /*decimal*/
  background-color:rgb(29%,67%,29%); /*percentage*/
  background-color:hsl(120,33%,50%); /*hue stat lumi*/
}

Les couleurs avec transparence

  • Pour ajouter un fond à un texte superposé à une illustration
    • Remplace l'obligation de faire un petit PNG avec alpha
sel {
  background-color:rgba(29%,67%,29%,0.5);
  background-color:hsla(120,33%,50%,0.5);
}

La valeur "url()"

Les gradients CSS

La valeur "attr()"

  • Support actuellement limité à la propriété ”content
  • On peut par exemple ajouter l'URL après un lien (utile pour l'impression papier)
a:after {
 content: " (" attr(href) ") ";
}

La valeur "calc()"

  • Évite de sortir la calculatrice width: calc(960px - 2*60px);
  • Mais surtout permet de mixer les unités width: calc(100% - 2*1em);

Variables en CSS "var()"

/* Définir la variable (à la racine) */
:root {
  --main-bg-color: brown;
}
 
/* utiliser la variable:*/
selecteur {
  background-color: var(--main-bg-color);
}
cours2012/concepts_et_outils_pour_internet/les_unites_en_css.txt · Dernière modification: 2017/11/14 09:35 par pracht