Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

 

CSS псевдокласс :first используется с @-правилом  @page, представляя первую страницу документа при печати.

/* Выбирает первую страницу при печати */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

Обратите внимани: Вы можете изменять не все CSS свойства в этом псевдо-классе. Вы можете изменять только внешние отступы, orphans, widows, и разбитие документа на страницы. Более того, вы можете использовать только абсолютные единицы измерения, определяя внешние отступы. Все остальные правила будут проигнорированы.

Синтаксис

:first

Примеры

HTML

<p>Первая страница.</p>
<p>Вторая страница.</p>
<button>Напечатать</button>

CSS

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

JavaScript

document.querySelector("button").onclick = function () {
  window.print();
}

Результат

Нажмите кнопку "Напечатать", чтобы напечатать пример. Слова на первой странице должны быть примерно в центре, тогда как на остальных страницах надписи будут на своих обычных местах.

Спецификации

Спецификация Статус Комментарий
CSS Paged Media Module Level 3
Определение ':first' в этой спецификации.
Рабочий черновик Без изменений.
CSS Level 2 (Revision 1)
Определение ':first' в этой спецификации.
Рекомендация Первое определение.

Поддержка браузерами

 

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
First page pseudo-class (:first)Chrome Полная поддержка 18Edge Полная поддержка 12Firefox Нет поддержки НетIE Полная поддержка 8Opera Полная поддержка 9.2Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 10.1Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

 

Смотрите также

  • @page
  • Другие связанные псевдо-классы: :left, :right

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, zpawn, Akh-rman, ialexi-bl
Обновлялась последний раз: mdnwebdocs-bot,