La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas cm (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est px (pixels).
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ems et Rems</title>
<style>
html {
font-size: 16px;
}
.ems li {
font-size: 1.3em;
}
.rems li {
font-size: 1.3rem;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe</p>
<ul class="ems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="rems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
#000000 -> 256 possibilitésrgb(0, 0, 0)hsl(0, 0%, 0)p {
font-family: "Trebuchet MS", Verdana, sans-serif;
color:red;
font-size:16px;
font-style:italic;
font-weight:bold;
text-transform:uppercase;
text-decoration:underline;
text-align:center;
line-height: 1.5;
letter-spacing: 2px;
word-spacing: 4px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Taille</title>
<style>
div {
margin:10px;
}
.box1 {
border: 5px solid darkblue;
}
.box2 {
border: 5px solid green;
height: 150px;
width: 200px;
}
.box3 {
border: 5px solid red;
width: 50%;
}
.box4 {
border: 5px solid yellow;
min-height: 150px;
width: 200px;
float:left;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box4">
Dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit? Massa sed elementum tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris, cursus. Lacus vel facilisis volutpat, est velit egestas dui, id ornare arcu odio ut sem. Rhoncus mattis rhoncus, urna neque viverra justo, nec ultrices dui sapien eget mi proin sed libero.
</div>
</body>
</html>
Les propriétés personnalisées CSS (custom properties en anglais, aussi parfois appelés variables CSS) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple --main-color: black;) et accessibles en utilisant la notation spécifique var() (par exemple : color: var(--main-color);).
Déclaration
element {
--main-bg-color: brown;
}
Utilisation
element {
background-color: var(--main-bg-color);
color: var(--my-var, red); // valeur par defaut
}
@media et @import.<style>, <link>, <source> et d'autres éléments HTML grâce à l'attribut media.utiliser la balise @media print{} dans une des feuilles de style appelée sur le site
@media print {
body {
font-size: 14px;
}
}
créer une feuille de style à part avec comme propriété media print.
<link media="print" href="print.css" />
/* Appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px : */
@media (max-width: 1250px) { ... }
/* Appliquer des styles aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems */
@media (min-width: 30em) and (orientation: landscape) { ... }