Каскадные таблицы стилей CSS

Каскадные таблицы стилей - это совокупность правил, которые описывают стиль оформления Web-страниц.

Каскадные таблицы стилей CSS (Cascade Style Sheets) используют в тех случаях, когда необходимо установить единый стиль оформления для нескольких сайтов, нескольких страниц одного сайта, нескольких абзацев, таблиц, предложений или отдельных слов. Таблицы CSS позволяют сделать HTML-код компактнее, а значит - уменьшить время загрузки отображаемой страницы. Они дают возможность увеличить красочность страницы без использования графических документов формата BMP, GIF, JPEG. Основным достоинством каскадных таблиц стилей является возможность изменение формы сразу нескольких страниц и даже нескольких сайтов.

Напомним, что стиль - это набор правил оформления страницы. Эти правила могут определять, например, форму текста (наклонный, подчеркнутый, синий цвет и т.п.), форму таблиц (толщина и цвет внешней рамки, порядок выравнивания текста внутри ячейки).

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

Каскадные таблицы стилей разработаны для того, чтобы рационализировать (облегчить) верстку Web-страницы. Они дают возможность формировать шаблоны, с помощью которых изменение формы Web-страницы происходит быстрее. При этом появляется возможность одновременного изменения формы сразу нескольких страниц сайта и даже нескольких сайтов. Таблицы CSS как бы отделяют процедуру создания формы документа от процедуры разработки содержания документа. Каскадные таблицы стилей управляют формой представления документа (размером, гарнитурой и цветом шрифта, фоном, цветом ссылок, расположением объектов на странице и т.п.).

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

Каскадные таблицы стилей могут быть внешними, внедренными и встроенными. Внешние каскадные таблицы стилей создаются с помощью отдельного файла, в который дизайнеры заносят описание заранее созданных стилей. Файл, содержащий описание стилей, должен иметь расширение .css.

Достоинством внешних таблиц является возможность модифицирования формы страницы без изменения HTML-кода самой страницы.

Внедренные каскадные таблицы стилей декларируются (определяются) в заголовке Web-страницы (между тегами head). Действие внедренных таблиц распространяется лишь на одну страницу.

Встроенные CSS создаются непосредственно в момент их использования (в теле документа, между тегами body). Действие встроенных таблиц CSS прекращается при появлении тега, завершающего абзац .

Введенные понятия позволяют понять, почему таблицы стилей называются каскадными. Объясняется это тем, что форма отображаемой на экране страницы может уточняться последовательно (поэтапно, каскадно). Сначала указываются общие свойства сайта или страницы с помощью внешнего файла, затем в заголовке Web-страницы делаются необходимые уточнения и, наконец, в месте введения текста завершается окончательная коррекция формы текста, таблицы и т.п. При наличии конфликтов (противоречий) последующие указания отменяют предыдущие указания (то есть последние директивы имеют более высокий приоритет).

Вызов внешнего стиля разметки из файла осуществляется с помощью элемента link. Элемент link должен располагаться в заголовке документа.

Например,

В данном случае внешний файл имеет имя apa.css.

Приведем пример внешнего файла, содержащего описание одного из возможных стилей.

body {background: blue; color : white;

font-family : "Times New Roman", serif;

font-size: 14px; text-align: justify;}

p{text-indent: Hmm;}

h2 {font-size: 14pt; color: green;}

hr {color: blue; height: 3 pt;}

Описание дает следующие указания (команды) браузеру на форматирование текста. Сделать фон документа синим (background: blue;). Использовать белые чернила для изображения текста (color : white;). Выбрать гарнитуру Times New Roman (font-family : "Times New Roman", serif;). Установить высоту символов 14 пикселей (font-size: 14рх;). Сделать выравнивание текста по ширине окна (text-align: justify;). Установить величину отступа ("красную строку") 11 мм (text-indent : 11mm;). Для заголовка типа h2 установить размер символов 14 пунктов (font-size: 14pt;), а цвет - зеленый (color: green;). Задать цвет горизонтальной линии (отлиновки) - синий (color: blue;), а высоту линии - 3 пункта (height: 3 pt;).

Описание стиля внедренных таблиц происходит с помощью элемента (тега) style, размещаемого в заголовке Web-страницы (внутри контейнера ). В этом случае действие созданного стиля распространяется на содержимое всей страницы. Приведем пример описания внедренного стиля.

Объявление и использование встроенного стиля происходит с помощью атрибута style, но не в заголовке страницы, а непосредственно в элементе (теге) разметки. Этим способом можно изменить свойство стандартного тега в момент набора текста в HTML-редакторе. Такое изменение стиля действует на небольшом участке текста (локально), например, в пределах абзаца. Этот способ порой называется английским термином inline (встроенный). Приведем пример встроенного стиля.

<р>

