Работа со стилями контента страниц
Стиль контента страницы управляется с помощью встроенных стилей и стилей CSS, определенных в настройках проекта. Давайте узнаем, как использовать каждый из этих подходов и каковы различия между ними:
- Встроенные стили
- CSS-файлы
- Начните с шаблона CSS по умолчанию
- Быстрый способ открыть CSS-файл вашего проекта
- Условные 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-файлы при создании новой публикации.