Лабораторная работа №5 Каскадные таблицы стилей
Цель: изучить каскадные таблицы стилей.
Приобретаемые навыки: создание и использование каскадных таблиц стилей в собственных Web-страницах.
Впервые идея форматирования HTML-документов с помощью каскадной таблицы стилей (Cascading Style Sheets — CSS) была рекомендована Консорциумом W3C в 1996 году. Присутствие слова «каскадные» в этом термине означает, что листы стилей позволяют создавать иерархию стилевых свойств, согласно которой локальный стиль отменяет глобальный стиль. С появлением CSS у разработчиков появилась возможность отделить структуру HTML-документа от его формата.
Таблица стилей(CSS) — представляет собой набор правил, которыми определяется применение стилей форматирования к дескрипторам HTML-документа.
CSSпредполагает три типа таблицы стилей: встроенная, внутренняя и внешняя.
Встроенная(embedded). Свойства стиля указывают в верхней части HTML-документа — в пределах дескрипторов <style>. Стиль, который назначен определенному дескриптору, будет унаследован всеми такими же дескрипторами в данном HTML-документе.
Внутренняя(inline). Атрибуты стиля могут быть объявлены в любой части кодаWeb-страницы. Другими словами, каждому HTML-дескриптору Web-страницы назначают собственные атрибуты стиля.
Внешняя(linked). Свойства стилей находятся в отдельном файле. Подобные файлы могут быть связаны с любым HTML-документом. Для этого в код Web-страницы необходимо включить дескриптор <link>, который должен находиться в пределах дескриптора <head>.
Определение правил css
Таблицы стилей принято размещать в пределах дескрипторов <Style> …</Style>.
<STYLEtype=”text/css”>
<!-- Описание стиля -->
</STYLE>
В этом коде значение text/cssатрибутаtypeсообщает браузеру, что в текущем файле применен текст на языкеCSS.
Каскадная таблица стилей представляет собой набор правил форматирования HTML-дескрипторов. Например, для того чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:
BODY {background:black}
Согласно спецификации CSS назначение стиля тому или иному элементу HTML состоит в установлении связи:
Элемент {определение стиля}
В таблице стилей HTML-дескрипторы не заключаются в скобки, в то время как свойстваCSSдолжны находиться в фигурных скобках. Значение свойства присоединяется к стилю при помощи двоеточия. Для каждого HTML-дескриптора можно указать несколько свойств стиля:
BODY {background:black; color:white}
Свойства разделяются точкой с запятой. Удобно записывать свойства на разных строчках:
BODY {
background:black;
color:white
}
Одно и то же правило стиля можно применять сразу к нескольким различным дескрипторам Web-страницы:
BODY, TD, H1{
background:black;
color:white
}
Дескрипторы отделяются запятой.
Можно одному и тому же дескриптору присвоить несколько разных стилей, добавив к имени дескриптора через точку имя стиля. Например:
Table.nav {background: aqua}
Table.rest {background:yellow;
text-align:center;
color:black}
Для того чтобы таблице HTML-документа назначить объявленные свойства стиля, необходимо воспользоваться атрибутом class.
<Table class=”nav” width=”100%”>
<Table class=”rest” width=”50%”>
При разработке Web-страницы часто возникает необходимость изменить стиль только одного элемента (не затрагивая стилей других однотипных элементов). Можно использовать селектор id. Пример:
#red{color:FF0000}
Нужный элемент абзаца должен содержать одноименное значение атрибута id:
<Pid=”red”>Этот абзац будет отображен красным шрифтом</P>
Признаком селектора id является символ «#» перед именем. Селектор id применяется в пределах тела документа BODY для задания индивидуального стиля оформления конкретного документа.
Значения атрибутов class и id в тегах HTML записываются в кавычках. Селектор класса и селектор id в листе стиля (<STYLE>…</STYLE>) указываются без кавычек.