<style>

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

Contenu de la révision

Résumé

L'élément HTML <style> contient les informations de style pour un document. Il faut mettre les informations de style à l'intérieur de cet élément, normalement grâce 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")}}
Specifies alternative style sheet sets.
{{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('HTML5 W3C', 'semantics.html#the-style-element', '<style>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'present/styles.html#edef-STYLE', '<style>')}} {{Spec2('HTML4.01')}}  

{{HTML:Element_Navigation}}

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. Il faut mettre les informations de style à l'intérieur de cet élément, normalement grâce 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>
    Specifies alternative style sheet sets.</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>
<div>
  <h2 id="Specifications" name="Specifications">Spécifications</h2>
  <table class="standard-table">
    <thead>
      <tr>
        <th scope="col">Spécification</th>
        <th scope="col">Statut</th>
        <th scope="col">Commentaires</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{SpecName('HTML5 W3C', 'semantics.html#the-style-element', '&lt;style&gt;')}}</td>
        <td>{{Spec2('HTML5 W3C')}}</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>{{SpecName('HTML4.01', 'present/styles.html#edef-STYLE', '&lt;style&gt;')}}</td>
        <td>{{Spec2('HTML4.01')}}</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<p>{{HTML:Element_Navigation}}</p>
Revenir à cette révision