diff options
Diffstat (limited to 'files/fr/web/html/element/style/index.md')
| -rw-r--r-- | files/fr/web/html/element/style/index.md | 259 |
1 files changed, 128 insertions, 131 deletions
diff --git a/files/fr/web/html/element/style/index.md b/files/fr/web/html/element/style/index.md index 711ca24e97..9f510d96d5 100644 --- a/files/fr/web/html/element/style/index.md +++ b/files/fr/web/html/element/style/index.md @@ -8,194 +8,191 @@ tags: - Web translation_of: Web/HTML/Element/style --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>L'élément HTML <strong><code><style></code></strong> contient des informations de mise en forme pour un document ou une partie d'un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en <a href="/fr/docs/Web/CSS">CSS</a>.</p> +L'élément HTML **`<style>`** contient des informations de mise en forme pour un document ou une partie d'un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en [CSS](/fr/docs/Web/CSS). -<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}} -<p>L'élément <code><style></code> peut être inclus dans l'élément {{htmlelement("head")}} ou dans l'élément {{htmlelement("body")}} du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément<code> <head></code> afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments {{htmlelement("link")}}.</p> +L'élément `<style>` peut être inclus dans l'élément {{htmlelement("head")}} ou dans l'élément {{htmlelement("body")}} du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément` <head>` afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments {{htmlelement("link")}}. -<p>Si plusieurs éléments <code><style></code> et <code><link></code> sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade.</p> +Si plusieurs éléments `<style>` et `<link>` sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade. -<p>À l'instar des éléments <code><link></code>, les éléments <code><style></code> peuvent inclure des attributs <code>media</code> qui décrivent des <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes média</a> qui permettent d'appliquer des feuilles de styles selon certains critères provenant du média utilisé (la largeur de l'écran par exemple).</p> +À l'instar des éléments `<link>`, les éléments `<style>` peuvent inclure des attributs `media` qui décrivent des [requêtes média](/fr/docs/Web/CSS/Requêtes_média) qui permettent d'appliquer des feuilles de styles selon certains critères provenant du média utilisé (la largeur de l'écran par exemple). -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). -<dl> - <dt>{{htmlattrdef("media")}}</dt> - <dd>Cet attribut est <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a> qui indique le média auquel la mise en forme doit s'appliquer. Cet attribut est optionnel, la valeur par défaut est <code>all</code>.</dd> - <dt>{{htmlattrdef("nonce")}}</dt> - <dd>Un <em>nonce</em> cryptographique utilisé pour inscrire les styles en ligne sur une liste blanche pour la règle <code><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src</a></code> de la CSP (<em>Content Security Policy</em>). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Cet attribut définit le langage de la feuille de style sous la forme d'un type MIME (le jeu de caractères ne doit pas être indiqué). Cet attribut est optionnel, la valeur par défaut est <code>text/css</code>.</dd> - <dt>{{htmlattrdef("title")}}</dt> - <dd>Cet attribut indique un ensemble <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">de feuilles de style alternatif</a>.</dd> -</dl> +- {{htmlattrdef("media")}} + - : Cet attribut est [une requête média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries) qui indique le média auquel la mise en forme doit s'appliquer. Cet attribut est optionnel, la valeur par défaut est `all`. +- {{htmlattrdef("nonce")}} + - : Un _nonce_ cryptographique utilisé pour inscrire les styles en ligne sur une liste blanche pour la règle [`style-src`](/fr/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) de la CSP (_Content Security Policy_). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité. +- {{htmlattrdef("type")}} + - : Cet attribut définit le langage de la feuille de style sous la forme d'un type MIME (le jeu de caractères ne doit pas être indiqué). Cet attribut est optionnel, la valeur par défaut est `text/css`. +- {{htmlattrdef("title")}} + - : Cet attribut indique un ensemble [de feuilles de style alternatif](/fr/docs/Web/CSS/Feuilles_de_style_alternatives). -<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> +### Attributs dépréciés ou obsolètes -<dl> - <dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Cet attribut indique que les règles de mises en forme ne s'appliquent qu'aux éléments ayant le même élément parent que l'élément courant.</dd> -</dl> +- {{htmlattrdef("scoped")}} {{non-standard_inline}} {{obsolete_inline}} + - : Cet attribut indique que les règles de mises en forme ne s'appliquent qu'aux éléments ayant le même élément parent que l'élément courant. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Une_feuille_de_style_simple">Une feuille de style simple</h3> +### Une feuille de style simple -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush:html"><!doctype html> -<html> -<head> - <style> +```html +<!doctype html> +<html> +<head> + <style> p { color: red; } - </style> -</head> -<body> - <p>Voici un paragraphe.</p> -</body> -</html></pre> + </style> +</head> +<body> + <p>Voici un paragraphe.</p> +</body> +</html> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Une_feuille_de_style_simple', '100%', '60')}}</p> +{{EmbedLiveSample('Une_feuille_de_style_simple', '100%', '60')}} -<h3 id="Utiliser_plusieurs_éléments_<style>">Utiliser plusieurs éléments <code><style></code></h3> +### Utiliser plusieurs éléments `<style>` -<p>Dans cet exemple, on utilise deux éléments <code><style></code>, on peut voir comment les déclarations en conflit sont gérées : c'est le deuxième élément qui a la priorité si les <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificités</a> sont égales car les feuilles sont appliquées dans l'ordre.</p> +Dans cet exemple, on utilise deux éléments `<style>`, on peut voir comment les déclarations en conflit sont gérées : c'est le deuxième élément qui a la priorité si les [spécificités](/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité) sont égales car les feuilles sont appliquées dans l'ordre. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush:html"><!doctype html> -<html> -<head> - <style> +```html +<!doctype html> +<html> +<head> + <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } - </style> - <style> + </style> + <style> p { color: blue; background-color: yellow; } - </style> -</head> -<body> - <p>Voici un paragraphe.</p> -</body> -</html></pre> + </style> +</head> +<body> + <p>Voici un paragraphe.</p> +</body> +</html> +``` -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Utiliser_plusieurs_éléments_<style>', '100%', '60')}}</p> +{{EmbedLiveSample('Utiliser_plusieurs_éléments_<style>', '100%', '60')}} -<h3 id="Utiliser_une_requête_média">Utiliser une requête média</h3> +### Utiliser une requête média -<p>Dans cet exemple (basé sur le précédent), on ajoute un attribut <code>media</code> sur le deuxième élément <code><style></code> afin que les règles correspondantes ne soient appliquées que si la largeur de la zone d'affichage (<em>viewport</em>) est inférieure à 500 pixels.</p> +Dans cet exemple (basé sur le précédent), on ajoute un attribut `media` sur le deuxième élément `<style>` afin que les règles correspondantes ne soient appliquées que si la largeur de la zone d'affichage (_viewport_) est inférieure à 500 pixels. -<h4 id="HTML_3">HTML</h4> +#### HTML -<pre class="brush:html"><!doctype html> -<html> -<head> - <style> +```html +<!doctype html> +<html> +<head> + <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } - </style> - <style media="all and (max-width: 500px)"> + </style> + <style media="all and (max-width: 500px)"> p { color: blue; background-color: yellow; } - </style> -</head> -<body> - <p>Voici un paragraphe.</p> -</body> -</html></pre> + </style> +</head> +<body> + <p>Voici un paragraphe.</p> +</body> +</html> +``` -<h4 id="Résultat_3">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Utiliser_une_requête_média', '100%', '60')}}</p> +{{EmbedLiveSample('Utiliser_une_requête_média', '100%', '60')}} -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <th><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">Contenu de métadonnées</a>.</td> - </tr> - <tr> - <th>Contenu autorisé</th> - <td>Du contenu textuel correspondant à l'attribut <code>type</code> (c'est-à-dire <code>text/css</code>).</td> - </tr> - <tr> - <th>Omission de balises</th> - <td>Les deux balises doivent être présentes.</td> - </tr> - <tr> - <th>Parents autorisés</th> - <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">contenu de métadonnées</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun</td> - </tr> - <tr> - <th>Interface DOM</th> - <td>{{domxref("HTMLStyleElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu" + >Catégories de contenu</a + > + </th> + <td> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données" + >Contenu de métadonnées</a + >. + </td> + </tr> + <tr> + <th>Contenu autorisé</th> + <td> + Du contenu textuel correspondant à l'attribut + <code>type</code> (c'est-à-dire <code>text/css</code>). + </td> + </tr> + <tr> + <th>Omission de balises</th> + <td>Les deux balises doivent être présentes.</td> + </tr> + <tr> + <th>Parents autorisés</th> + <td> + Tout élément qui accepte du + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données" + >contenu de métadonnées</a + >. + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun</td> + </tr> + <tr> + <th>Interface DOM</th> + <td>{{domxref("HTMLStyleElement")}}</td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Ajout de l'attribut <code>nonce</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>L'attribut <code>type</code> devient optionnel.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------ | +| {{SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style')}} | {{Spec2('HTML WHATWG')}} | Ajout de l'attribut `nonce`. | +| {{SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style')}} | {{Spec2('HTML5 W3C')}} | L'attribut `type` devient optionnel. | +| {{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}} | {{Spec2('HTML4.01')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.style")}}</p> +{{Compat("html.elements.style")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément {{HTMLElement("link")}} qui permet d'utiliser des feuilles de style externes.</li> -</ul> +- L'élément {{HTMLElement("link")}} qui permet d'utiliser des feuilles de style externes. |