Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лр_4_таблицы стилей.doc
Скачиваний:
13
Добавлен:
09.04.2015
Размер:
203.26 Кб
Скачать

Лабораторная работа № 3. Таблицы стилей

Цель занятия:

  1. Изучить возможности внедрения таблиц стилей в Web-документ.

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

Таблицы стилей расширяют возможности форматирования страниц. Вначале развитие 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>