|
|
|
|
|
| [ главная ] [ рейтинг статей ] [ справочник радиолюбителя ] [ новости мира ИТ ] |
|
|
Создание оригинальных стилейInternet Explorer предлагает вам свой стиль, называемый по умолчанию. Этот стиль предполагает белый чистый фон, черный цвет шрифта, все ссылки подчеркнутые и синего цвета и т. д. Что если вам не нравится все это? Вы уже умеете менять различные аттрибуты напрямую. Даже если одинаковых по значению объектов и много, вы уже умеете применять классы. Но существует еще одна возможность. Для задания всего стиля документа целиком применяются так называемые Иерархические Стилевые Таблицы (Cascade Style Sheets - 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> В данном примере, на экране вы увидите две строки, состоящие из двух объектов: 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() { Если стилевая таблица определена внутри 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> Просмотрев страничку с таким кодом, вы увидите, как происходит изменение стиля, путем добавления установки в таблицу стилей. [ вверх ]
Ваш комментарий к данному материалу будет интересен нам и нашим читателям!
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects |
|
