<style>

  • Raccourci de la révision : Web/HTML/Element/style
  • Titre de la révision : <style>
  • ID de la révision : 450435
  • Créé :
  • Créateur : SphinxKnight
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Résumé

L'élément HTML <style> contient les informations de style pour un document ou une partie de ce documentn. Il faut mettre les informations de style à l'intérieur de cet élément, normalement en utilisant le langage CSS (voir CSS).

  • Catégories de contenu Contenu de méta-données, si l'attribut scoped est présent : contenu de flux
  • Contenu autorisé Dépend de la valeur de l'attribut type.
  • Omission de balises {{no_tag_omission}}
  • Éléments parents autorisésDes éléments pouvant accepter du contenu de méta-données si l'attribut scoped est absent.
    Un élément {{HTMLElement("noscript")}} qui le fils d'un élément {{HTMLElement("head")}} si l'attribut scoped est absent.
    Si l'attribut scoped est présent, des éléments pouvant accepter du contenu de flux, à condition que l'élément style soit présent avant tout autre contenu de flux qui ne soit pas un blanc et que l'élément style ne soit pas le fils d'un élément dont le modèle de contenu soit transparent.
  • Interface DOM Cet élément implémente interfaces {{domxref("HTMLStyleElement")}} et {{domxref("LinkStyle")}}.

Attributs

Cet élément accepte les attributs globaux.

{{htmlattrdef("type")}}
Cet attribut définit le langage de style utilisé, sous la forme d'un type MIME (le jeu de caractères ne doit pas être spécifié). 'text/css' est la valeur par défaut si l'attribut n'est pas précisé.
{{htmlattrdef("media")}}
Cet attribut définit pour quel media de destination le style doit être appliqué. Il faut préciser une media query, voir http://dev.w3.org/csswg/css3-mediaqueries.
{{htmlattrdef("scoped")}}
Si cet attribut est présent, le style ne s'applique qu'à l'élément parent. S'il est absent, le style s'applique au document entier. Voir les specifications WhatWG.
{{htmlattrdef("title")}}
Cet attribut définit un ensemble de feuille de styles alternatives.
{{htmlattrdef("disabled")}}
S'il est présent, les propriétés de style qui sont spécifiées dans l'élément ne sont pas appliquées au document.

Exemples

<style type="text/css">
body {
  color:red;
}
</style> 

Exemple de l'attribut scoped

<article>
  <h1>Scoped stylesheet</h1>
  <div>L'attribut scoped vous permet de placer l'élément style au milieu du document.
   Les propriétés à l'intérieur sont alors appliquées à l'élément parent.</div>
  <p>Ce texte est noir.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>Celui-là est rouge.</p>
  </section>
</article>

Pour voir un exemple d'utilisation :

{{ EmbedLiveSample("Exemple_de_l'attribut_scoped", '100%', '200') }}

Spécifications

Spécification Statut Commentaires
{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'scoped') }} {{ Spec2('HTML WHATWG') }} Pas de changement depuis {{ SpecName('HTML5 W3C') }}.
{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'scoped') }} {{ Spec2('HTML5 W3C') }} Spécification initiale

Compatibilité des navigateurs

