Таблицы стилей

Таблицы стилей представляют собой совокупность правил, применяемых для оформления определенных элементов на страницах сайта. Технология каскадных стилей (CSS) позволяет хранить всю информацию о разметке страницы, используемых на ней шрифтах, цветах, стилях оформления меню и т.д. в определенном месте (одном или нескольких файлах).

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

Так, например, можно изменить оформление форума (шрифт, цвет элементов и др.) В приведенном примере стили форума задаются отдельно от стилей общего шаблона сайта.

.forumborder {background-color:#CACBBD;}
.forumhead
 {
      background-color:#EAEBE2;
 }
.forumbody
 {
      background-color:#FBFBF9;
 }
.forumbodytext
 {
      font-family: Arial, Helvetica, sans-serif; 
      font-size:smaller; 
      color:#000000;
 }
.forumheadtext
 {
      font-family: Arial, Helvetica, sans-serif;
      font-size:smaller; 
      color:#000000;
 }
.forumtitletext
 {
      font-family: Arial, Helvetica, sans-serif;
      font-size:smaller;
      color:#000000;
 }

.postsep
 {
      background-color: #9C9A9C; 
      height: 1px
 }

.forumquote
 {
      font-family: Arial, Helvetica, sans-serif; 
      font-size:8pt;
      color: #000000; 
      background-color: #FBFBF9; 
      border : 1px solid Black;
      padding-top: 2px; 
      padding-right: 2px; 
      padding-bottom: 2px; 
      padding-left: 2px; 
      text-indent: 2pt;
 }
.forumcode
 {
      font-family: Arial, Helvetica, sans-serif;
      font-size:8pt; 
      color: #333333; 
      background-color: #FBFBF9; 
      border : 1px solid Black; 
      padding-top: 2px; 
      padding-right: 2px; 
      padding-bottom: 2px; 
      padding-left: 2px; 
      text-indent: 2pt;
 }
…

.forumborder {background-color:#96C0FA;}
.forumhead {background-color:#A9CAF7;}
.forumbody {background-color:#D7E6FB;}
.forumbodytext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#042A69;
}
.forumheadtext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#011B46;
…

Таблицы стилей настраиваются отдельно для каждого шаблона сайта, используемого в системе, и размещаются в папках соответствующих шаблонов сайта. Эти таблицы хранятся в файлах вида styles.css папки соответствующего шаблона. Дополнительные таблицы стилей, например, форума, могут иметь имена вида: forum.css.

Раздельное хранение стилей

В продукте добавлен механизм, позволяющий осуществлять раздельное хранение стилей:

• Стили, используемые в шаблоне дизайна, хранятся отдельно в файле template_styles.css. Это - основной CSS-файл шаблона.
• стили, используемые при оформлении контента страниц (стили сайта), хранятся в файле styles.css. Стили из этого файла выводятся в выпадающем списке стилей при редактировании страниц в визуальном редакторе.

Разграничивать назначение этих файлов можно условно, исходя из контекста. Точнее в файле styles.css возможно располагать те стили, которые должны формировать отображение контента не только для всего шаблона, но и для визуального редактора.

К примеру: на сайте для всех заголовков определены соответствующие стили отображения, т.е. они используются как для оформления контента страниц, так и для оформления контента блоков, которые находятся вне #WORK_AREA#. Таким образом, мы должны были бы поместить стили этих заголовков как в файл template_styles.css так и в styles.css. Но так как оба этих файла подключаются к шаблону, то в данном случае все стили для оформления заголовков следует поместить только в файл styles.css, так как он тоже подключается на странице.

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

К разнесению стилей по этим двум файлам следует подходить внимательно. К примеру, если необходимо сделать цвет фона сайта серым, а цвет фона в визуальном редакторе — красным, то в файле template_styles.css для тега body необходимо определить background-color:#ccc;, а в файле styles.css для этого же тега: background-color:#ff0000;.

Файлы на странице сайта подключаются в таком порядке:

1. styles.css
2. template_styles.css

В результате на сайте фон body станет серого цвета, т.к. стиль в последнем подключенном файле template_styles.css «перебьет» стиль, определенный в styles.css. А в визуальном редакторе фон станет красным, так как содержимое визуального редактора представляет собой iframe в который подключаются стили только из файла styles.css причем вставляются они непосредственно в область head с помощью тега <style>.

Но если в файле styles.css к определению цвета добавить повышение приоритета !important, то стиль из этого файла «перебьет» стиль, определенный в template_styles.css, фон сайта станет также красного цвета, несмотря на то, что файл стилей шаблона подключается последним.

Стили сайта

Формирование таблицы стилей сайта (файл styles.css) выполняется на странице редактирования шаблона дизайна (Настройки > Настройки продукта > Сайты > Шаблоны сайтов) на закладке Стили сайта. Важным элементом при создании таблицы стилей страниц является создание названий стилей. Названия следует создавать только для тех стилей, которые планируется использовать при редактировании страниц Достаточно часто в работе нам приходится изменить цвет, размер шрифта, выравнивание текста. Чуть реже мы добавляем специальные символы и разрывы страниц. Для всех этих операций мы будем использовать панель инструментов визуального редактора "1С-Битрикс: Управление сайтом":

Подробнее ... в режиме визуального HTML-редактора (секция Описания стилей).

Стили будут доступны в визуальном редакторе из выпадающего списка ] под именами, определенными в данной форме. Заданные здесь названия будут храниться в файле идентификатор_шаблона>/.styles.php (файл с именами стилей).

Создание таблицы стилей шаблона дизайна (файл template_styles.css) выполняется на закладке Стили шаблона формы редактирования шаблона сайта: