CSS Paged Media: Полное руководство для начинающих

Здравствуйте,野心勃勃 веб-разработчики! Сегодня мы окунёмся в fascинирующий мир CSS Paged Media. Не волнуйтесь, если вы никогда о нём не слышали – мы начнём с самых азов и постепенно перейдём к более сложному. К концу этого урока вы сможете создавать потрясающие печатные макеты с помощью CSS. Итак, начнём!

Что такое CSS Paged Media?

CSS Paged Media – это набор CSS свойств, которые позволяют вам контролировать вид вашего веб-контента при печати или просмотре в formatе с pagesami (например, PDF). Это как сделать вашей веб-странице makeover для принтера!

Представьте, что вы создали красивый веб-сайт, но когда вы пытаетесь его напечатать, всё выглядит спутанно и не на месте. Вот где CSS Paged Media приходит на помощь! Он помогает вам maintain контроль над своим макетом, даже когда он не на экране.

Свойства CSS Paged Media

Давайте посмотрим на некоторые из ключевых свойств, которые делают CSS Paged Media магическим:

Свойство	Описание	Пример
@page	Определяет размеры и отступы страницы	@page { size: A4; margin: 2cm; }
size	У устанавлива size страницы	size: 8.5in 11in;
marks	Добавляет обрезные и/или крестовые метки в документ	marks: crop cross;
bleed	Указываeт зону отрыва для напечатанного контента	bleed: 0.5cm;
page-break-before	Контролирует разрывы страниц перед элементом	page-break-before: always;
page-break-after	Контролирует разрывы страниц после элемента	page-break-after: avoid;
page-break-inside	Контролирует разрывы страниц внутри элемента	page-break-inside: avoid;

Давайте посмотрим, как это работает:

@page {
size: A4;
margin: 2cm;
@top-center {
content: "My Awesome Document";
}
@bottom-right {
content: counter(page);
}
}

h1 {
page-break-before: always;
}

table {
page-break-inside: avoid;
}

В этом примере мы устанавливаем страницу A4 с отступами 2см. Мы добавляем заголовок в верхний центр каждой страницы и номер страниц в нижний правый corner. Мы также ensured, что каждый h1 начинается с новой страницы и таблицы не разрываются на страницах.

CSS at-правила

CSS at-правила – это statements, которые instruct CSS как себя вести. Они начинаются с символа @ и затем follows за идентификатором. Давайте посмотрим на некоторые at-правила, специфичные для Paged Media:

At-правило	Описание	Пример
@page	Определяет page box для paged media	@page :first { margin-top: 10cm; }
@top-left	Определяет содержимое для верхнего левого угла страницы	@top-left { content: "Chapter 1"; }
@top-center	Определяет содержимое для верхнего центра страницы	@top-center { content: "My Book"; }
@top-right	Определяет содержимое для верхнего правого угла страницы	@top-right { content: date("yyyy-mm-dd"); }
@bottom-left	Определяет содержимое для нижнего левого угла страницы	@bottom-left { content: "Confidential"; }
@bottom-center	Определяет содержимое для нижнего центра страницы	@bottom-center { content: "Copyright 2023"; }
@bottom-right	Определяет содержимое для нижнего правого угла страницы	@bottom-right { content: counter(page); }

Вот пример того, как вы можете использовать это:

@page {
@top-center {
content: "Alice's Adventures in Wonderland";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "Page " counter(page);
}
}

@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}

В этом примере мы добавляем заголовок на каждую страницу с названием книги и номерами страниц в нижнем правом углу. Мы также удаляем эти элементы с первой страницы для более чистого внешнего вида титульного листа.

CSS Пseudo-классы

Пseudo-классы используются для определения особого состояния элемента. В контексте Paged Media есть несколько полезных pseudo-классов:

Пseudo-класс	Описание	Пример
:first	Выбирает первую страницу	@page :first { margin-top: 10cm; }
:left	Выбирает все левые страницы	@page :left { margin-left: 4cm; }
:right	Выбирает все правые страницы	@page :right { margin-right: 4cm; }
:blank	Выбирает все пустые страницы	@page :blank { @top-center { content: none; } }

Давайте посмотрим, как мы можем использовать это:

@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}

@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "Alice's Adventures in Wonderland";
}
}

@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "Chapter " counter(chapter);
}
}

В этом примере мы создаём different макеты для первой страницы, левых страниц и правых страниц. Первая страница имеет больший верхний отступ и нет заголовка или footer. Левая страница имеет عنوان книги в верхнем левом углу, а правая страница имеет номер главы в верхнем правом углу.

Заключение

И вот оно,folks! Мы совершили путешествие через чудесный мир CSS Paged Media. От установки размеров страниц и отступов до управления разрывами страниц и добавления заголовков и footer, вы теперь имеете инструменты для создания красивых печатных макетов с помощью CSS.

Помните, практика делает perfect. Попробуйте experimenting с этими свойствами и at-правилами в своих проектах. Вы можете быть surprised, сколько контроля вы можете иметь над своими печатными макетами!

Счастливого кодирования, и пусть ваши prints всегда будут чёткими и красивыми!

Credits: Image by storyset