Ceci est une ancienne révision du document !

Table des matières

Insertion dans une page
Syntaxe
Fonctions
Rendu
Le modèle de boite
- Position
- Dimension
Propriétés
- background
- border

Insertion dans une page

Via un fichier css

Cela s'insère dans la partie head.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

Directement dans <head>

Non recommandé.

<head>
  <style>
    h1 {
      color: blue;
      background-color: yellow;
      border: 1px solid black;
    }
 
    p {
      color: red;
    }
  </style>
</head>

Directement dans le code HTML

Non recommandé.

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
  Hello World!
</h1>
<p style="color:red;">Ceci est mon premier exemple CSS</p>

Syntaxe

Généralités

On définit une liste de balises html avec ses propriétés CSS.

h1 {
  color: red;
}

h1 et color.

Sélecteurs

C'est les identifiants avant le {.

Balise

h1, h2 : liste de balises : séparation par des ,.

* : n'importe quelle balise.

.class, .class1.class2 : identifiant via class= (identifiant multiple) : préfixer le nom de la classe par un .. Il est possible de mettre successivement plusieurs classes avec plusieurs points.

Attribut

a[title], a[href="example.com"] (valeur exacte) : vérifier la présence d'un attribut et éventuellement sa valeur.

li[class~="a"] (contient un élément a), li[class|="a"] (contient un élément a éventuellement suivi par un -…) : chercher une valeur dans une liste (exemple "a b-c").

li[class^="a"] (texte commence par a), li[class$="a"] (texte termine par a), li[class*="a"] (texte contient a) : chercher une valeur dans une chaine de caractères.

Id

#id : identifiant via id= (identifiant unique) comme class sauf que les id sont uniques. Préfixer par un dièse.

Pseudo-classe

Désigne un élément entier.

Cas statique

:first-child

:last-child

:only-child

Cas dynamique

:hover : état / événement / pseudo-classe. Préfixé par un seul :.

:focus

Pseudo-élément

Désigne une partie d'un élément. Préfixé par un ::. Les navigateurs tolèrent aussi un seul :.

::first-line : Première ligne (d'un paragraphe par exemple) dans l'affichage graphique. Les mots .

::before et ::after : Peut permettre d'ajouter du contenu avant ou après un élément.

Combinateurs

balise.class:first-child::first-line : balise ayant un nom de classe précis avec un pseudo-classe et pseudo-élément. Combinable à l'infini.

article p : balise imbriquée : séparer les identifiants par un espace.

article > p : balise imbriquée uniquement pour les enfants directs.

p + p : voisin direct : balises se touchant. Le style sera appliquée uniquement au second élément p.

p ~ p : voisin indirect : balises ne se touchant pas forcément. Le style sera appliquée à partir du second élément p.

Écriture sous forme de style imbriqué

p {
  ~ img {
  }
}
/* Est équivalent à */
p ~ img {
}

Exemple

li {
  list-style-type: square ;
}
p, .special {
  color: orange;
  font-weight: bold;
}
li.special {
  font-size: 1.2em;
}
ul li, em + em {
  color: red;
}
a:link {
  color: pink;
}
#titleh2 {
  font-size: 2em;
}

<h2 id="titleh2">Titre</h2>
<p>This is the second second <a href="http://example.com">link</a>. It contains an <em>emphasized</em> <em>element</em>.</p>
<ul>
  <li>Item one</li>
  <li class="special">Item deux</li>
</ul>

Titre

This is the second link. It contains an emphasized element.

Item one
Item deux

Raccourcis

font : font-style, font-variant, font-weight, font-stretch, font-size, line-height et font-family.

padding : padding-top, padding-right, padding-bottom et padding-left.

border : border-width, border-style et border-color.

margin : margin-top, margin-right, margin-bottom et margin-left.

@rules

Extension au format de fichier.

@import : ajoute un fichier externe.

@import "file.css";

@media : applique le css en fonction de condition d'affichage et de périphérique.

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

Fonctions

calc

Exemple width: calc(90% - 30px);.

rotate

S'utilise avec transform : transform: rotate(0.8turn); avec 1turn qui vaut 360 degrés.

Rendu

Origine

Il y a 3 origines de la feuille de style :

user-agent : celui par défaut du navigateur,
author : celui définit dans la feuille de style du site internet,
user : celui surchargé manuellement par l'utilisateur.

Order (low to high)	Origin	Importance
1	user-agent (browser)	normal
2	user	normal
3	author (developer)	normal
4	CSS @keyframe animations
5	author (developer)	!important
6	user	!important
7	user-agent (browser)	!important
8	CSS transitions

Layer

Les layers permettent de ranger des styles dans des ensembles. Les styles sont appliquées dans l'ordre des layers.

