From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/_colon_first/index.md | 113 +++++++++++++++------------------ 1 file changed, 50 insertions(+), 63 deletions(-) (limited to 'files/fr/web/css/_colon_first') diff --git a/files/fr/web/css/_colon_first/index.md b/files/fr/web/css/_colon_first/index.md index 00a1c2771e..72ad3d0e02 100644 --- a/files/fr/web/css/_colon_first/index.md +++ b/files/fr/web/css/_colon_first/index.md @@ -7,92 +7,79 @@ tags: - Reference translation_of: Web/CSS/:first --- -
{{CSSRef}}
+{{CSSRef}} -

La pseudo-classe :first, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud )

+La pseudo-classe **`:first`**, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud ) -
/* Cible le contenu de la première page */
+```css
+/* Cible le contenu de la première page */
 /* lorsqu'on imprime */
 @page :first {
   margin-left: 50%;
   margin-top: 50%;
-}
+} +``` -

Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :

+Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe : - +- Les propriétés liées aux marges : {{cssxref("margin")}} +- Les propriétés liées aux lignes veuves et orphelines : {{cssxref("orphans")}} et {{cssxref("widows")}} +- Les propriétés liées aux sauts de page : {{cssxref("page-break")}} -

De plus, seules les unités absolues peuvent être utilisées pour les marges.

+De plus, seules [les unités absolues](/fr/docs/Web/CSS/length#unités_de_longueur_absolues) peuvent être utilisées pour les marges. -

Syntaxe

+## Syntaxe {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
@page :first {
+```css
+@page :first {
   margin-left: 50%;
   margin-top: 50%;
 }
 
 p {
   page-break-after: always;
-}
+} +``` -

HTML

+### HTML -
<p>Première page.</p>
-<p>Deuxième page.</p>
-<button>Imprimer</button>
+```html +

Première page.

+

Deuxième page.

+ +``` -

JavaScript

+### JavaScript -
document.querySelector("button").addEventListener('click', () => {
+```js
+document.querySelector("button").addEventListener('click', () => {
   window.print();
-});
- -

Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.

- -

{{EmbedLiveSample("Exemples","80%","150px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Aucune modification.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.first")}}

- -

Voir aussi

- - +}); +``` + +Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut. + +{{EmbedLiveSample("Exemples","80%","150px")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}} | {{Spec2('CSS3 Paged Media')}} | Aucune modification. | +| {{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}} | {{Spec2('CSS2.1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.selectors.first")}} + +## Voir aussi + +- {{cssxref("@page")}} +- {{cssxref(":left")}} +- {{cssxref(":right")}} -- cgit v1.2.3-54-g00ecf