From d2f75fea212687b9c4d1059b235d45359b858bb0 Mon Sep 17 00:00:00 2001 From: DrakesBot12 Date: Thu, 11 Jun 2026 16:58:02 +0300 Subject: [PATCH 1/3] docs: first --- css/first/demos/basic/index.html | 183 +++++++++++++++++++++++++++++++ css/first/index.md | 95 ++++++++++++++++ css/index.md | 1 + 3 files changed, 279 insertions(+) create mode 100644 css/first/demos/basic/index.html create mode 100644 css/first/index.md diff --git a/css/first/demos/basic/index.html b/css/first/demos/basic/index.html new file mode 100644 index 0000000000..8ad6050b13 --- /dev/null +++ b/css/first/demos/basic/index.html @@ -0,0 +1,183 @@ + + + + Демонстрация стилизации первой страницы при печати с помощью @page :first — :first — Дока + + + + + + + + +
+
+
+

Первая страница

+

Это первая страница документа. При печати она будет иметь особые отступы: левый отступ 50% и верхний отступ 50%.

+
+ +
+

Вторая страница

+

Это вторая страница. Она будет напечатана с обычными отступами, так как псевдокласс :first применяется только к первой странице.

+
+ +
+

Третья страница

+

И третья страница также будет напечатана с обычными отступами.

+
+ +
+
+ + diff --git a/css/first/index.md b/css/first/index.md new file mode 100644 index 0000000000..7094f7e6e3 --- /dev/null +++ b/css/first/index.md @@ -0,0 +1,95 @@ +--- +title: "`:first`" +description: "CSS псевдокласс для стилизации первой страницы документа при печати. Используется с @page правилом." +authors: + - drakesbot12 +keywords: + - first + - псевдокласс + - печать + - page + - первая страница + - print styles +related: + - css/page + - css/left + - css/right +tags: + - doka +--- + +## Кратко + +`:first` — CSS псевдокласс, который используется с [`@page`](/css/page/) правилом для стилизации первой страницы документа при печати. Позволяет задать особые стили только для первой страницы, например, другие отступы или центрирование содержимого. + +## Пример + +Стилизуем первую страницу при печати, центрируя содержимое: + +```css +@page :first { + margin-left: 50%; + margin-top: 50%; +} + +p { + page-break-after: always; +} +``` + +```html +
+

Первая страница

+

Это первая страница документа. При печати она будет иметь особые отступы: левый отступ 50% и верхний отступ 50%.

+
+ +
+

Вторая страница

+

Это вторая страница. Она будет напечатана с обычными отступами, так как псевдокласс :first применяется только к первой странице.

+
+ +
+

Третья страница

+

И третья страница также будет напечатана с обычными отступами.

+
+ + +``` + + + +## Как пишется + +Псевдокласс `:first` используется **только** с `@page` правилом: + +```css +@page :first { + /* стили для первой страницы */ + margin-left: 50%; + margin-top: 50%; +} +``` + +## Как понять + +`:first` работает только в контексте печати и применяется к первой странице документа. Это полезно, когда нужно: + +- Центрировать содержимое первой страницы +- Задать особые отступы для титульной страницы +- Создать уникальный макет для первой страницы + +## Особенности + +В этом псевдоклассе можно изменять только ограниченный набор свойств: +- Внешние отступы ([`margin`](/css/margin/)) +- [`orphans`](/css/orphans/) и [`widows`](/css/widows/) +- Разбитие документа на страницы +- При этом для отступов можно использовать только абсолютные единицы измерения + +## Подсказки + +💡 `:first` работает только в контексте [`@page`](/css/page/) правил. +💡 Можно изменять только отступы, [`orphans`](/css/orphans/), [`widows`](/css/widows/) и разбитие на страницы. +💡 Для отступов используйте `px`, `pt`, `cm`, `mm`, но не проценты или `em`. +💡 Используйте предварительный просмотр печати в браузере для проверки результата. +💡 `:first` хорошо работает вместе с `:left` и `:right` для создания сложных макетов печати. diff --git a/css/index.md b/css/index.md index 9692ed7f2a..62454c1f04 100644 --- a/css/index.md +++ b/css/index.md @@ -55,6 +55,7 @@ groups: - lang - root - indeterminate + - first - name: 'Псевдоэлементы' items: - pseudoelements From 849592c3a595dcf81f3a3b995cb3b47c2ff2caa8 Mon Sep 17 00:00:00 2001 From: vitya-ne <9317613+vitya-ne@users.noreply.github.com> Date: Tue, 14 Jul 2026 21:32:27 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BA=D0=BE=D0=BD=D1=84=D0=B8=D0=B3=20baseline?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/first/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/first/index.md b/css/first/index.md index 7094f7e6e3..035d293e83 100644 --- a/css/first/index.md +++ b/css/first/index.md @@ -1,6 +1,10 @@ --- title: "`:first`" description: "CSS псевдокласс для стилизации первой страницы документа при печати. Используется с @page правилом." +baseline: + - group: page-selectors + features: + - css.selectors.first authors: - drakesbot12 keywords: From f3ecdf73176e7a4e866edab9a8373d70dd9c380d Mon Sep 17 00:00:00 2001 From: DrakesWeb <89761315+DrakesBot12@users.noreply.github.com> Date: Fri, 17 Jul 2026 18:32:45 +0300 Subject: [PATCH 3/3] Update index.md --- css/first/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/first/index.md b/css/first/index.md index 035d293e83..de611087e9 100644 --- a/css/first/index.md +++ b/css/first/index.md @@ -16,8 +16,8 @@ keywords: - print styles related: - css/page - - css/left - - css/right + - css/orphans + - css/widows tags: - doka ---