CSS

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

Contenu de la révision

 

Premiers pas
Un tutoriel guidé qui vous aidera à débuter avec les feuilles de styles en cascades.
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.

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

Tous les outils…

  • 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>&nbsp;</p>
<div class="callout-box">
  <strong><a href="/fr/CSS/Premiers_pas" title="fr/CSS/Premiers_pas">Premiers pas</a></strong><br />
  Un tutoriel guidé qui vous aidera à débuter avec les feuilles de styles en cascades.</div>
<div>
  <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>).</div>
<div>
  &nbsp;</div>
<div>
  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.</div>
<div>
  &nbsp;</div>
<div>
  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.</div>
<table class="topicpage-table">
  <tbody>
    <tr>
      <td>
        <h2 class="Documentation" id="Documentation_sur_CSS">Documentation sur 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>
        <p><span class="alllinks"><a href="/Special:Tags?tag=CSS:Outils&amp;language=fr" title="Special:Tags?tag=CSS:Outils&amp;language=fr">Tous les outils…</a></span></p>
        <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