mozilla

Revision 587755 of color

  • Raccourci de la révision : CSS/color
  • Titre de la révision : color
  • ID de la révision : 587755
  • Créé :
  • Créateur : Golmote
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS color définit la couleur de premier-plan du contenu de texte d'un élément, ainsi que les décorations définies grâce à {{cssxref("text-decoration") }}. Elle n'affecte pas d'autres caractéristiques de l'élément. Un nom plus approprié serait être text-color, mais des raisons historiques et son apparition dans CSS Level 1 en ont fait autrement.

Veuillez noter que la valeur de couleur doit être uniforme, ce qui peut contenir une valeur de transparence depuis CSS3. Elle ne peut pas être un {{ xref_cssgradient() }} qui est de type {{ xref_cssimage() }} en CSS.

{{cssbox("color")}}

Syntaxe

Syntaxe formelle : {{csssyntax("color")}}
color: red;                     // Une couleur de CSS Level 1.
color: orange;                  // La seule couleur ajoutée dans CSS Level 2 (Revision 1).
color: antiquewhite;            // Une couleur de CSS Level 3, parfois appelée couleur SVG ou couleur X11.
color: #0f0;                    // La couleur 'lime' définie à l'aide de la notation à trois caractères.
color: #00ff00;                 // La couleur 'lime' définie à l'aide de la notation à six caractères.
color: rgba( 34, 12, 64, 0.3);  // Une couleur définie à l'aide d'une des notations fonctionnelles possibles.
color: currentColor;            // Le mot-clé spécial représentant la valeur de la propriété color de l'ancêtre direct.

color: inherit;

Valeurs

<color>
Est une valeur de type {{Xref_csscolorvalue}} indiquant la couleur des éléments textuels de l'élément.

Exemples

Les exemples suivant montrent les différentes façons de définir le rouge comme couleur du texte :

element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255,0,0) }
element { color: rgb(100%, 0%, 0%) }
element { color: hsl(0, 100%, 50%) }

/* transparent à 50%*/
element { color: rgba(255, 0, 0, 0.5) } 
element { color: hsla(0, 100%, 50%, 0.5) }

Spécifications

Spécification Statut Commentaire
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}} {{Spec2('CSS3 Transitions')}} Définit color comme animable.
{{SpecName('CSS3 Colors', '#color', 'color')}} {{Spec2('CSS3 Colors')}} Couleurs système dépréciées. Ajout des couleurs SVG. Ajout des notations fonctionnelles rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}} {{Spec2('CSS2.1')}} Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color', 'color')}} {{Spec2('CSS1')}}  

Compatibilité des navigateurs

{{CompatibilityTable}}
Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 {{CompatGeckoDesktop("1")}} 3.0 3.5 1.0
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 1.0 {{CompatGeckoMobile("1")}} 6.0 6.0 1.0

Voir également

  • Le type de donnée {{Xref_csscolorvalue() }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="CSS">CSS</a> <code>color</code> définit la <a href="/fr/docs/CSS/color_value" title="color_value">couleur</a> de premier-plan du contenu de texte d'un élément, ainsi que les décorations définies grâce à {{cssxref("text-decoration") }}. Elle n'affecte pas d'autres caractéristiques de l'élément. Un nom plus approprié serait être <code>text-color</code>, mais des raisons historiques et son apparition dans CSS Level 1 en ont fait autrement.</p>
<p>Veuillez noter que la valeur de couleur doit être uniforme, ce qui peut contenir une valeur de transparence depuis CSS3. Elle ne peut pas être un {{ xref_cssgradient() }} qui est de type {{ xref_cssimage() }} en CSS.</p>
<p>{{cssbox("color")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
<a href="/fr/docs/CSS/Syntaxe_de_définition_des_valeurs">Syntaxe formelle</a> : {{csssyntax("color")}}</pre>
<pre>
color: red;                     // Une couleur de CSS Level 1.
color: <code>orange;</code>                  // La seule couleur ajoutée dans CSS Level 2 (Revision 1).
color: <code>antiquewhite;</code>            // Une couleur de CSS Level 3, parfois appelée couleur SVG ou couleur X11.
color: #0f0;                    // La couleur 'lime' définie à l'aide de la notation à trois caractères.
color: #00ff00;                 // La couleur 'lime' définie à l'aide de la notation à six caractères.
color: rgba( 34, 12, 64, 0.3);  // Une couleur définie à l'aide d'une des notations fonctionnelles possibles.
color: currentColor;            // Le mot-clé spécial représentant la valeur de la propriété color de l'ancêtre direct.

color: inherit;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
 <dt>
  <code>&lt;color&gt;</code></dt>
 <dd>
  Est une valeur de type {{Xref_csscolorvalue}} indiquant la couleur des éléments textuels de l'élément.</dd>
</dl>
<h2 id="Exemples" name="Exemples">Exemples</h2>
<p>Les exemples suivant montrent les différentes façons de définir le rouge comme couleur du texte&nbsp;:</p>
<pre class="brush: css">
element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255,0,0) }
element { color: rgb(100%, 0%, 0%) }
element { color: hsl(0, 100%, 50%) }

/* transparent à 50%*/
element { color: rgba(255, 0, 0, 0.5) } 
element { color: hsla(0, 100%, 50%, 0.5) }
</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
 <thead>
  <tr style="background-color: rgb(255, 204, 255);">
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Définit <code>color</code> comme animable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td>Couleurs système dépréciées. Ajout des couleurs SVG. Ajout des notations fonctionnelles <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>.</td>
  </tr>
  <tr style="vertical-align: top;">
   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
   <td style="vertical-align: top;">Ajout de la couleur orange et des couleurs système.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{SpecName('CSS1', '#color', 'color')}}</td>
   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
   <td style="vertical-align: top;">&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<div>
 {{CompatibilityTable}}</div>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Fonction</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Support de base</td>
    <td>1.0</td>
    <td>{{CompatGeckoDesktop("1")}}</td>
    <td>3.0</td>
    <td>3.5</td>
    <td>1.0</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonction</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support de base</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
 <li>Le type de donnée {{Xref_csscolorvalue() }}</li>
</ul>
Revenir à cette révision