|
Глава 3. Создание оригинальных стилей
Internet
Explorer предлагает вам свой стиль, называемый по умолчанию. Этот стиль
предполагает белый чистый фон, черный цвет шрифта, все ссылки подчеркнутые и
синего цвета и т. д. Что если вам не нравится все это? Вы уже умеете менять
различные аттрибуты напрямую. Даже если одинаковых по значению объектов и много,
вы уже умеете применять классы. Но существует еще одна возможность. Для задания
всего стиля документа целиком применяются так называемые Иерархические Стилевые
Таблицы (Cascade Style Sheets - CSS), которые представляют собой набор установок
свойств различных объектов. Чем-то они напоминают классы, но если класс
сохдается внутри документа и может быть применен, а может быть и нет, то CSS,
если он подключен, то установки в нем влияют непосредственно на все объекты в
документе.
Далее
будут рассматриваться следующие темы:
Так что такое CSS?
CSS очень похожи на классы, только с той разницей, что в
них описывается стиль для уже известного объекта. Для наглядного примера,
осмотрите сейчас свой комнату (офис, зал...) в которой вы находитесь.
Наверняка, вы увидите множество различных предметов (стол, кресло, окно,
компьютер). У каждого из этих предметов-объектов есть характеристики, и вам надо
составить список этих предметов и их характеристик. Может быть у вас получится
нечто следующее:
стол:
цвет - коричневый
материал - деревянный
компьютер:
цвет - белый
материал - пластмасса
назначение - для
работы
Конечно,
вы можете пойти другим путем, но только CSS составляются именно так, где вместо
предметов выступают объекты, да и их характеристики немножко другие. Для
примера, вот вам отрывок такого документа: body
{
background-color: rgb(255,255,153);
color: rgb(51,51,153);
}
h1
{
color: rgb(255,0,0);
font-family: arial, helvetica;
}
Здесь задается каким будет стиль элемента BODY и H1. Те
параметры, которые не заданы, остаются по умолчанию.
Создание CSS не требует особых усилий и может быть
выполнено в простом блокноте, хотя для этих целей и существуют специальные
программы, облегчающие работу и наглядно показывающие, каким будет выглядет
будущий документ с применением этого стиля. Поищите такие программы у себя на
диске или у знакомых.
Существует два способа подключения CSS. Первый - задать
ее в элементе STYLE в начале документа, как класс. Это делается так:
<HTML>
<HEAD>
<STYLE>
H1 {color: red}
H2 {color: red;
font-style: italic}
</STYLE>
</HEAD>
<BODY>
<H1> Этот документ</H1>
<H2>использует стилевые таблицы</H2>
</BODY>
</HTML>
В данном примере, на экране вы увидите две строки,
состоящие из двух объектов: H1 и H2. Посмотрите, во что превратился стиль по
умолчанию Internet Explorer. А ведь мы не делали никаких указаний в самом
объекте насчет его стиля. Таким образом, сколько бы вы ни наделали объектов H1 и
H2, их стиль всегда будет таким, каким вы его указали в стилевой таблице.
Если вам нравится стиль, который вы создали и вы хотите
использовать его во всех своих документах. Или ваш документ состоит из множества
HTML страниц и у всех них должен быть одинаковый стиль, вам необязательно каждый
раз вколачивать строки стилевой таблицы в начале документа.
Второй способ подключения CSS к Web-странице - это
создание CSS в отдельном файле, а в самой странице делается ссылка на этот файл.
Тогда, вы можете написать в странице только одну строчку и все равно стиль ее
будет таким, каким он определен в стилевой таблице во внешнем файле. Думаю не
надо долго говорить о преимуществах такого способа.
Итак, сперва вы создаете таблицу, следуя указанным выше
правилам. Затем, вы добавляете в элемент <HEAD> для включения таблицы
стилей строку подобную следующей:
<LINK REL="stylesheet" TYPE="text/css"
HREF="MyStyle.css">
LINK означает, что к текущей странице подключается
элемент, REL и TYPE описывают элемент, как стилевую таблицу, ну а HREF содержит
адрес, по которому находится файл с вашей CSS.
Вы можете динамически измнять имя подключаемого файла со
стилевой таблицей, соответственно изменяя сам стиль. Вот функция, на языке
JScript, которая при ее вызове, если уже применен какой-либо стиль, убирает его
и подключает новый.
function change_style()
{
if (document.styleSheets.href
!= null)
document.styleSheets.href
= "newStyle.css";
}
Если стилевая таблица определена внутри HTML-страницы,
вы можете добавлять новые определения с помощью функции addRule (object, style).
Где object - объект, а style, соответственно, стилевые установки. Вот пример, в
котором после щелчка на кнопку, происходит изменение стилевой таблицы:
<HTML> <HEAD> <SCRIPT LANGUAGE="JScript"> function newRule() {
document.styleSheets.MyStyles.addRule("P","color:blue"); } </SCRIPT> <STYLE ID="MyStyles"> H1
{color:red} H2 {color:red;font-style:italic} </STYLE> </HEAD> <BODY> <H1>Это
Заголовок 1</H1> <H2>Это Заголовок
2</H2> <P>Это абзац. Щелкни на кнопку для
изменения его стиля</P> <BUTTON
onclick="newRule()">Нажми меня</BUTTON> </BODY> </HTML> Просмотрев страничку с таким кодом, вы увидите, как
происходит изменение стиля, путем добавления установки в таблицу стилей.
|
