Цель работы: получить начальные навыки работы с таблицами каскадных стилей CSS.
Ход работы
Таблицы стилей позволяют управлять отображением практически любого содержимого HTML документа. Например, с их помощью можно задать цвет, шрифт и прочие параметры, влияющие на то, как должны показываться заголовки. Можно задать полужирное или еще какое-нибудь начертание шрифта определений в списке определений.
С использованием таблиц стилей можно забыть о необходимости физического форматирования текста, а также о настройке отображения таблиц, списков и других элементов HTML документов. Кроме того, таблицы стилей позволяют настраивать даже параметры отображения содержимого документа, недоступные при использовании HTML элементов (отступы абзацев, стили рамок рисунков и многое другое, вплоть до интервала между буквами текста и свободного позиционирования элементов страницы).
внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML элемента LINK. При этом используются следующие атрибуты этого элемента:
• href – задает URI файла с подключаемой таблицей стилей;
• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;
• type – при подключении CSS задается значение text/css;
• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).
HTML элемент LINK задается при помощи одиночного тега <LINK>, который помещается в шапке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:
<HEAD>
<LINK href = "mystyle.css" rel = "stylesheet" type = "text/css">
<LINK href = "mystyle_ex.css" rel = "stylesheet" type = "text/css">
<HEAD>
Встроенные таблицы стилей задаются внутри HTML элемента STYLE (между парными тегами <STYLE> и </STYLE>), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML элемента LINK.
Таблицы стилей представляют собой множество записей, называемых правилами. Каждое правило CSS состоит из двух частей: селектора и объявления стиля. Селектор несет в себе информацию, достаточную для нахождения в документе элементов, к которым применяется стиль. Объявление стиля представляет собой набор пар свойство/значение, заключенный в фигурные скобки {}. Синтаксис правила CSS следующий:
При объявлении стиля может быть задано как значение только одного свойства, так и значения сразу нескольких свойств CSS. В последнем случае пары свойство/значение отделяются друг от друга символом ;.
То, что обозначено в приведенном примере как селектор, может быть названием HTML элемента (например, P, STRONG, H1), идентификатором фрагмента документа (#par1, #tabl1), именем стилевого класса (.par1, P.par1) или более сложной конструкцией, описанной ниже.
Свойство представляет один из предопределенных строковых идентификаторов, обозначающих тот или иной параметр, поддерживаемый для HTML элемента (например, color, backgroundcolor, font-family). Тип присваиваемого значения зависит от конкретного параметра.
Одни и те же правила отображения могут применяться к нескольким различным селекторам. В этом случае запись в таблице стилей будет иметь следующий вид:
Рассмотрим самое простое применение CSS – задание стиля текста (или прочего содержимого), содержащегося внутри определенных HTML элементов . Для этого нужно указать в качестве селектора название HTML элемента (или нескольких HTML элементов), например:
H1 {color: red; font-family: arial}
H2, H3 {color: blue; font-family: courier}
P {font-style: italic}
Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, заголовки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML элемента P будет отображаться курсивом.
Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный CSS?файл. Тогда получится внешняя таблица стилей. Можно поместить определение CSS внутрь HTML документа так, как это показано в примере 1.
Задание 1. Создать файл Primer1.HTML. Внести в этот файл текст приведенного примера и посмотреть на результат.
Второй способ применения таблиц стилей основан на использовании стилевых классов. Рассмотрим это на примере:
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
Здесь созданные в таблице стилей селекторы указывают на четыре стилевых класса с именами arial, newroman, italic, bold. Перые три правила могут использоваться только для HTML элементов H1, H2 и P, для которых заданы стилевые классы arial, newroman и italic соответственно. Четвертый селектор позволяет применить правило к любому элементу, стилевой класс которого указан как bold.
Назначение стилевого класса HTML элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
Пример 2. Использование стилевых классов
<HTML>
<HEAD>
<TITLE>Использование стилевых классов</TITLE>
<!– Определение таблицы стилей–>
<STYLE type = "text/css">
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
<P>Текст абзаца
<H1 class = "arial">Измененный заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<P class = "italic">Курсивный текст абзаца
<H2 class = "newroman">Измененный заголовок второго уровня</H2>
<P class = "bold">Полужирный текст абзаца
</BODY>
</HTML>
Задание 2. Создать файл Primer2.HTML. Внести в этот файл текст приведенного примера и посмотреть на результат.
Стили можно определять не только в таблице стилей. При помощи атрибута style можно создавать так называемые «инлайн?стили». Атрибут style поддерживается для тех же HTML элементов, что и атрибут class. Для создания «инлайн стиля» атрибуту style присваивается значение, которое обычно записывается в скобках {} в строке таблицы стилей (то есть объявление правила). Ниже приведен переделанный пример 10.2, в котором как раз и реализовано определение стилей в атрибуте style (обратите внимание, что при этом отпала необходимость определения самой таблицы стилей) (пример 10.3).
Пример 3. Использование атрибута style
<HTML>
<BODY>
<H1>Заголовок первого уровня</H1>
<P>Текст абзаца
<H1 style = "color: red; font-family: arial">Измененный заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<P style = "font-style: italic">Курсивный текст абзаца
<H2 style = "color: blue; font-family: newroman">Измененный заголовок второго уровня</H2>
<P style = "font-weight: bold">Полужирный текст абзаца
</BODY>
</HTML>
Задание 3 Создать файл PRIMER3.HTML . Внести текст примера и посмотреть полученный результат.
Рассмотрим еще один способ применения правил отображения, задаваемых с помощью стилевых таблиц. В стилевой таблице можно задать CSS свойства HTML элемента, имеющего определенное значение атрибута .
Как это делается, лучше сразу рассмотреть на примере 4.
Пример 4. Использование атрибута id в CSS
<HTML>
<HEAD>
<TITLE>Использование id в CSS</TITLE>
<!– Определение таблицы стилей–>
<STYLE type = "text/css">
#left_pointer {width: 60; height: 120}
#right_pointer {width: 120; height: 60}
</STYLE>
</HEAD>
<BODY>
<P>Рисунки без применения стилей
<IMG src = "left.gif">
<IMG src = "right.gif">
<P>А к этим рисунками применен стиль (изменение размера)
<IMG src = "left.gif" id = "left_pointer">
<IMG src = "right.gif" id = "right_pointer">
</BODY>
</HTML>
В данном случае при помощи CSS задаются параметры отображения двух рисунков.
Задание 4. Создать в графическом редакторе файлы left.gif и right.gif. Это могут быть, например стрелки.