L'intérêt est qu'il est facile de changer l'ordre des layers. Quand un @layout nom est rencontré, il est créé s'il n'existait pas. S'il existe déjà, il est complété. Donc, on commence par lister l'ordre des layers puis on les remplit.

Les layers anonymes existent. Dans ce cas, il n'est pas possible d'ajouter des éléments à l'intérieur une fois le layer définit. L'ordre des layers anonymes ne peut donc pas être modifié.

Il existe aussi des layers imbriqués. Les noms de ces layers sont séparés par des ..

L'import de feuilles CSS dans des layers se fait via le code :

@import url("components-lib.css") layer(components);
@import url("dialog.css") layer(components.dialog);
@import url("marketing.css") layer();

Exemple :

@layer site, page;
 
@layer page {
  h1 {
    text-decoration: overline;
    color: red;
  }
}
 
@layer site {
  h1 {
    text-decoration: underline;
    color: green;
  }
}

<h1>Is this heading underlined?</h1>

Is this heading underlined?

Ordre de priorité

Du moins important au plus important.

Ordre des layers pour les non !important,
inline normal styles (<h1 style="color: yellow;>),
animating styles,
Ordre inverse des layers pour les !important,
inline important styles,
transitioning styles,

@layer A, B;
 
h1 {
  color: orange;
  background-color: green;
  text-decoration: overline pink !important;
  box-shadow: 5px 5px lightgreen !important;
}
 
@layer A {
  h1 {
    color: grey;
    background-color: black !important;
    text-decoration: line-through grey;
    box-shadow: -5px -5px lightblue !important;
    font-style: normal;
    font-weight: normal !important;
  }
}
 
@layer B {
  h1 {
    color: aqua;
    background: yellow !important;
    text-decoration: underline aqua;
    box-shadow: -5px 5px magenta !important;
    font-style: italic;
    font-weight: bold !important;
  }
}

<div>
  <h1 style="color: yellow; background-color: maroon !important;">Inline styles</h1>
</div>

Inline styles

Ordre de priorité

Dans le CSS, certaines règles peuvent être contradictoires.

La priorité (par ordre décroissant) est donc : l'id, la classe, l'élément, l'ordre dans la feuille de style.

Selector	Identifiers	Classes	Elements	Total specificity
h1	0	0	1	0-0-1
h1 + p::first-letter	0	0	3	0-0-3
li > a[href*="en-US"] > .inline-warning	0	2	2	0-2-2
#identifier	1	0	0	1-0-0
button:not(#mainBtn, .cta)	1	0	1	1-0-1

Il est possible de ne pas respecter l'ordre précédent en ajoutant la balise !important après la valeur d'une propriété. Si plusieurs !important existent, on applique le même calcul que précédemment mais c'est la priorité la plus faible qui est prise en compte.

Cascade, specificity, and inheritance Archive du 01/01/2024 le 01/04/2024

Héritage

Par défaut, la valeur des propriétés ne sont pas héritées sauf : azimut, border-collapse, border-spacing, côté légende, color, cursor, direction, cellules-vides, famille-polices, font-size, font-style, font-variant, font-weight, police, espacement-lettre, line-height, list-style-image, list-style-position, list-style-type, list-style, orphelins, citations, text-align, text-indent, text-transform, Visibilité, white-space, veuves, word-spacing.

Il existe les mots clés suivants :

inherit : active l'héritage.

initial : désactive l'héritage.

revert : …

revert-layer : …

unset : rend la valeur par défaut et annule également la valeur par défaut de la feuille de style.

Le modèle de boite

Une boite / box stocke des données dans un rectangle et est composée d'une marge, bordure et padding.

Position

Les box peuvent être soit :

dans une ligne dédiée (display: block). Dans ce cas, height et width sont respectés. h1, p sont block par défaut.
comme un caractère dans la ligne (display: inline). Dans ce cas, height et width sont ignorés. Les propriétés top et bottom des propriétés padding / margin / borders n'influeront pas sur les autres box inline. a, span, em et strong sont inline par défaut.

Les données dans les boites peuvent être soit :

comportement par défaut.
display: flex. Ils ont donc une ligne dédiée mais tant que les boites se suivent, elles sont les unes a côté des autres.
display: inline-flex. Les boites ne sont pas dans une ligne dédiée et tant que les boites se suivent, elles sont les unes a côté des autres. Contrairement à inline, les blocs n'ont pas une largeur de 100% mais s'adaptent au contenu.
“entre deux” (display: inline-block). Les boites ne sont pas sur une ligne dédiée mais height et width sont respectés.

p,
ul {
  border: 2px solid rebeccapurple;
  padding: .5em;
}
 
.block,
li {
  border: 2px solid blue;
  padding: .5em;
}
 
ul {
  display: flex;
  list-style: none;
}
 
dd {
  display: inline-flex;
  list-style: none;
}
 
.block {
  display: block;
}
span .span1 {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
  display: inline-block;
}
span .span2 {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
}

<ul>
  <li>flex 1</li>
  <li>flex 2</li>
  <li>flex 3</li>
</ul>
<dl>
  <dd>inline-flex 1</dd>
  <dd>inline-flex 1</dd>
<dl>
<p>p block <span class="block">block</span> have been wrapped in a <span>inline block</span>.</p>
<p>I am a paragraph and this is a inline-block <span class="span1">span</span> inside that paragraph.
A span is an inline element and so does respect width and height.</p>
<p>I am a paragraph and this is a normal <span class="span2">span</span> inside that paragraph.
A span is an inline element and so does not respect width and height.</p>

flex 1
flex 2
flex 3

inline-flex 1

p block block have been wrapped in a inline block.

I am a paragraph and this is a inline-block span inside that paragraph. A span is an inline element and so does respect width and height.

I am a paragraph and this is a normal span inside that paragraph. A span is an inline element and so does not respect width and height.

Dimension

Cas général

Content : via width et height,

Padding : via padding,

Border : via border,

Margin : via margin. Si deux éléments se touchent et que leur margin est du même signe, la combinaison des marges sera la valeur la plus éloignée de zéro (plus grande si positive ou plus petite si négative). Si l'une est positive et l'autre négative, ce sera la somme des deux.

Alternative modèle

Dans ce cas, c'est content + padding + border qui vaut width et height.

Pour l'activer, il faut ajouter box-sizing: border-box à l'élément. Pour l'ajouter à tout le monde :

html {
  box-sizing: border-box;
}
 
*,
*::before,
*::after {
  box-sizing: inherit;
}

Propriétés logiques

Il est possible de choisir l'orientation du texte (horizontal ou vertical) avec la propriété writing-mode. Dans ce cas, la propriété width peut vouloir être remplacée par la valeur de height.

Il faut alors remplacer width par inline-size et height par block-size.

Il est aussi possible de faire la même chose avec margin, border et padding.

margin-block-start: 20px;
padding-inline-end: 2em;
padding-block-start: 2px;
border-block-start: 5px solid pink;
border-inline-end: 10px dotted rebeccapurple;
border-block-end: 1em double orange;
border-inline-start: 1px solid black;

Scrollbar / ascenseur

Si la dimension d'une boite est bloquée et qu'il y a plus de texte que la boite peut contenir, le texte va déborder. Le contrôle du débordement se fait via overflow / overflow-x / overflow-y (visible : valeur par défaut, le débordement sera visible, hidden : tout ce qui déborde de la boite sera masqué (déconseillé), scroll : une scrollbar va apparaitre si besoin.)

Propriétés

background

background-color: #567895;
background-color: black;
background-color: rgb(255 255 255 / 50%);

Il est aussi possible de générer des gradients de couleur avec linear-gradient / radial-gradient / conic-gradient.

La couleur de fond peut se combiner avec background-image: url(star.png); si l'image a une composante de transparence.

Par défaut, une image n'est pas redimensionnée et est répétée pour remplir l'élément.

Si on veut contrôler la répétition, on peut utiliser background-repeat avec :

no-repeat, repeat-x, repeat-y, repeat.
space : se répète et ajoute du vide entre les images plutôt que de mettre des images tronquées à droite et en bas,
round : se répète et étire les images pour remplir le vide.

background-size: 100%;
background-size: cover;
background-size: contains;

cover : l'image est agrandie pour couvrir toute la surface et peut être rognée.

contains : l'image est agrandie pour couvrir 100% en hauteur ou en largeur. Elle est entièrement affichée et des bandes transparentes sont insérées pour conserver le ratio.

Si des bandes transparentes sont affichées, il est possible d'indiquer où elles seront via la propriété background-position: center center;.

Enfin, il est possible d'avoir plusieurs images. Dans ce cas, il suffit de séparer les valeurs par des virgules :

background-image: url(image1.png), url(image2.png);
background-repeat: no-repeat, repeat-x;
background-position: 10px 20px, top right;

background-attachment permet de gérer le déplacement de l'image en fonction de la position de l'ascenseur.

scroll : se déplace en fonction de l'ascenseur principal de la page.
fixed : ne se déplace pas.
local : se déplace en fonction de l'ascenseur principal de la page et de l'ascenseur local de l'élément.

border

Il y a 4 sous propriétés (top, bottom, left, right) et 3 autres sous propriétés (style, width, color).

border-top-width: 1px;
border-top-style: solid;
border-top-color: black;