CSS

  • Raccourci de la révision : CSS
  • Titre de la révision : CSS
  • ID de la révision : 307797
  • Créé :
  • Créateur : teoli
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Cascading Style Sheets (CSS), littéralement feuilles de style en cascade, est un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en HTML ou XML (en ce compris divers langages XML comme XHTML ou SVG).

CSS est une des languages clefs de l'Open Web et a été standardisé par une spécification W3C. Développé en niveaux, CSS1 est maintenant obsolète, CSS2.1 est une recommadation et CSS3, découpé en plusieurs modules, suit le processus de standardisation. Les premiers brouillons pour les modules CSS4 sont en cours d'écriture.

Dans les produits basés sur XUL comme la suite Mozilla, Firefox ou Thunderbird, il est aussi utilisé pour styler l'interface utilisateur de l'application. Par exemple, les thèmes utilisent intensivement les CSS pour personnaliser l'apparence de l'application.

Référence CSS

Une référence exhaustive pour développeurs Web expérimentés décrivant chaques propriétés et concepts CSS.

Tutorial CSS

Une introduction pas-à-pas pour aider les débutants absolus à démarrer. Il présentent tous les fondamentaux requis.

Démos CSS3

Une collection de démos montrant les dernières technologies CSS en action : une source régulièrement renouvellée d'inspiration.

Documentation et tutoriels sur le CSS

Référence CSS
Une référence sur CSS et ses extensions dans Mozilla.
Écriture de CSS efficace
Un guide d'écriture de CSS efficace destiné à être utilisé pour l'interface utilisateur de Mozilla.
Utilisation d'URL pour la propriété cursor
Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) accepte les valeurs URL pour la propriété cursor CSS2/2.1. Celle-ci permet de définir des images arbitraires en tant que pointeurs de souris ; tous les formats d'images supportés par Gecko sont permis.
Colonnes CSS3
Un tutoriel court sur l'utilisation des colonnes CSS3.
Problèmes soulevés par le pseudo élément hover
Beaucoup d'auteurs utilisent la pseudo-classe CSS2 :hover pour styler leurs liens, mais les progrès du support CSS dans certains navigateurs provoquent des effets de survol agressifs inattendus sur certaines pages.
Indentation homogène des listes
Tenter de modifier l'indentation des listes via CSS est plus délicat qu'on le croit, mais uniquement car cette indentation est gérée de différentes manières par les navigateurs supportant CSS. Voici comment les remettre tous au pas.

Tous les articles…

Obtenir de l'aide de la communauté

Vous avez besoin d'aide pour un problème en CSS et vous ne parvenez pas à trouver la solution dans la documentation ?

  • Consultez les forums dédiés de Mozilla : {{ ListeDeDiscussion("dev-tech-css", "mozilla.dev.tech.css") }}

Outils facilitant le développement CSS

  • Le Service de validation CSS du W3C vérifie si le code CSS fourni est valide. Un outil de débuggage inestimable.
  • L'extension Firebug pour Firefox. Une extension populaire qui permet de modifier directement le CSS du site ouvert. Très pratique pour faire des tests. L'extension est cependant bien plus complète.
  • L'extension Web Developer pour Firefox permet d'étudier et de modifier les CSS du site ouvert. Plus simple mais aussi moins complète que Firebug ; vient en complément.
  • Langages Open Web sur lesquels CSS s'applique : HTML, SVG, XHTML, XML.
  • Technologies Mozilla faisant une utilisation intensive de CSS : XUL, extensions et thèmes pour Firefox et Thunderbird.

{{ languages( { "de": "de/CSS", "en": "en/CSS", "es": "es/CSS", "it": "it/CSS", "ja": "ja/CSS", "ko": "ko/CSS", "nl": "nl/CSS", "pl": "pl/CSS", "pt": "pt/CSS", "zh-cn": "cn/CSS", "zh-tw": "zh_tw/CSS" } ) }}

Source de la révision

