Предназначение стилей
Язык HTML был создан для описания содержимого документа. Его теги были предназначены для определения «заголовка», «параграфа», «таблицы» (<h1>, <p>, <table> и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится браузер.
Но это породило процесс создания своих тегов и атрибутов к исходной спецификации HTML-браузерами Netscape и Internet Explorer (такие, например, как тег <font> и атрибут color), что затруднило создание Web-сайтов, на которых содержимое документов HTML было четко отделено от уровня представления документа.
В этой ситуации консорциум W3C создала при разработке стандарта HTML 4.0 каскадные таблицы стилей.
Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии CSS.
Сегодня эту технологию поддерживают все основные браузеры (Internet Explorer, Mozilla Firefox, Opera и др.).
Таблицы стилей могут существенно сократить объем работы
Таблицы стилей определяют вывод элементов HTML (как, например, тег font и атрибут color в HTML 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .css. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в Web, редактируя только один, единственный документ CSS.
Приоритет использования стилей
Для каскадных таблиц стилей определен приоритет использования. Если для элемента HTML определено более одного стиля, то все стили будут последовательно «каскадированы» в новую «виртуальную» таблицу стилей, согласно следующим правилам:
- стили, используемые по умолчанию браузером;
- стили, хранящиеся во внешней таблице;
- стили, хранящиеся во внутренней таблице стилей (внутри тега <head>);
- встроенный стиль (внутри элемента HTML).
Эти правила определяют порядок увеличения приоритета стилей.
Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, т.е. будет переопределять стиль, который объявлен в теге <head>, во внешней таблице стилей или в браузере (значение по умолчанию).
Синтаксис
Синтаксис CSS состоит из трех частей: селектора, свойства и значения:
селектор {свойство: значение}
Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.
- Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок:
- Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:
h1 {font-family: "lucida calligraphy"} - Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:
table { font-family: arial, "sans serif"; border-style: dotted} - Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:
h2
{
font-family: arial;
margin-right: 20pt;
color:#ffffff } - При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом
sans serif:
p,table,li
{
font-family: "sans serif";
}
При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.
Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей:
h1.steleft {margin-left: 10pt}
h2.steright {margin-left: 20pt}
Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:
<h1 class="steleft">
Заголовок с внешним отступом 10 пунктов.
</h1>
<h2 class="steright">
Заголовок с внешним отступом 20 пунктов.
</h2>
В тоже время не допускается следующее определение атрибута class:
< h1 class="steleft" h2 class="steright">
т.е. можно определить только один атрибут class
Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class.
В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.
В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе “.left”:
<table class="left">
Эта таблица будет иметь внешний отступ, равный 40 пунктам.
</table>
<p class="left">
Этот параграф будет иметь внешний отступ, равный 40 пунктам.
</p>
Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.
Селектор идентификатора (id)
Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #.
Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением “fontsz”:
Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением “first”:
ul#first
{
list-style: disc;
color: #ffffff
}
Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.