Запросить демо
Запросить демо
Документерра: руководство пользователя

Работа со стилями контента страниц

Стиль контента страницы управляется с помощью встроенных стилей и стилей CSS, определенных в настройках проекта. Давайте узнаем, как использовать каждый из этих подходов и каковы различия между ними:

Встроенные стили

В режиме «Дизайн» можно изменять стиль текстовых блоков и других элементов непосредственно на странице, например, выделять текст жирным шрифтом, подчеркивать, выделять курсивом, изменять название и кегль шрифта. Можно также указать стиль изображения (например, положение изображения, поля, стиль границ и цвет) при вставке изображения с помощью вкладок Вставка Изображение в верхней панели.

Если вы немного разбираетесь в HTML, вы даже можете переключиться на вкладку Исходный код в редакторе и добавить атрибут стиля к некоторым элементам, чтобы указать отступы, поля и другие атрибуты.

Стилизация с помощью встроенных стилей выполняется легко и быстро, поэтому вы можете использовать множество функций стилизации на вкладке Домашняя страница в верхней панели редактора. Недостаток этого подхода заключается в том, что управление документацией может усложняться по мере роста ее объема. Предположим, что все скриншоты выровнены по левому краю, но теперь вы хотите, чтобы они были выровнены по центру. Другой пример: вы использовали синий цвет текста для всех заголовков, но теперь ваша компания меняет свой веб-дизайн, и все заголовки должны стать красными. При использовании встроенного стиля вам нужно будет вносить данные изменения в каждую страницу.

Поэтому, если вы можете получить базовые знания в области CSS, рассмотрите возможность использования CSS-стилей для упрощения работы с документацией и стандартизации внешнего вида элементов документации.

CSS-файлы

CSS-файл — это текстовый файл с правилами стиля, определенными в специальном формате. Чтобы узнать больше об этом формате, вы можете легко найти учебные материалы по языку CSS в Интернете.

В системе Документерра с каждым проектом может быть связано несколько CSS-файлов. Чтобы было проще, мы рекомендуем начать с одного CSS-файла. 

Чтобы узнать, где найти полный список файлов CSS и как их открыть, ознакомьтесь со следующей страницей справки

Если список пуст, это означает, что в вашем проекте нет CSS-файлов, а для страниц используются только встроенные стили. Чтобы создать новый CSS-файл и добавить его в проект, нажмите Создать новый файл справа от выпадающего списка выбора файла.

Создайте новую ссылку на файл в настройках проекта

При нажатии на ссылку в хранилище стилей будет создан новый CSS-файл, который будет добавлен в список стилей проекта и открыт для редактирования в новом окне браузера.

Если у вас уже есть CSS-файл в хранилище стилей, вы можете добавить его в проект, выбрав файл из выпадающего списка.

Важно
Чем ниже файл стилей в списке, тем выше его приоритет. Таким образом, если у вас одно и то же правило в разных файлах, браузер применит правило из самого нижнего файла в списке.

Начните с шаблона CSS по умолчанию

Создание CSS-файла с нуля может показаться сложным. Мы рекомендуем начать экспериментировать с CSS, создав новый проект на основе существующего шаблона.

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

Если вы все же хотите изменить дизайн шаблона, создав на основе шаблона проект, вы можете открыть настройки шаблона и увидеть список используемых там CSS-файлов. Нажмите Открыть для редактирования... В файле Style.css по умолчанию отобразится его контент и CSS-правила для основных элементов страницы: ссылок, абзацев, заголовков, списков и т.д. Используйте контент CSS-файла по умолчанию для создания собственного стиля проекта. Просто измените атрибуты стиля в существующих правилах, чтобы изменить цвет, размер шрифта и т.д.

Быстрый способ открыть CSS-файл вашего проекта

Если вы находитесь в режиме «Дизайн» и вам нужно изменить CSS-файл проекта, вы можете нажать кнопку «Редактировать стиль» в разделе «Стили» на вкладке «Домашняя страница» в верхней панели. Эта кнопка откроет самый первый CSS-файл из списка стилей проекта.

Кнопка «Редактировать стиль» в разделе стилей на вкладке «Домашняя страница» в верхней панели

Условные CSS-стили

Документерра — это универсальный инструмент для создания документации. Это означает, что в Документерре поддерживается ряд способов изменения конечной публикации, поэтому вы можете создавать разные документы из одного и того же проекта. Одним из преимуществ этого подхода является условный стиль: вы можете иметь разные CSS-файлы для разных типов условных публикаций, например, для онлайн— или печатных публикаций.

Когда вы находитесь в разделе Общее > Основные настройки в настройках проекта, наведите курсор на CSS-файл в списке «Стили проекта» и нажмите кнопку Свойства публикации..., которая появляется при наведении курсора (крайняя правая иконка). Появится диалоговое окно, в котором можно указать режим публикации этого CSS-файла.

Нажмите кнопку «Свойства публикации...», которая появляется при наведении курсора на CSS-файл

По умолчанию режим публикации установлен на «Публиковать всегда» — такой CSS-файл в любом случае будет применен к конечной публикации.

Чтобы сделать стиль условным, можно использовать режимы Публиковать с определенными тегами и Не публиковать с определенными тегами. Вам нужно будет указать список условных тегов для каждой из этих опций. Условные теги можно выбрать при публикации проекта в мастере публикации. В зависимости от выбранного тега и настроек стилей публикации проекта Документерра включит или исключит CSS-файлы при создании новой публикации.

Подробнее об условных тегах...