Совет по CSS: создание стилей для заметок, предупреждений, примеров и советов

1. Копирование стилей в таблицу стилей с помощью внутреннего текстового редактора
2. Создание стилей с помощью стилей абзаца
3. Стилизованные коробки с изображением
4. Стилизованные коробки с использованием авто-номеров
5. Применить стиль абзаца
6. Использование Div для стилизованных блоков
7. Стиль Div с изображением
8. Стилизованные Div с автоматическим номером
9. Применение стиля Div
10. Бонусный совет: использование фрагмента для быстрой вставки отформатированного содержимого

Нужен способ указать важную информацию в вашей документации? В MadCap Flare вы можете создавать стилизованные блоки, которые вызывают заметки, предупреждения, советы или примеры, все с помощью CSS. Вот пример того, как они выглядят:

Вы можете скопировать стили и вставить их в таблицу стилей или загрузить проект Flare, выполнив нажав здесь , Этот пост посвящен в основном стилю «Заметки», но если вы хотите увидеть, как я создал другие стили в приведенном выше примере, взгляните на проект Flare.

Копирование стилей в таблицу стилей с помощью внутреннего текстового редактора

Если вы будете копировать и вставлять эти стили в свою таблицу стилей, вам нужно будет открыть ее в представлении «Внутренний текстовый редактор».

1. Щелкните правой кнопкой мыши таблицу стилей> выберите « Открыть с помощью» > « Внутренний текстовый редактор» .
2. Это откроет вашу таблицу стилей в текстовом редакторе.
3. Скопируйте пример кода.
4. Вставьте его внизу таблицы стилей.

Создание стилей с помощью стилей абзаца

Хотя div или таблица могут показаться необходимыми для создания стилизованных блоков, вы можете вместо этого использовать один стиль абзаца. Использование стиля абзаца замечательно, когда ваша заметка будет одним предложением или абзацем. После того, как стиль создан, вы можете быстро применить его к любому элементу абзаца. Здесь обсуждаются два разных стиля; самое большое различие между ними состоит в том, что для одного есть изображение, а для другого - автоматический номер. Не стесняйтесь настроить внешний вид, чтобы настроить так, как вы хотите.

Стилизованные коробки с изображением

