- •1. Внедрение таблиц стилей в документ
- •1.1. Внутренние стили тегов
- •1.2. Глобальные таблицы стилей
- •1.3. Внешние таблицы стилей
- •1.4. Каскады таблиц стилей
- •2. Форматирование с помощью таблиц стилей
- •2.1. Стили символов
- •2.2. Стили цветового форматирования
- •2.3. Стили фона
- •2.4. Стили рамок
- •2.5. Стили визуального отображения
Лабораторная работа № 3. Таблицы стилей
Цель занятия:
Изучить возможности внедрения таблиц стилей в Web-документ.
Освоить приемы форматирования документов с использованием таблиц стилей.
Таблицы стилей расширяют возможности форматирования страниц. Вначале развитие Web-технологий шло по пути стилистических расширений HTML – авторы языка добавляли новые теги и увеличивали количество их атрибутов. Это привело к усложнению и ограничению гибкости Web-страниц. Одновременно были предложены таблицы стилей (CSS), которые изящно решают эти проблемы и превосходят механизмы форматирования в HTML. С помощью таблиц стилей компактно описывают любые стили и применяют их практически без изменений текста HTML-документов.
Например, следующая таблица, хранящаяся в файле mycss.css, описывает стиль абзаца с зеленым цветом текста и со сплошной красной рамкой:
P.special { color: green; border: solid red; }
Для применения этого стиля любой документ достаточно связать с файлом таблицы стилей:
<HTML>
<HEAD>
<LINK HREF="mycss.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<P class="special">B этом абзаце текст должен быть отображен символами зеленого цвета и обрамлен рамкой красного цвета.
</BODY>
</HTML>
Такое описание стилей позволяет гибко управлять стилем всего сайта. При этом таблицы стилей не привязывают HTML к конкретному языку таблиц стилей. Каскады объединяют описания стилей нескольких источников. Например, могут быть стили для корпорации, для группы документов, а также стили для одного документа. Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Но не все языки таблиц стилей поддерживают каскады.
HTML-документы не зависят от устройств. А таблицы стилей применяют к конкретным устройствам или группам устройств. Это позволяет браузерам избежать загрузки ненужных таблиц стилей. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице.
Если в документе применяют стили, то с помощью тега МЕТА указывают на используемый язык таблицы стилей по умолчанию. Например, следующий тег указывает на язык CSS:
<МЕТА HTTP-EQUIV=”Content-Style-TYPE" CONTENT="text/css">
Язык по умолчанию можно описывать и в ссылке на документ. Браузеры язык таблицы стилей по умолчанию для документа обычно определяют в соответствии с последним указанием на язык в документе.
1. Внедрение таблиц стилей в документ
1.1. Внутренние стили тегов
Теги могут иметь атрибут STYLE, который описывает значения параметров стилей текущего тега. Например, в следующем документе в теге абзаца устанавливают зеленый цвет шрифта и обрамление рамкой красного цвета текста текущего абзаца:
<HTML>
<HEAD>
<МЕТА HTTP-EQUIV="Content-Style-TYPE" CONTENT="text/css">
</HEAD>
<BODY>
<P STYLE="color:green; border: solid red;">B этом абзаце текст должен быть отображен символами зеленого цвета и обрамлен рамкой красного цвета.
</BODY>
</HTML>
Такие таблицы стилей называются внутренними, они имеют высший приоритет. То есть, если бы для абзацев ранее была описана другая таблица стилей, то браузер бы игнорировал более раннюю таблицу и отформатировал текущий абзац с помощью внутренней таблицы стилей. Внутренняя таблица стилей форматирует содержимое только текущего тега.
В CSS описания параметров стилей имеют форму
"имя_параметра:значение {;имя_параметра:значение}"
1.2. Глобальные таблицы стилей
Глобальные таблицы стилей описывают в области заголовки документа между тегами <STYLE> и </STYLE>. Тегов STYLE в области заголовка может быть «сколько угодно. Действие глобальной таблицы стилей распространяется на содержимое текущего документа. Тег STYLE имеет следующие атрибуты:
1. TYPE - задает язык таблиц стилей (например, "text/ess") для описываемого тега и имеет приоритет над языком таблиц стилей, используемым по умолчанию. Значение этого атрибута нужно задавать обязательно - для него нет значения по умолчанию.
2. MEDIA - задает дескриптор устройства отображения содержимого описываемого тега. Это может быть один дескриптор устройства или список дескрипторов, разделенных запятыми. По умолчанию устанавливается значение "screen".
3. TITLE - рекомендуемый заголовок.
Например, следующий фрагмент:
<HEAD>
<STYLE TYPE="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
сообщает браузеру о необходимости рисования рамок вокруг всех заголовков H1 в текущем документе и центрирования их.
Если предполагается, что этот документ может быть загружен браузером, не поддерживающим таблицы стилей, то рекомендуется закомментировать содержимое между тегами <STYLE> и </STYLE>. Язык CSS проигнорирует комментарии HTML и этот стиль для заголовков будет соблюдаться. А если браузер не поддерживает CSS, то содержимое <!-- H1 {border-width: 1; border: solid; text-align: center}--> будет прочитано браузером как комментарий HTML.
Синтаксис описания значений параметров стилей в глобальных таблицах стилей совпадает с синтаксисом описания значений параметров внутренних стилей тегов. Однако есть отличия в применении стилей.
Например, тег STYLE может описывать стили для всех тегов:
текущего документа;
указанных классов текущего документа;
текущего документа, у которых в атрибуте ID установлено указанное значение.
Для применения стиля только, например к заголовкам Н1 класса class1, можно записать следующим образом:
<HEAD>
<STYLE TYPE="text/css">
H1.class1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="class1">Стиль влияет на этот заголовок </Н1>
<Н1>А на этот заголовок стиль не влияет</Н1>
</BODY>
Для ограничения применения стиля только, например к тегам с идентификатором id1, можно записать следующим образом.
<HEAD>
<STYLE TYPE="text/css">
#idl {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 ID = "idl">Cтиль влияет на этот заголовок</Н1 >
<Н1>На этот заголовок стиль не влияет</Н1>
<Р ID="idl">Cтиль влияет на этот абзац</Р>
</BODY>
Глобальный стиль можно описывать почти для всех тегов HTML. Но наиболее часто стили описывают для тегов DIV и SPAN. Они удобны тем, что не мешают другим тегам форматирования Теги DIV и SPAN с атрибутами CLASS и ID позволяют неограниченно расширять язык HTML.
Например, в следующем фрагменте тег SPAN применяют для установки малых прописных букв для стиля шрифта:
<HEAD>
<STYLE TYPE="text/css">
SPAN.maintext { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<Р>Здесь текст отображается обычными символами. А следующие слова <SPAN сlаss= "maintext"> выделены малыми прописными буквами</SPAN>. Здесь текст опять отображается обычными символами.
</BODY>
В следующем фрагменте тег DIV применяют для выравнивания содержимого блоков класса divl:
<HEAD>
<STYLE TYPE="text/css">
DIV.divl { text-align: center }
</STYLE> </HEAD>
<BODY>
<DIV class="divl">
<P>Teг блоков действует на все содержимое между тегами DIV и /DIV. Можете повторить количество абзацев или других элементов тела документа и увидите, что выравнивание для класса divl действует и на них. </DIV>
</BODY>
Применение стилей можно ограничивать и типами устройств. Например, в следующем фрагменте при показе на проекторе заголовки H1 будут отображаться синим цветом, а при печати они будут отцентрированы;
<HEAD>
<STYLE TYPE="text/css" MEDIA="projection">
H1 {color: blue}
<STYLE TYPE= "text/css" MEDIA="print">
H1 {text-align: center }
</STYLE>
</HEAD>
В следующем теге задают звуковые эффекты для устройства речевого вывода:
<STYLE TYPE="text/css" MEDIA="aural">
А { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>