LG

Ceci est une ancienne révision du document !

Table des matières

Insertion dans une page
Syntaxe
Fonctions
Rendu
- Ordre de priorité
- Héritage

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

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.