За счет этой директивы расстояние между соседними строками отмеченного абзаца будет установлено 30 пунктов.

Самым важным достоинством CSS является возможность изменения стиля на больших площадях HTML-документа, а не локальные изменения. По этой причине встроенные таблицы CSS следует считать менее перспективными по сравнению с внешними и внедренными каскадными таблицами стилей.

Образно встроенные таблицы CSS можно назвать одноразовыми (или локальными) таблицами, внедренные CSS - неоднократно используемыми (или региональными), а внешние CSS - многоразовыми (или глобальными) таблицами стилей.

Рассмотрим, каким образом описываются правила формирования стилей.

селектор {свойство 1: значение 1; свойство 2: значение 2;...}

Итак, правила состоят из селекторов и описаний их свойств. В качестве селекторов используются стандартные имена тегов, свойства которых необходимо дополнить или изменить. Все, что находится в фигурных скобках, принято называть определением (или описанием). Рассмотрим конкретный пример.

h2 {color: red; font-size: 10 pt;}

Здесь имя селектора h2. В данном правиле использовано два свойства color и font-size. Перечисленные свойства принимают значения соответственно red и 10 pt. Нетрудно заметить, что свойства разделяются точкой с запятой, а значения указываются после знака двоеточия. За счет использования данного стиля помеченный с его помощью текст будет выделен красным цветом (red), а символы будут иметь размер 10 пунктов (pt).

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

Например,

hl,h2,h3 {color: Blue;

font-family: "Times New Roman", Times, serif;

font-weight: bold;}

Группировка трех селекторов позволила задать одинаковые свойства сразу трем заголовкам (типа hl, h2 и h3). Указанные заголовки будут выделены синим цветом. Будет использована гарнитура Times New Roman. Символы заголовков будут иметь полужирное начертание.

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

р {text-indent: 15 mm;}

Такая модификация селектора позволяет начинать каждый новый абзац (параграф) с отступом, равным 15 мм.

Порой требуется одному и тому же тегу (элементу) придать разные свойства. Например, в одном случае заголовок типа h2 должен быть выделен зеленым цветом, а в другом этот же тип заголовка - красным. Подобные задачи решаются путем использования классов и идентификаторов. Во внешнем файле следует поместить описание двух классов:

h2. green {

color : green

}

h2. red {

color : red

Вызов созданных классов в местах форматирования текста осуществляется так:

• 3aronoBOK будет зеленым
• 3aronoBOK будет красным

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

Следующий стиль имеет название элемента, которое не совпадает с именем какого-либо тега:

.whiteblue { color: #FFFFFF; background-color: #0000FF }

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

Каскадные таблицы стилей позволяют использовать большое число селекторов, свойств и их значений. Так таблицы спецификации CSS2 содержат более ста свойств. Полное и подробное их рассмотрение потребует недопустимо большого времени и объема текста. В необходимых случаях для выбора нужных элементов, свойств и их значений следует обращаться к справочной литературе [3] или базам помощи, которыми оснащены Webредакторы. Видимо, в подобных ситуациях следует отдать предпочтение редакторам таблиц CSS. Удобен в работе редактор каскадных таблиц стилей TopStyle фирмы Bradsoft.

Программа содержит три окна. В верхнем левом окне демонстрируется код стиля. В правом верхнем окне приводятся свойства и их значения. Подбор свойств и значений осуществляется интерактивно с учетом контекста. В нижнем окне редактора демонстрируются действия созданных стилей. Четвертая слева кнопка на панели инструментов позволяет выбрать нужный селектор.

Следует обратить внимание на то, что директивы на языке CSS можно записывать заглавными и строчными буквами (их работоспособность не зависит от выбранного регистра). Напомним, что теги языка HTML также регистронезависимы.

Рассмотрим несколько примеров использования встроенных CSS.

Расстояние между буквами в этом предложении составляет 3 мм.

Такое форматирование (изменение межбуквенного расстояния) выполнено с помощью атрибута letter-spacing:

Каскадные таблицы стилей позволяют изменить межстрочное расстояние. Можно увеличить расстояние между строками. В данном случае оно

составляет 30 типографских пунктов (один пункт содержит 0,35 мм).

Это реализовано с помощью элемента <р>.

Данный абзац начинается с отступа ("Красной строки") размером 12 мм. Такое форматирование текста обеспечивает элемент < р stylc="text-indent:12 mm">.

Этот абзац выровнен по правому и по левому краям. Такое выравнивание чаще всего используется в книгах и статьях. Крайние буквы строк на левой и правой границах страницы выстраиваются вдоль вертикальных линий. Такой вид форматирования обеспечивает элемент <р>.

Краткие итоги

Каскадные таблицы стилей позволяют отделить процедуру создания содержания страницы от процедуры придания ей нужной формы.

Внешние CSS дают возможность управлять формой сразу нескольких Web-страниц и даже сайтов.