<p><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>), littéralement <em>feuilles de style en cascade</em>, est un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en <a href="/fr/HTML" title="fr/HTML">HTML</a> ou <a href="/fr/XML" title="fr/XML">XML</a> (en ce compris divers langages XML comme XHTML ou <a href="/fr/SVG" title="fr/SVG">SVG</a>).</p>
<p>CSS est une des languages clefs de l'Open Web et a été standardisé par une <a href="http://www.w3.org/Style/CSS/Overview.fr.html" title="http://www.w3.org/Style/CSS/Overview.fr.html">spécification W3C.</a> Développé en niveaux, CSS1 est maintenant obsolète, CSS2.1 est une recommadation et CSS3, découpé en plusieurs modules, suit le processus de standardisation. Les premiers brouillons pour les modules CSS4 sont en cours d'écriture.</p>
<p>Dans les produits basés sur <a href="/fr/XUL" title="fr/XUL">XUL</a> comme la suite Mozilla, Firefox ou Thunderbird, il est aussi utilisé pour styler l'interface utilisateur de l'application. Par exemple, les <a href="/fr/Thèmes" title="fr/Thèmes">thèmes</a> utilisent intensivement les CSS pour personnaliser l'apparence de l'application.</p>
<div style="margin:auto;text-align:center;">
  <div class="callout-box action-driven">
    <div>
      Référence CSS</div>
    <p>Une <a href="/fr/docs/CSS/Référence_CSS" title="en-US/docs/CSS/CSS_Reference">référence exhaustive</a> pour <em>développeurs Web expérimentés</em> décrivant chaques propriétés et concepts CSS.</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      Tutorial CSS</div>
    <p>Une <a href="/fr/CSS/Premiers_pas" title="/fr/CSS/Premiers_pas">introduction pas-à-pas</a> pour aider les <em>débutants absolus</em> à démarrer. Il présentent tous les fondamentaux requis.</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      Démos CSS3</div>
    <p>Une <a href="/fr/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection de démos</a> montrant les <em>dernières technologies CSS</em> en action : une source régulièrement renouvellée d'inspiration.</p>
  </div>