p.note {-moz-border-radius: 6px; -webkit-border-radius: 6 пикселей; цвет фона: # f0f7fb; background-image: url (../ Images / icons / Pencil-48.png); background-position: 9px 0px; повторение фона: без повтора; граница: сплошная 1px # 3498db; радиус границы: 6 пикселей; высота строки: 18 пикселей; переполнение: скрытое; обивка: 15px 60px; }

p.noteAlt {background-color: # f0f7fb; background-image: url (../ Images / icons / Pencil-48.png); background-position: 9px 0px; повторение фона: без повтора; рамка слева: сплошная 4px # 3498 дБ; высота строки: 18 пикселей; переполнение: скрытое; обивка: 15px 60px; }

Взгляните на свойство стиля «background-image» - замечаете ли вы, что путь ведет к изображению? Если вы скопируете эти стили непосредственно в таблицу стилей, изображение не появится. Убедитесь, что вы исправили этот путь, чтобы указать на свое собственное изображение. Если вы хотите использовать изображение, которое я использовал, либо скачайте пример проекта Flare, либо сохраните изображения ниже:

Тем не менее, вы можете использовать любое изображение, которое вы хотите! Например, изображения, использованные в этом примере, были созданы в http://flaticons.net/ ,

Стилизованные коробки с использованием авто-номеров

p.note {-moz-border-radius: 6px; -webkit-border-radius: 6 пикселей; цвет фона: # f0f7fb; граница: сплошная 1px # 3498db; радиус границы: 6 пикселей; высота строки: 18 пикселей; mc-auto-number-format: '{b} Примечание: {/ b}'; переполнение: скрытое; набивка: 12 пикселей; }

p.noteAlt {background-color: # f0f7fb; рамка слева: сплошная 4px # 3498 дБ; высота строки: 18 пикселей; mc-auto-number-format: '{b} Примечание: {/ b}'; переполнение: скрытое; набивка: 12 пикселей; }

Если вы не хотите использовать изображение для своих заметок, вы можете использовать автонабор для отображения текста стиля (например: примечание, совет, пример, предупреждение и т. Д.). Свойство, которое управляет этим, является свойством «mc-auto-number-format». Обратите внимание, что mc-auto-number-format в приведенном выше примере кода говорит {b} Примечание: {/ b} . {B} в свойстве используется для полужирного текста. Если вы хотите применить форматирование к тексту с автонумерацией, вы можете добавить похожие теги форматирования в свойстве.

Применить стиль абзаца

Создав эти стили в своей таблице стилей, вы захотите применить их к своим абзацам.

1. Откройте тему в редакторе тем.
2. Введите новый абзац или выберите абзац, к которому вы хотите применить стиль «Примечание».
3. Щелкните правой кнопкой мыши панель блоков и выберите стиль p.note:

В качестве альтернативы вы можете использовать Окно стилей ( Главная лента > Окно стилей в Flare), чтобы быстро применять стили.

Если у вас есть несколько строк текста, которые нужно вставить в абзац, вы можете удерживать нажатой клавишу « Shift» + « Ввод», чтобы в одном элементе абзаца было несколько строк. Однако, если вам нужно добавить список или если вам нужно добавить несколько элементов абзаца в поле, вы также должны добавить div в таблицу стилей.

Использование Div для стилизованных блоков

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

Стиль Div с изображением

div.note {-moz-border-radius: 6px; -webkit-border-radius: 6 пикселей; цвет фона: # f0f7fb; background-image: url (../ Images / icons / Pencil-48.png); background-position: 9px 0px; повторение фона: без повтора; граница: сплошная 1px # 3498db; радиус границы: 6 пикселей; высота строки: 18 пикселей; переполнение: скрытое; обивка: 15px 60px; }

div.noteAlt {background-color: # f0f7fb; background-image: url (../ Images / icons / Pencil-48.png); background-position: 9px 0px; повторение фона: без повтора; рамка слева: сплошная 4px # 3498 дБ; высота строки: 18 пикселей; переполнение: скрытое; обивка: 15px 60px; }

Стилизованные Div с автоматическим номером

div.note {-moz-border-radius: 6px; -webkit-border-radius: 6 пикселей; цвет фона: # f0f7fb; граница: сплошная 1px # 3498db; радиус границы: 6 пикселей; высота строки: 18 пикселей; mc-auto-number-format: '{b} Примечание: {/ b}'; переполнение: скрытое; набивка: 12 пикселей; }

div.noteAlt {background-color: # f0f7fb; рамка слева: сплошная 4px # 3498 дБ; высота строки: 18 пикселей; mc-auto-number-format: '{b} Примечание: {/ b}'; переполнение: скрытое; набивка: 12 пикселей; }

После того, как вы создали эти div в своей таблице стилей, вам нужно будет применить их к элементам в Flare.

Применение стиля Div

1. Выберите несколько элементов, которые вы хотите сгруппировать, выделив Shift + щелчок или выделение содержимого.
2. Перейдите на главную ленту > выберите кнопку группы .
3. В окне Group выберите div, который вы создали в своей таблице стилей.

Примечание. Вместо того, чтобы нажимать кнопку группы, вместо нее можно нажать клавишу Tab в качестве сочетания клавиш.

Кроме того, если вы не хотите нажимать на эти диалоговые окна, вы можете использовать фрагмент для вставки отформатированного содержимого.

Бонусный совет: использование фрагмента для быстрой вставки отформатированного содержимого

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

1. Создать фрагмент. ( Файл > Создать > Тип файла: фрагмент )
2. В фрагменте примените стиль div к одному абзацу.
3. Откройте тему.
4. Вставьте только что созданный фрагмент.
5. Поскольку фрагмент связан с фрагментом, нам нужно разорвать ссылку, чтобы сделать ее редактируемой. Щелкните правой кнопкой мыши блок фрагмента с левой стороны и выберите « Преобразовать фрагмент в текст» .
6. Добавьте информацию о вашей заметке.

Теперь у вас есть несколько стильных коробок для вашей документации. Не стесняйтесь попробовать и напишите в комментариях ниже о том, что вы создали со стилизованными коробками.

Чтобы загрузить пример проекта Flare, кликните сюда ,

Новичок в MadCap Flare? Начните бесплатную 30-дневную пробную версию , который поставляется с бесплатными запросами в нашу техническую поддержку Platinum Level. Если у вас есть какие-либо вопросы о том, как настроить документацию, сотрудник группы технической поддержки готов помочь вам.

Вам также может понравиться: