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