100  /  331

Управление стилями

Просмотров: 9449 (Статистика ведётся с 06.02.2017)

Таблицы стилей представляют собой совокупность правил, применяемых для оформления определенных элементов на страницах сайта. Технология каскадных стилей (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) выполняется на странице редактирования шаблона дизайна (Настройки > Настройки продукта > Сайты > Шаблоны сайтов) на закладке Стили сайта. Важным элементом при создании таблицы стилей страниц является создание названий стилей. Названия следует создавать только для тех стилей, которые планируется использовать при редактировании страниц в режиме визуального HTML-редактора (секция Описания стилей).

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

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

Настройка таблицы стилей для шаблона сайта

Ссылки по теме:



9
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии