Revision 1106105 of Référence CSS

<p>Cette <em>référence CSS</em> illustre la base de la syntaxe permettant d'écrire une règle CSS, liste les propriétés CSS standard, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a>, <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments</a>, <a href="/fr/docs/Web/CSS/Règles_@">les règles @</a>, les unités, <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs">les sélecteurs</a> par ordre alphabétique et par type. Elle inclue également un bref aperçu des méthodes et objets du <a href="/fr/docs/Web/API/CSS_Object_Model">CSSOM</a>.</p>

<div class="note">
<p><strong>Note :</strong> Les règles CSS sont uniquement basées sur du texte (ASCII) alors que la gestion des règles CSSOM s'effectue via <a href="https://www.w3.org/TR/cssom/#introduction">des objets</a>.</p>
</div>

<p>Pour les extensions propriétaires des différents moteurs, voir les pages : <a href="/fr/docs/Web/CSS/Extensions_Mozilla">extensions CSS de Mozilla</a> (pour Gecko, avec les propriétés préfixées par <code>-moz</code>) et <a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">extensions CSS de WebKit</a> pour les propriétés spécifiques à WebKit.</p>

<h2 id="Index_des_mots-clés_en_CSS">Index des mots-clés en CSS</h2>

<p>{{CSS_Ref}}</p>

<div class="column-container">
<div class="column-half">
<h2 id="Sélecteurs">Sélecteurs</h2>

<ul>
 <li>Les sélecteurs simples
  <ul>
   <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Les sélecteurs de type</a></li>
   <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Les sélecteurs de classe</a></li>
   <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Les sélecteur d'identifiant</a></li>
   <li><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Les sélecteurs universels</a></li>
   <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Les sélecteurs d'attribut</a></li>
  </ul>
 </li>
 <li>Les combinateurs
  <ul>
   <li><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Les sélecteurs de voisins directs</a> <code>A + B</code></li>
   <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Les sélecteurs de voisins</a> <code>A ~ B</code></li>
   <li><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Les sélecteurs d'éléments fils</a> <code>A &gt; B</code></li>
   <li><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Les sélecteurs d'éléments descendants</a> <code>A B</code></li>
  </ul>
 </li>
 <li id="pelm">Les pseudo-elements
  <ul>
   <li>{{cssxref("::after")}}</li>
   <li>{{cssxref("::before")}}</li>
   <li>{{cssxref("::first-letter")}}</li>
   <li>{{cssxref("::first-line")}}</li>
   <li>{{cssxref("::selection")}}</li>
   <li>{{cssxref("::backdrop")}}</li>
   <li>{{cssxref("::placeholder")}} {{experimental_inline}}</li>
   <li>{{cssxref("::marker")}} {{experimental_inline}}</li>
   <li>{{cssxref("::spelling-error")}} {{experimental_inline}}</li>
   <li>{{cssxref("::grammar-error")}} {{experimental_inline}}</li>
  </ul>
 </li>
 <li id="pcls">Les pseudo-classes standard
  <div class="index">
  <ul>
   <li>{{cssxref(":active")}}</li>
   <li>{{cssxref(':any')}}</li>
   <li>{{cssxref(":checked")}}</li>
   <li>{{cssxref(":default")}}</li>
   <li>{{cssxref(":dir", ":dir()")}}</li>
   <li>{{cssxref(":disabled")}}</li>
   <li>{{cssxref(":empty")}}</li>
   <li>{{cssxref(":enabled")}}</li>
   <li>{{cssxref(":first")}}</li>
   <li>{{cssxref(":first-child")}}</li>
   <li>{{cssxref(":first-of-type")}}</li>
   <li>{{cssxref(":fullscreen")}}</li>
   <li>{{cssxref(":focus")}}</li>
   <li>{{cssxref(":hover")}}</li>
   <li>{{cssxref(":indeterminate")}}</li>
   <li>{{cssxref(":in-range")}}</li>
   <li>{{cssxref(":invalid")}}</li>
   <li>{{cssxref(":lang", ":lang()")}}</li>
   <li>{{cssxref(":last-child")}}</li>
   <li>{{cssxref(":last-of-type")}}</li>
   <li>{{cssxref(":left")}}</li>
   <li>{{cssxref(":link")}}</li>
   <li>{{cssxref(":not", ":not()")}}</li>
   <li>{{cssxref(":nth-child", ":nth-child()")}}</li>
   <li>{{cssxref(":nth-last-child", ":nth-last-child()")}}</li>
   <li>{{cssxref(":nth-last-of-type", ":nth-last-of-type()")}}</li>
   <li>{{cssxref(":nth-of-type", ":nth-of-type()")}}</li>
   <li>{{cssxref(":only-child")}}</li>
   <li>{{cssxref(":only-of-type")}}</li>
   <li>{{cssxref(":optional")}}</li>
   <li>{{cssxref(":out-of-range")}}</li>
   <li>{{cssxref(":read-only")}}</li>
   <li>{{cssxref(":read-write")}}</li>
   <li>{{cssxref(":required")}}</li>
   <li>{{cssxref(":right")}}</li>
   <li>{{cssxref(":root")}}</li>
   <li>{{cssxref(":scope")}}</li>
   <li>{{cssxref(":target")}}</li>
   <li>{{cssxref(":valid")}}</li>
   <li>{{cssxref(":visited")}}</li>
  </ul>
  </div>
 </li>
