HTML-код имеет иерархическую структуру. Весь документ кодируется
внутри тегов
Наследование стилей означает, что, если определен какой-то стиль для тега BODY, то этот стиль будет относиться ко всем тегам документа, без повторных определений. Соответственно, если задан стиль для некоторого тега, то все теги, расположенные внутри него в HTML-программе, будут этим стилем обладать также.
Пусть для тега P задан стиль:
P { color: red;
font-size:14pt;
font-family:Arial,sans-serif;
}
|
Тогда содержимое тега EM, помещенного внутрь абзаца, будет также выведено на экран красным рубленым шрифтом размером в 14 пунктов:
Если нужно, например, добавить для тега EM разрядку текста, то такую модификацию нужно задать дополнительно:
Как видите, содержимое тега EM выводится так же, как и
содержимое тега P, внутри которого он содержится (красным
рубленым шрифтом в 14 пунктов), но благодаря дополнительному
определению
Внутри тега-потомка можно не только ввести дополнительные стилевые определения, но и переопределить стилевые свойства родителя:
Можно написать стилевое определение, которое будет работать только при определенной комбинации вложенности тегов. Например, можно установить цвет EM синим только для случая, если этот тег расположен внутри тега H3:
Вы видите, что EM внутри H3 записывается синим,
а внутри P — черным. Обратите внимание, что в стилевом
определении отсутствует запятая. Это и есть признак контекстного
определения. Если же записать
Контекстные и групповые определения можно комбинировать. Запись
H3 EM{ color: blue }
H2 I{ color: blue }
|
Стилевые определения можно описывать без указания тега. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному тегу. Такие стилевые определения называются классами. Класс записывается следующим образом:
.имя
{
характеристика: величина;
...
характеристика: величина;
}
Иными словами, определение записывается, как обычно, но вместо указаний
на теги размещается конструкция
.def
{
color:red;
font-size: 16pt;
font-family:Geneva, Helvetica, sans-serif;
border:solid 0.2cm blue
}
|
Сопоставлять стилевой класс с тегом можно при помощи атрибута
“class”:
Можно образовывать классы на основе существующих стилевых определений. Посмотрите, как в следующем примере определен класс “def” — за основу взято определение стиля для тега P и добавлены новые свойства:
Эти теги играют особую роль для CSS. Они позволяют выделять в
документе отдельные области, задавая для них специфические свойства.
Все, что нужно сделать для этого — это поместить теги,
принадлежащие конструируемой области внутрь
Посмотрите примеры с иллюстрациями использования этих тегов.
При помощи CSS можно отображать элементы на экране, используя реальные координаты, отсчитываемые от левого верхнего угла окна браузера. Такую возможность предоставляет стилевое свойство position со значением absolute. Сами координаты задаются при помощи свойств left (горизонтальная координата) и top (вертикальная координата).
Применение этих свойств иллюстрирует следующий пример.
Как видите, браузер разместил три, заданные тегами
DIV области, в указанные координаты. При этом области
перекрывают друг друга. Ближе к пользователю получается та область,
которая следует в HTML-коде последней. Если переставить порядок
следования тегов DIV в программе, то и порядок
наложения областей друг на друга так же изменится. Однако, CSS
предоставляет программисту и другой, более гибкий инструмент для
управления порядком наложения элементов. Это —
Этот стилевое свойство позволяет указывать, в каком слое (на каком уровне) находится элемент на экране. Номер оcновного уровня (на который выводятся обычные элементы без стилевых указаний) равен нулю. Следовательно, элементы с отрицательным z-index расположены ниже (дальше), с положительным — выше (ближе) основного экранного слоя. Если элементы имеют одинаковый z-index, то они расположены в одном слое. В противном случае, “ближе” к нам расположен слой, имеющий больший z-index.
Weб-программист, благодаря CSS, получает в свои руки гибкий инструмент
для определения своих собственных стилей представления информации на
экране компьютера. Однако, важно не запутаться в том, как созданные
стили будут взаимодействовать друг с другом, с атрибутами тегов (они
тоже определяют стиль!) и со стилями самого браузера (теми стилями,
которыми браузер показывает документ
Как было рассказано в предыдущем уроке, программист может
использовать в
На протяжении одного документа могут применяться все описанные выше
три стилевых механизма. Добавим к этому стили, задаваемые обычными
атрибутами тегов и стиль
Правила, которым должен следовать “послушный” браузер, называются каскадными. Это означает, что для браузера самыми главными являются встроенные стили, затем по убыванию старшинства, внедренный и связанный. Как следует из опытов предыдущего урока, внедренный и связанные стили совершенно равнозначны для браузера. Он всегда следует последнему по-порядку указанию.
Самым младшим в стилевой иерархии оказывается стиль “по умолчанию”. Его браузер использует тогда, когда нет никаких стилевых указаний. В понятие “каскадирование” входит и механизм наследственности, о котором говорилось ранее. Это означает, что, если у потомка нет своего стиля, к нему применяется стиль родителя. Что касается, стилей, задаваемых обычными атрибутами тегов, то они работают по общему каскадному правилу:
|
Это будет показано синим. |
|
|
Это будет показано синим, а это будет показано красным. |
При подготовке заданий, представленных ниже, использовались задачи к лекциям Е.П.Лилитко “Программирование для Internet”. Для построения решений рекомендуется использовать справочник свойств CSS.
