LG

Ceci est une ancienne révision du document !

Table des matières

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

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 {.

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

* : n'importe quelle balise.

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

.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.

balise.class : balise ayant un nom de classe précis.

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

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.

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

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

*:hover : l'étoile est facultative mais permet d'expliciter.

::first-line : pseudo-élément (dédié à une sous partie de la classe). Préfixé par un deux :. Les navigateurs tolèrent aussi un seul :.

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

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