{{CompatibilityTable}}
Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple {{CompatUnknown}} {{CompatGeckoDesktop(21.0)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple {{CompatUnknown}} {{CompatGeckoMobile(21.0)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

Voir aussi

  • L'élément {{HTMLElement("link")}}, permettant l'utilisation de feuilles de style externes.

Source de la révision

<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>L'<strong>élément HTML <code>&lt;style&gt;</code></strong> contient les informations de style pour un document ou une partie de ce documentn. Il faut mettre les informations de style à l'intérieur de cet élément, normalement en utilisant le langage CSS (voir <a href="/fr/docs/CSS" title="CSS">CSS</a>).</p>
<ul class="htmlelt">
  <li><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="/fr/docs/HTML/Catégorie_de_contenu">Catégories de contenu&nbsp;</a></dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">Contenu de méta-données</a>, si l'attribut <strong>scoped</strong> est présent : <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" title="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a></li>
  <li><dfn>Contenu autorisé </dfn>Dépend de la valeur de l'attribut type.</li>
  <li><dfn>Omission de balises </dfn> {{no_tag_omission}}</li>
  <li><dfn>Éléments parents autorisés</dfn>Des éléments pouvant accepter du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">contenu de méta-données</a> si l'attribut <code title="attr-style-scoped">scoped</code> est absent.<br />
    Un élément {{HTMLElement("noscript")}} qui le fils d'un élément {{HTMLElement("head")}} si l'attribut scoped est absent.<br />
    Si l'attribut <code title="attr-style-scoped">scoped</code> est présent, des éléments pouvant accepter du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" title="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a>, à condition que l'élément style soit présent avant tout autre <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" title="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a> qui ne soit pas un blanc et que l'élément style ne soit pas le fils d'un élément dont le modèle de contenu soit transparent.</li>
  <li><dfn>Interface DOM </dfn>Cet élément implémente interfaces {{domxref("HTMLStyleElement")}} et {{domxref("LinkStyle")}}.</li>
</ul>
<h2 id="Attributs">Attributs</h2>
<p>Cet élément accepte les <a href="/fr/docs/Web/HTML/Global_attributes" title="en/HTML/Global attributes">attributs globaux</a>.</p>
<dl>
  <dt>
    {{htmlattrdef("type")}}</dt>
  <dd>
    Cet attribut définit le langage de style utilisé, sous la forme d'un type MIME (le jeu de caractères ne doit pas être spécifié). 'text/css' est la valeur par défaut si l'attribut n'est pas précisé.</dd>
  <dt>
    {{htmlattrdef("media")}}</dt>
  <dd>
    Cet attribut définit pour quel media de destination le style doit être appliqué. Il faut préciser une <em>media query</em>, voir <a href="http://dev.w3.org/csswg/css3-mediaqueries">http://dev.w3.org/csswg/css3-mediaqueries</a>.</dd>
  <dt>
    {{htmlattrdef("scoped")}}</dt>
  <dd>
    Si cet attribut est présent, le style ne s'applique qu'à l'élément parent. S'il est absent, le style s'applique au document entier. Voir les <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-style-scoped" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-style-scoped">specifications WhatWG</a>.</dd>
  <dt>
    {{htmlattrdef("title")}}</dt>
  <dd>
    Cet attribut définit un ensemble de feuille de styles alternatives.</dd>
  <dt>
    {{htmlattrdef("disabled")}}</dt>
  <dd>
    S'il est présent, les propriétés de style qui sont spécifiées dans l'élément ne sont pas appliquées au document.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre class="brush:html">
&lt;style type="text/css"&gt;
body {
  color:red;
}
&lt;/style&gt; 
</pre>
<h3 id="Exemple_de_l'attribut_scoped">Exemple de l'attribut <code>scoped</code></h3>
<pre class="brush:html; highlight:7">
&lt;article&gt;
  &lt;h1&gt;Scoped stylesheet&lt;/h1&gt;
  &lt;div&gt;L'attribut scoped vous permet de placer l'élément style au milieu du document.
   Les propriétés à l'intérieur sont alors appliquées à l'élément parent.&lt;/div&gt;
  &lt;p&gt;Ce texte est noir.&lt;/p&gt;
  &lt;section&gt;
    &lt;style scoped&gt;
      p { color: red; }
    &lt;/style&gt;
    &lt;p&gt;Celui-là est rouge.&lt;/p&gt;
  &lt;/section&gt;
&lt;/article&gt;
</pre>
<p>Pour voir un exemple d'utilisation :</p>
<div>
  {{ EmbedLiveSample("Exemple_de_l'attribut_scoped", '100%', '200') }}</div>
<h2 id="Specifications">Spécifications</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</th>
    </tr>
    <tr>
      <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'scoped') }}</td>
      <td>{{ Spec2('HTML WHATWG') }}</td>
      <td>Pas de changement depuis {{ SpecName('HTML5 W3C') }}.</td>
    </tr>
    <tr>
      <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'scoped') }}</td>
      <td>{{ Spec2('HTML5 W3C') }}</td>
      <td>Spécification initiale</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop(21.0)}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile(21.0)}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">Voir aussi</h2>
<ul>
  <li>L'élément {{HTMLElement("link")}}, permettant l'utilisation de feuilles de style externes.</li>
</ul>
Revenir à cette révision