LG

Ceci est une ancienne révision du document !

Table des matières

Insertion dans une page
Syntaxe
- @rules
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

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

h1 {
  color: red;
}

h1 et color.

Fonctions principales :

Il est possible de mettre une liste de balises en les séparant par des ,.

class : pour désigner une classe, il faut préfixer le nom de la classe par un point.

Pour désigner une balise qui a un nom de classe précis, il faut mettre balise.nom_de_classe.

Hiérarchie : séparer les désignations par un espace.

Succession : si on veut désigner une balise qui est précédée par une autre balise, c'est +.

État : ou événement (changement d'état) c'est :.

Id : comme class sauf que les id sont uniques. C'est #.

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

@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