</div>
<table class="topicpage-table">
  <tbody>
    <tr>
      <td>
        <h2 class="Documentation" id="Documentation_sur_CSS">Documentation et tutoriels sur le CSS</h2>
        <dl>
          <dt>
            <a href="/fr/CSS/Référence_CSS" title="fr/CSS/Référence_CSS">Référence CSS</a></dt>
          <dd>
            <small>Une référence sur CSS et ses <a href="/fr/CSS/Référence_CSS/Extensions_Mozilla" title="fr/CSS/Référence_CSS/Extensions_Mozilla">extensions</a> dans Mozilla.</small></dd>
        </dl>
        <dl>
          <dt>
            <a href="/Fr/Écriture_de_CSS_efficace" title="Fr/Écriture_de_CSS_efficace">Écriture de CSS efficace</a></dt>
          <dd>
            <small>Un guide d'écriture de CSS efficace destiné à être utilisé pour l'interface utilisateur de Mozilla.</small></dd>
        </dl>
        <dl>
          <dt>
            <a href="/fr/Utilisation_d'URL_pour_la_propriété_cursor" title="fr/Utilisation_d'URL_pour_la_propriété_cursor">Utilisation d'URL pour la propriété cursor</a></dt>
          <dd>
            <small><a href="/fr/Gecko" title="fr/Gecko">Gecko</a> 1.8 (Firefox 1.5, SeaMonkey 1.0) accepte les valeurs URL pour <a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/ui.html#propdef-cursor">la propriété cursor CSS2/2.1</a>. Celle-ci permet de définir des images arbitraires en tant que pointeurs de souris&nbsp;; tous les formats d'images supportés par Gecko sont permis.</small></dd>
        </dl>
        <dl>
          <dt>
            <a href="/fr/Colonnes_CSS3" title="fr/Colonnes_CSS3">Colonnes CSS3</a></dt>
          <dd>
            <small>Un tutoriel court sur l'utilisation des colonnes CSS3.</small></dd>
        </dl>
        <dl>
          <dt>
            <a href="/fr/Problèmes_soulevés_par_le_pseudo_élément_hover" title="fr/Problèmes_soulevés_par_le_pseudo_élément_hover">Problèmes soulevés par le pseudo élément <code>hover</code></a></dt>
          <dd>
            <small>Beaucoup d'auteurs utilisent la pseudo-classe CSS2 <code>:hover</code> pour styler leurs liens, mais les progrès du support CSS dans certains navigateurs provoquent des effets de survol agressifs inattendus sur certaines pages.</small></dd>
        </dl>
        <dl>
          <dt>
            <a href="/fr/Indentation_homogène_des_listes" title="fr/Indentation_homogène_des_listes">Indentation homogène des listes</a></dt>
          <dd>
            <small>Tenter de modifier l'indentation des listes via CSS est plus délicat qu'on le croit, mais uniquement car cette indentation est gérée de différentes manières par les navigateurs supportant CSS. Voici comment les remettre tous au pas.</small></dd>
        </dl>
        <p><span class="alllinks"><a href="/Special:Tags?tag=CSS&amp;language=fr" title="Special:Tags?tag=CSS&amp;language=fr">Tous les articles…</a></span></p>
      </td>
      <td>
        <h2 class="Community" id="Obtenir_de_l'aide_de_la_communaut.C3.A9">Obtenir de l'aide de la communauté</h2>
        <p>Vous avez besoin d'aide pour un problème en CSS et vous ne parvenez pas à trouver la solution dans la documentation ?</p>
        <ul>
          <li>Consultez les forums dédiés de Mozilla : {{ ListeDeDiscussion("dev-tech-css", "mozilla.dev.tech.css") }}</li>
        </ul>
        <ul>
          <li><a class="link-irc" href="irc://irc.mozilla.org/css">Canal IRC #css (en anglais)</a></li>
          <li><a href="http://www.alsacreations.com/" title="http://www.alsacreations.com/">Alsacréations</a>, site avec un forum actif sur les standards web dont CSS</li>
          <li><a class="external" href="http://pompage.net/">Pompage.net</a>, site de traduction d'articles en anglais et liste de discussion sur CSS</li>
        </ul>
        <h2 class="Tools" id="Outils_facilitant_le_d.C3.A9veloppement_CSS">Outils facilitant le développement CSS</h2>
        <ul>
          <li>Le <a class="external" href="http://jigsaw.w3.org/css-validator/">Service de validation CSS du W3C</a> vérifie si le code CSS fourni est valide. Un outil de débuggage inestimable.</li>
          <li>L'<a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/1843">extension Firebug</a> pour Firefox. Une extension populaire qui permet de modifier directement le CSS du site ouvert. Très pratique pour faire des tests. L'extension est cependant bien plus complète.</li>
          <li>L'<a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/60">extension Web Developer pour Firefox</a> permet d'étudier et de modifier les CSS du site ouvert. Plus simple mais aussi moins complète que Firebug ; vient en complément.</li>
        </ul>
        <h2 class="Related_Topics" id="Sujets_li.C3.A9s">Sujets liés</h2>
        <ul>
          <li>Langages Open Web sur lesquels CSS s'applique : <a href="/fr/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/fr/docs/SVG" title="SVG">SVG</a>, <a href="/fr/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/fr/docs/XML" title="en-US/docs/XML">XML</a>.</li>
          <li>Technologies Mozilla faisant une utilisation intensive de CSS : <a href="/fr/docs/XUL" title="en-US/docs/XUL">XUL</a>, <a href="/fr/docs/Extensions" title="en-US/docs/Extensions">extensions</a> et <a href="/fr/docs/Themes" title="en-US/docs/Themes">thèmes</a> pour Firefox et Thunderbird.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<p>{{ languages( { "de": "de/CSS", "en": "en/CSS", "es": "es/CSS", "it": "it/CSS", "ja": "ja/CSS", "ko": "ko/CSS", "nl": "nl/CSS", "pl": "pl/CSS", "pt": "pt/CSS", "zh-cn": "cn/CSS", "zh-tw": "zh_tw/CSS" } ) }}</p>
Revenir à cette révision