Создание div-контейнера. Создание нового div-элемента в исходном коде документа.
В редакторе, некоторые настройки форматирования могут быть применимы только к блочным элементам. Также иногда полезно применять форматирование к большим фрагментам текста, выходящим за рамки одного блока. В таком случае уместно будет поместить фрагмент в div-контейнер.
Имейте в виду, что использование div-контейнеров, как и других элементов HTML и стилей CSS является расширенным функционалом, поэтому ими стоит использоваться только в том случае, если вы обладаете достаточными знаниями обоих веб-стандартов.
Чтобы добавить div-элемент к тексту, нажмите кнопку «Создать Div-контейнер» на панели инструментов.
Диалоговое окно «Создание Div-контейнера» состоит из двух группирующих настройки вкладок:
- Основное
- Дополнительно
Основное
С помощью вкладки «Основное» можно добавлять классы стилей, которые будут применены к div-элементу. Имейте в виду, что к div-элементу может быть привязано несколько классов. В таком случае классы разделяются пробелами.
Если системный администратор добавит несколько дополнительных стилей в файл default.js для плагина styles, вы сможете выбрать стиль из выпадающего списка «Стиль». После того, как вы выберете стиль из списка, текстовое поле «Класс CSS» заполнится автоматически.
Дополнительно
Вкладка «Дополнительно» позволяет устанавливать настройки div-элемента, такие как привязка идентификатора, код языка, направление текста, всплывающий заголовок или свойства стиля CSS. Она предназначена для продвинутых пользователей, знающих HTML и CSS и дает практически безграничные возможности для настройки div-элементов.
Ниже описаны все элементы вкладки «Дополнительно»:
- Идентификатор - уникальный идентификатор div-элемента (атрибут в HTML)
- Код языка - язык div-элемента (атрибут ).
- Стиль - настройки стиля CSS (атрибут ). Имейте в виду, что каждое описание свойств селектора должно заканчиваться точкой с запятой, а индивидуальные параметры должны быть разделены пробелами.
- Заголовок - текст всплывающей подсказки, которая появляется, когда курсор наводится на div-элемент (атрибут ).
- Направление текста - направление текста: слева направо (LTR) или справа налево (RTL) (атрибут ).
Использование div-контейнеров
Для наглядности рассмотрим процесс добавления div-элементов на примере документа, состоящего из трех абзацей и списка
На панели иерархии HTML элементов, расположенной в нижней части редактора, видно, что курсор установлен во второй абзац и в иерархии есть только тэги “body” и “p”.
Допустим, нам нужно применить такой же стиль к фрагменту этого документа, а именно к первым двум абзацам и списку. Мы можем выделить эти элементы и затем применить к ним различные настройки форматирования. Тем не менее, если в будущем нам нужно будет изменить стиль фрагмента текста, нам придется снова выделять его вручную и форматировать по частям.
То же самое, однако, можно осуществить более удобным способом. Мы можем выделить тот же фрагмент текста и поместить его внутрь div-контейнера, который будет содержать все стилевые параметры, которые могут нам понадобиться как сейчас, так и в будущем. Добавляя класс CSS к контейнеру, мы можем, даже, контролировать его настройки с помощью внешнего файла таблицы стилей.
В этом примере первые два абзаца и список были выделены и затем помещены в div-контейнер, созданный с помощью кнопки на панели инструментов «Создать Div-контейнер».
Теперь div-элемент виден в иерархии элементов. Если мы посмотрим исходный код, то увидим, что ранее выделенные текстовые элементы заключены в контейнер, создан класс, а также стили, примененные к нему.