</ul>

<p><a href="https://www.w3.org/TR/selectors/#selectors">La liste des sélecteurs établie par la spécification</a>.</p>

<h2 id="Tutoriels_CSS3">Tutoriels CSS3</h2>

<p>Ces courtes pages illustrent certaines des technologies apparues avec CSS3 ou CSS2.1 mais qui étaient peu prises en charge :</p>

<ul>
 <li><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média (<em>media queries</em>) CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Utiliser_des_fonds_multiples">Utiliser plusieurs arrière-plans en CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) en CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/Colonnes_CSS/Utiliser_une_disposition_multi-colonnes">Utiliser une disposition multi-colonnes en CSS</a></li>
</ul>

<h2 id="Concepts_relatifs_à_CSS">Concepts relatifs à CSS</h2>

<ul>
 <li><a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe">La syntaxe CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/Règles_@">Les règles @</a></li>
 <li><a href="/fr/docs/Web/CSS/Comments">Les commentaires</a></li>
 <li><a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">La spécificité</a></li>
 <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a></li>
 <li><a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">L'héritage</a></li>
 <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La valeur spécifiée</a></li>
 <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La valeur calculée</a></li>
 <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a></li>
 <li><a href="/fr/docs/Web/CSS/valeur_reelle">La valeur réelle</a></li>
 <li><a href="/fr/docs/Web/CSS/valeur_résolue">La valeur résolue</a></li>
 <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
 <li><a href="/fr/docs/Web/CSS/Élément_remplacé">Les éléments remplacés</a></li>
 <li><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">La syntaxe de définition des valeurs</a></li>
 <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Les propriétés raccourcies</a></li>
 <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">Maîtriser la fusion des marges</a></li>
 <li><a href="/fr/docs/Web/Guide/CSS/Visual_formatting_model">Le modèle de formatage visuel</a></li>
 <li><a href="/fr/docs/Web/CSS/display">Le mode de disposition</a></li>
</ul>

<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>

<p>Les types d'objets principaux :</p>

<ul>
 <li><code>document . <a href="/fr/docs/Web/API/Document/styleSheets">styleSheets</a></code></li>
 <li><code>styleSheets[x] . <a href="/fr/docs/Web/API/CSSRuleList">cssRules</a></code></li>
 <li><code>cssRules[x] . <a href="/fr/docs/Web/API/CSSRule/cssText">cssText</a></code> (selector &amp; style)</li>
 <li><code>cssRules[x] . <a href="/fr/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></code></li>
 <li><code>elem . <a href="/fr/docs/Web/API/HTMLElement/style">style</a></code></li>
 <li><code>elem . style . <a href="/fr/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a></code> (just style)</li>
 <li><code>elem . <a href="/fr/docs/Web/API/Element/className">className</a></code></li>
 <li><code>elem . <a href="/fr/docs/Web/API/Element/classList">classList</a></code></li>
</ul>

<p>Des méthodes importantes :</p>

<ul>
 <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
 <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
</ul>
</div>
</div>