Создание стилей



Предыдущая | Следующая

Создание стилей
Предположим, что нам нужно выделить зеленым цветом весь текст, набранный полужирным шрифтом, то есть содержимое всех тегов <strong>. Для этого нам будет достаточно записать в секции заголовка нашей Web-страницы 2.5.html вот такой фрагмент кода (выделен полужирным шрифтом):
<HEAD> <STYLE>
STRONG { color: green; } </STYLE>
</HEAD>
Если теперь мы откроем эту страницу в Web-обозревателе, то увидим, что слово "Microsoft" позеленело. Так что же мы сделали? И что это за странный текст заключен в парном теге <style>?
А это и есть таблица стилей. В данном случае она находится в том же файле, что и сама Web-страница, и поэтому называется внутренней.
Наша первая таблица стилей содержит только один стиль — описание формата какого-либо элемента страницы. Наш стиль переопределяет внешний вид содержимого тега <strong> и так и называется — стиль переопределения тега.
Каждый стиль состоит из имени и описания. Имя однозначно идентифицирует стиль и в нашем случае совпадает с названием тега. Описание стиля записывается после имени через пробел в фигурных скобках и содержит набор атрибутов стиля и их значений. Между атрибутом и его значением должен стоять знак двоеточия, а пары "атрибут-значение" отделяются друг от друга знаком точки с запятой.
Описание нашего единственного стиля содержит единственный атрибут color (цвет текста), которому присвоено значение green (зеленый). Мы можем добавить в описание стиля еще один атрибут, скажем, text-decoration (дополнительное "украшение" текста) со значением underline (подчеркнутый). Вот так:
<HEAD> <STYLE>
STRONG { color: green;
text-decoration: underline; } </STYLE> </HEAD>
Посмотрим, что покажет нам Web-обозреватель... Действительно работает!
При оформлении Web-страниц нужно избегать подчеркнутого текста. Практически все Web-обозреватели показывают подчеркнутыми гиперссылки, и если текст Web-страницы содержит и другие подчеркнутые фрагменты, гиперссылками не являющиеся, посетитель сайта будет обескуражен.
Да, но что, если нам нужно изменить оформление фрагмента текста, являющегося содержимым какого-либо произвольного тега? Для этого нам нужно создать стиль другого типа, называемый стилевым классом. Стилевой класс может быть применен к любому тегу HTML.
Предположим, что нам нужно увеличить размер шрифта, которым набран текст "Microsoft Internet Explorer" (содержимое тега <ем>). Для этого мы создадим стилевой класс bigf ont в таблице стилей нашей страницы 2.5.html:
.bigfont { font-size: 14pt; }
Имя стилевого класса всегда должно начинаться с точки — это важно. Что касается атрибута font-size, то он задает размер шрифта. А значение I4pt обозначает размер шрифта, равный 14 пунктам.
Теперь нам нужно как-то привязать только что созданный стилевой класс к тегу <ем>, содержащему текст "Microsoft Internet Explorer". Для этого используем поддерживаемый всеми тегами атрибут class, в качестве параметра которого указывается имя нужного стилевого класса без точки. Добавим его в тег <ем>, как показано далее:
<ЕМ CLASS="bigfont"><STRONG>Microsoft</STRONG> Internet Explorer</EM>
Сохраним исправленную Web-страницу 2.5.html, откроем ее в Web-обозревателе. И увидим то, что показано на рис. 2.7.

Видно, что текст "Microsoft Internet Explorer" увеличился в размерах, то есть стилевой класс bigfont действует. При этом также продолжает действовать стиль переопределения тега <strong>, созданный нами ранее — слово "Microsoft", помимо того, что "выросло" в размерах, осталось зеленым и подчеркнутым. Выходит, стили как бы наложились друг на друга. (Забегая вперед, нужно заметить, что это действует правило каскадное™, о котором мы расскажем позже.)
Продолжим свои эксперименты со стилями. Давайте немного изменим стиль переопределения тега <strong> таким вот образом:
STRONG { color: green;
text-decoration: underline; font-size: 9pt; }
Здесь мы задали для полужирного текста размер шрифта, равный 9 пунктам. Теперь, если мы откроем нашу многострадальную страницу 2.5.html в Web-обозревателе, то увидим то, что показано на рис. 2.8.

Теперь слово "Microsoft", помимо зеленого цвета и подчеркивания, отличается еще и уменьшенным размером шрифта. Выходит, атрибут font-size, примененный нами в стиле переопределения тега <strong>, отменил действие того атрибута в стилевом классе bigfont, привязанному к родительскому тегу <ем>. Но при этом остальные установки стилевого класса bigfont перешли в стиль переопределения тега <strong>. (Это и есть каскадность таблиц стилей, о которой мы поговорим чуть позже.)
Стандарт CSS допускает создание и таких стилей переопределения тега:
ЕМ STRONG { color: green; }
Подобный стиль будет применен к тегу <strong>, вложенному в тег <ем>. К другим тегам он применен не будет. Так, в приведенном далее примере слово "зеленый" станет зеленым, а остальной текст останется черным.
<ЕМЖурсив <STR0NG>3eneHbM</STR0NG></EM>
Можно скомбинировать стиль переопределения тега и стилевой класс, создав гибридный стиль. Вот так:
EM.bigfont { font-size: 14pt; }
Подобный стиль может быть применен только к тегу <ем>, имеющему атрибут class, значение которого равно bigfont. К другим тегам этот стиль применен не будет. Так, в приведенном далее примере слова "Большой текст" будут набраны увеличенным шрифтом (14 пунктов), а слова "Обычный текст" — обычным шрифтом, заданным по умолчанию.
<ЕМ CLASS="bigfont">Большой текст</ЕМ> <STRONG CLASS="bigfont">06bi4HbM TeKCT</STRONG>

 

Содержание Книга по php и mysql