Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако реализованы в реально действующих навигаторах они были только в 1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0.
Идея, положенная в основу таблиц достаточно проста. К версии 4.0 HTML превращается в язык разметки, опирающийся на контейнерное представление документа, т.е. документ - это множество вложенных в друг друга контейнеров, каждый из которых имеет свои свойства по представлению информации. Многие контейнеры можно сгруппировать в классы однотипных контейнеров, например, заголовки или параграфы. Свойства контейнера, перечисляются в качестве атрибутов тега начала контейнера. При этом у большинства контейнеров, начиная с версии HTML 3.0 набор этих атрибутов типизирован.
Контейнеры во многом походят на блоки в универсальный языках программирования. При этом свойства контейнеров можно интерпретировать как переменные, которые принимают определенные значения в пределах каждого из контейнеров. Как и в языках программирования, например в Паскаль, описание свойств можно вынести в специальную секцию данных в начале документа. Такой секцией и является секция описания каскадных стилей. Обычно стиль описывается внутри контейнера STYLE:
<style type="text/css">
<!-- Описание стилей -->
</style>
Internet Explorer поддерживает только спецификацию w3c.
Начнем с простого примера. Нужно описать стили отображения текста в параграфе и заглавии документа:
Пример:
<html> <head> <style type="text/css">; p {color:blue; font-family: times; font-size:10pt;}; h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;} ; </style> </head> <body> <h1>Каскадные таблицы стилей</h1> <p> This is a first part of the document ; </body> </html>
Сoзданный таким образом документ будет отображаться следующим образом:
Разберем теперь описатели стилей более подробно. Определим область их применения и способы встраивания в документ.
Новые HTML-контейнеры
С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN. Вообще говоря LINK - это не новый тег, а новое применение старого тега.
STYLE(<style type="...">......</style>) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем не менее, в примерах чаще всего приводится этот контейнер внутри контейнера HEAD.
LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей:
Для применения этого описателя стилей в заголовок документа необходимо включить следующий тег:
Пример:
<html> <head> <link rel="stylesheet" href="css1.css" type="text/css"> </head> <body> <h1>Каскадные таблицы стилей</h1> <p> This is a first part of the document<br> The body of the document should be here. </body> </html>
Из данного примера видно, что описание стилей в фале css1.css полностью совпадает с описанием в контейнере STYLE. В тексте файла описания стилей не нужно указывать теги контейнера STYLE.
Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные тэги.
Новые свойства контейнеров HTML
Перечень новых атрибутов у тегов HTML следует начать с атрибута STYLE. Этот атрибут используется для определения стиля отображаемого контейнера непосредственно внутри тега начала контейнера:
<h3 style=
"line-hieght:24pt; font-weight:bold; color:
blue">The bluetext<h3style="lineHeight='24pt'; fontWeght='bold';
color='blue'">The blue text
Можно также определить класс стилей и использовать его при помощи атрибута CLASS:
<style type="text/css">
h3.class1 {font-size:12pt;color=blue}
</style>
.....
<h3 class="class1">This is a blue text
В данном случае мы определили класс заголовков третьего уровня, но можно определить класс, который можно будет применять к любым контейнерам, а не только к заголовкам:
Kроме определения классов существует еще возможность создания поименованных стилей. Поименованный стиль создается как уточнение какого-либо класса:
<style type="text/css">
h3.class1 {font-size:12pt;color=blue}
#C1 { font-size: 20;}
</style>
....
<h3 class="class1">This is a blue text
<h3 class="class1" id="C1">This is a blue text
Таким образом, атрибуты контейнеров позволяют связать описатели стилей с содержанием контейнеров и управлять формой отображаемой информации.
Свойства контейнеров, управляемые описателями стилей
Первую группу свойств составляют свойства шрифтов: font-size, font-family, font-weight, font-style.
Вторую группу свойств составляют свойства текста: line-height, text-decoration, text-transform, text-align, text-indent.
Третью группу свойств составляют свойства блоков текста: margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color
Четвертую группу составляют описатели цвета фона и цвета текста: color, background-image, background-color.
Кроме того, существуют свойства определяющие тип пульки у элементов списка и ряд других свойств элементов HTML-разметки.
Свойства фона
Листы стилей HTML дают возможность определять фон как с помощью цвета, так и с помощью изображения. Следует отметить, что использование описанных далее свойств не определяет фон Web-страницы в целом. Например, если определить фон для дескриптора <UL>, как сделано в следующем примере, то этот фон будет появляться на странице вместе с дескриптором.
Свойства фона, описанные в этом разделе, можно группировать с помощью атрибута background. Цвет фона, изображение, место его размещения и расположение мозаикой, а также возможность его прокрутки определяются, например, следующим образом: background: white URL(http://www.myserver.com/images/bg.dif) repeat-x fixed top, left
Свойство background-attachment определяет, будет ли фоновое изображение зафиксировано в окне браузера или пользователь сможет прокручивать его. Это свойство можно использовать для создания водяных знаков, оставшихся на Web-странице в качестве фона, независимо от того, какую ее часть в данный момент просматривает пользователь.
Свойство background-attachment может иметь два значения:fixed и scroll
Fixed: Изображение фиксируется в окне браузера
Scroll: Изображение прокручивается во время прокрутки пользователем окна
Цвет фона элемента можно менять с помощью свойства background-color. Значением этого свойства может быть одно из имен цветов или RGB-значение, к примеру #808080. Например, при определении стиля дескриптора <UL>, который меняет цвет фона на голубой, у всех неупорядоченных списков HTML-файла будет голубой фон.
! Изменение цвета фона некоторых типов дескрипторов служит целям выделения информации на Web-странице.
Можно устанавливать фон элемента в виде изображения, приписав свойству background-image значение URL изображения. При этом возникает эффект водяных знаков позади элемента (содержимое элемента находится поверх фонового изображения). Устанавливать URL следует таким образом:
У большинства свойств листов стилей можно определить параметр, имеющий размерность длины. Для определения этой длины можно использовать различные единицы. HTML поддерживает два типа единиц: относительные и абсолютные. Относительные единицы:
em
0.5em
Высота шрифта элемента на устройстве отображения
ex
0.75ex
Высота буквы Х на устройстве отображения
px
15px
Пиксели на устройстве отображения
По возможности следует использовать относительные единицы, чтобы Web-страница масштабировалась при переходе от браузера к браузеру. Можно использовать и абсолютные единицы:
in
0.5in
Дюймы
cm
1 cm
Сантиметры
mm
20 mm
Миллиметры
pt
12 pt
Пункты (1 pt = 1/72 inch)
pc
1 pc
Пика (1 pc = 12 pt)
Во многих случаях можно также указывать длину в процентах. В листах стилей проценты почти всегда определяются относительного элемента. Например, если указан кегль шрифта, равный 50%, то это означает, что кегль шрифта данного элемента в два раза меньше шрифта родительского элемента.
С помощью свойства background-position можно изменять положение фонового изображения. Это положение всегда определяется относительно левого верхнего угла элемента, в котором размещается изображение. Если размещать изображение в дескрипторе <UL>, то его положение будет определяться относительно левого верхнего угла упорядоченного списка.
Свойство background-position выглядит следующим образом:
background-position: x y
где x и y представляют собой координаты по горизонтали и по вертикали. Они могут выражаться в процентах от размера элемента, в абсолютном выражении, например lin (один дюйм) или ключевыми словами, приведенными в табл. Б.2, представляющими относительное положение. Например,
background-position: center 20
Значения параметра background-position
Top
Выравнивает изображение по верхней границе содержащего его элемента. Подставляется вместо y
Left
Выравнивает изображение по левой границе содержащего его элемента. Подставляется вместо х
Right
Выравнивает изображение по правой границе содержащего его элемента. Подставляется вместо х
Bottom
Выравнивает изображение по нижней границе содержащего его элемента. Подставляется вместо y
Center
Выравнивает изображение по центру содержащего его элемента. При подстановке вместо x центрирует по горизонтали. При подстановке вместо х центрирует по вертикали.
Можно указать браузеру пользователя расположить изображения фона мозаикой, так чтобы они заполнили весь элемент. Свойство background-repeat может иметь четыре значения:
repeat
Повторяет изображение, как по горизонтали, так и по вертикали
repeat-x
Повторяет изображение по горизонтали
repeat-y
Повторяет изображение по вертикали
no-repeat
Не повторяет изображение
первый
второй
третий
Свойство color определяет цвет переднего плана элемента. Таким образом, браузер устанавливает цвет текста элемента именно таким, какой указан в этом свойстве. В качестве значений можно использовать любое из имен цветов или RGB-значение. Имена могут быть следующими:
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow
первый
второй
третий
Свойства блока
Рекомендации Консорциума W3C по листам стилей дают возможность определить для элементов Web-страницы рамки (border), поля (margin) и расстояние между рамкой и содержимым (padding). Например, можно заключить в рамку заголовок или изменить поля дескриптора <P>, в результате чего каждый новый абзац, помеченный этим дескриптором, будет иметь заданный отступ. Ниже представлены параметры, с помощью которых можно менять вид рамки, связанной с элементом.
Border
Эти свойства устанавливают левую, правую, нижнюю и верхнюю рамки элемента. Можно устанавливать цвет, ширину, и стиль рамки.
border-left-width. Ширина левой границы рамки устанавливается при помощи свойства border-left-width. Оно не применяется к остальным сторонам рамки. Этому свойству можно присвоит любое значение (thin, medium, thick,length).
Ширина правой границы рамки устанавливается при помощи свойства border-right-width. Оно не применяется к остальным сторонам рамки. Этому свойству можно присвоит любое значение (thin, medium, thick,length).
Свойство border-style определяет стиль рамки, отображаемой браузером. Для этого свойства можно указать одно из четырех значений:
Одно значение
Стиль применяется ко всем четырем сторонам рамки.
Два значения
К верхней и нижней стороне применяется стиль, указанный первым значением, а к левой и правой - вторым.
Три значения
К верхней стороне применяется стиль, указанный первым значением, к правой и левой сторонам - стиль, указанный вторым значением, а к нижней стороне - стиль, указанный третьим значением.
Четыре значения
К верхней стороне применяется стиль, указанный первым значением, к правой стороне - стиль, указанный вторым значением, к нижней стороне - стиль, указанный третьим значением, а к левой стороне - стиль, указанный четвертым значением.
Значения, которые можно присваивать стилю границ рамки.
none
Рамка отсутствует.
dotted
Пунктирная линия над элементом.
dashed
Штрих пунктирная линия над элементом.
solid
Сплошная линия.
double
Двойная линия над элементом. Суммарная толщина двух линий и пробела между ними равна значению свойства border-width.
groove
Трехмерная борозда. Цвет устанавливается свойством color.
Ridge
Трехмерный гребень. Цвет устанавливается свойством color.
Inset
Трехмерная врезка. Цвет устанавливается свойством color.
outset
Трехмерный орнамент. Цвет устанавливается свойством color.
Ширина верхней границы рамки устанавливается при помощи свойства border-top-width. Оно не применяется к остальным сторонам рамки. Этому свойству можно присвоить любое из значений свойства border-bottom-width.
Примечание: Для отображения рамки необходимо установить не только ее ширину, но и стиль с помощью свойства border-top-width, поскольку стиль по умолчанию - none.
Margin. Эти свойства устанавливают левые, правые, нижние и верхние поля элемента. С их помощью можно устанавливать только размер поля.
Нижнее поле устанавливается свойством margin-bottom. Можно присвоить ему соответствующее абсолютное значение, значение в процентах (относительно height и width) или значение auto, которое позволяет браузеру определить оптимальный размер полей элемента. Для создания специальных эффектов можно использовать отрицательные значения.
Свойством margin-left устанавливается левое поле. Можно присвоить ему соответствующее абсолютное значение, значение в процентах (относительно height и width) или значение auto, которое позволяет браузеру определить оптимальный размер полей элемента. Для создания специальных эффектов можно использовать отрицательные значения.
Свойством margin-right устанавливается правое поле. Можно присвоить ему соответствующее абсолютное значение, значение в процентах (относительно height и width) или значение auto, которое позволяет браузеру определить оптимальный размер полей элемента. Для создания специальных эффектов можно использовать отрицательные значения.
Свойством margin-top устанавливается верхнее поле. Можно присвоить ему соответствующее абсолютное значение, значение в процентах (относительно height и width) или значение auto, которое позволяет браузеру определить оптимальный размер полей элемента. Для создания специальных эффектов можно использовать отрицательные значения.
Пример:
<P style="margin:50px 100px 200px"> Эти свойства устанавливают левые, правые, нижние и верхние поля элемента. С их помощью можно устанавливать только размер поля. </P>
Эти свойства устанавливают левые, правые, нижние и верхние поля элемента. С их помощью можно устанавливать только размер поля.
Padding. Эти свойства заполнения определяют, какое пространство браузер оставляет между границей и содержимым элемента. С его помощью можно устанавливать только размер поля.
Свойства рамки можно группировать пятью различными способами. Можно указать свойства для конкретной границы элемента с помощью значений border-top,border-right ,border-bottom и border-left. Можно указать сразу все стороны рамки с помощью атрибута border.
Как показано в примере, остальные атрибуты определяют ширину, стиль и цвет рамки: Border-top: thin dotted black
Сгруппировать свойства полей можно при помощи атрибута margin. Верхнее, правое, нижнее и левое поля определяются следующим образом: margin: .5in lin .5in lin
Можно сгруппировать свойства заполнения (пространства между рамкой и содержимым) при помощи атрибута padding. Верхнее, правое, нижнее и левое свободное пространство до рамки определяются следующим образом:
padding:.25in .25in .25in .25in
border-bottom-width
Ширина нижней границы (стороны рамки) устанавливается при помощи свойства border-bottom-width. Этому свойству можно приписать одно из значений:
thin
Отображает границу в виде тонкой линии
medium
Отображает границу в виде линии средней толщины
thick
Отображает границу в виде толстой линии
length
Устанавливает точное значение толщины в пунктах, дюймах, сантиметрах или миллиметрах (например, 2in)
Свойство padding-bottom указывает, какое пространство остается между содержимым элемента и его нижней границей. Можно присвоить ему соответствующее абсолютное значение, значение в процентах (относительно height и width).
Свойство padding-left указывает, какое пространство остается между содержимым элемента и его левой границей. Можно присвоить ему соответствующее абсолютное значение, значение в процентах (относительно height и width).
Свойство padding-right указывает, какое пространство остается между содержимым элемента и его правой границей. Можно присвоить ему соответствующее абсолютное значение, значение в процентах (относительно height и width).
Свойство padding-top указывает, какое пространство остается между содержимым элемента и его верхней границей. Можно присвоить ему соответствующее абсолютное значение, значение в процентах (относительно height и width).
Свойство clear определяет, как браузер отображает плавающие элементы по сторонам данного элемента.
Значение этого свойства показывает, с какой стороны от элемента нельзя устанавливать плавающие элементы. Например, clear: left означает, что браузеру нельзя устанавливать плавающий элемент с левой стороны от данного элемента. В таблице перечислены допустимые значения этого свойства.
Значения свойства clear
none
Плавающие элементы можно располагать со всех сторон
left
Плавающие элементы нельзя располагать с левой стороны
right
Плавающие элементы нельзя располагать с правой стороны
both
Плавающие элементы нельзя располагать с левой и правой сторон
Float. Свойство указывает, что элемент располагается около левой или правой грани, а остальные элементы его обтекают. В таблице указаны значения, которые можно присваивать этому свойству:
none
Отобразить элемент там, где он находится
left
Передвинуть элемент влево и установить обтекание текстом
right
Передвинуть элемент вправо и установить обтекание текстом
С помощью свойства height можно установить общую высоту элемента. Применять это свойство можно как к изображениям, так и к текстовым блокам. Например, можно с помощью свойств height и width создать на Web-странице специальное предупреждение с фиксированными размерами. Однако свойство height больше годится для изображений. Можно приписать этому свойству абсолютное значение, значение в процентах или значение auto, которое позволяет браузеру определить оптимальный размер полей элемента.
С помощью свойства width можно установить любую ширину элемента. Применять это свойство можно как к изображениям, так и к текстовым блокам. Можно присвоить ему соответствующее абсолютное значение, значение в процентах или значение auto, которое позволяет браузеру определить оптимальный размер полей элемента.
Свойства шрифта
Используя font, можно группировать все свойства шрифта. В следующем примере показано, как указать ширину, начертание, размер и семейство шрифта:
Font: bold normal 12pt times, serif
Семейство font-family представляет список семейств шрифтов элемента. Можно указать одно семейство или список возможных семейств, разделенных запятыми, как показано в следующем примере:
Font-family: Courier, Times, Serif
Можно использовать семейство, предположительно имеющееся на компьютере пользователя, или типовой шрифт. В таблице приведены типовые шрифты и указаны шрифты, которые имеют подобное начертание.
Типовые шрифты:
Serif
Times New Roman
sans-serif
Arial
cursive
Script
fantasy
Comic
monospace
Courier New
На тот случай, если у пользователя нет указанного шрифта, всегда в конце списка надо указать типовой шрифт. В предыдущем примере последним в списке находился типовой шрифт serif. Если у пользователя не окажется шрифтов courier и times, то браузер вместо них воспользуется типовым шрифтом.
Если используется гарнитура с названием из нескольких слов, то это название надо заключить в кавычки, как показано в следующем примере:
Font-family: "Courier New", serif
Свойство font-size указывает размер шрифта в пунктах (pt), дюймах (in), сантиметрах (cm) или пикселях (px). Можно также использовать и размер в процентах относительно шрифта родительского элемента. Можно пользоваться значениями, указанными в таблице:
xx-small
На 50 % меньше, чем шрифт x-small
x-small
На 50 % меньше, чем шрифт small
Small
На 50 % меньше, чем шрифт medium
medium
Шрифт среднего размера, обычно 10 пунктов
Large
На 50 % больше, чем шрифт medium
x-large
На 50 % больше, чем шрифт large
xx-large
На 50 % больше, чем шрифт x-large
larger
На 50 % больше, чем шрифт родительского элемента
smaller
На 50 % меньше, чем шрифт родительского элемента
Приложение: Рекомендации консорциума W3C относительно 50-процентного изменения масштаба в броузерах являются только рекомендациями. Поставщики могут использовать такие процентные соотношения масштабов, какие им удобны. Поэтому значения, приведенные в табл. Б.12, не являются обязательными.
Свойство font-style позволяет изменять начертание шрифта. Можно пользоваться значениями, указанными в таблице:
normal
Обычный
oblique
Наклонный
italic
Курсив
Свойство font-variant используют для отображения текста в виде букв, заглавных по начертанию, но по размеру - строчных. При значении normal браузер отображает текст как обычно, а значение small-cap заставляет браузер отображать текст указанным образом.
Свойство font-weight определяет толщину шрифта. Оно может иметь значения normal, bold, bolder или lighter. Можно использовать ряд чисел 100, 200, : 900, каждое последующее число соответствует шрифту большей толщины. Например, строка font-weight: 700 устанавливает шрифт большей толщины, чем строка font-weight: 400.
Примечание: Значение 400 приблизительно соответствует обычной толщине шрифта.
Пример:
<font style="font-family:fantasy;font-size:50;font-style:italic;font-weight: 800">font-weight: 800 font-style:italic Font-family: fantasy font-size:Small</font>
Cвойства списка
Свойства списков используются для указания того, как должен быть отображен список в окне браузера. Можно изменить положение метки (list-style-position) и стиль изображения, используемого в качестве метки (list-style-position и list-style-image). В этом разделе рассказано о каждом из этих свойств.
Свойства списка наследуются, поэтому, если было определено свойство для дескриптора <UL>, то это свойство устанавливают все заключенные в нем дескрипторы <LI>. Эти дескрипторы применимы только для задания параметров списков HTML. Используя list-style, можно группировать свойства списка. Тип метки, ее изображение и местоположение указываются следующим способом:
Свойство list-style-image используется для определения изображения, которое браузер будет использовать в качестве метки для пунктов списка. Значением свойства может быть только URL изображения (в формате URL(address)). Это изображение и будет меткой:
Чтобы применить это свойство ко всем пунктам списка, следует установить его в таком дескрипторе списка, как <UL>, а не в дескрипторе отдельного пункта списка <LI>. Однако можно определить отдельный пункт списка, установив это свойство в одном дескрипторе <LI>.
Свойство list-style-position определяет относительное размещение меток. В таблице приведены возможные значения этого свойства.
Inside
Текст пункта списка продолжается на следующей строке под меткой
Outside
Текст пункта списка продолжается на следующей строке под текстом (висячий отступ)
Свойство list-style-type определяет тип метки, которую будет отображать браузер. Эти метки можно использовать вместо меток-изображений. В таблице приведены все возможные значения этого свойства.
