Изменения стиля через Script-язык

2020-03-17

225

Обсуждений (0)

0.00 из 5.00 0 оценок

Предыдущая 1 2 3 4 5 6 7 8 91011 Следующая

Это еще не все способы изменения стиля. В самом начале этой главы, мы учились динамически изменять стили. Давайте рассмотрим еще один способ изменения, теперь, через объект <SCRIPT>. Если вы не особо разберетесь, о чем пойдет дальше речь, воспользуйтесь этой ссылкой.

Итак, чтобы изменять стили объекта, над которым совершится действие, напишем функцию. Написание функций также полезно, когда над множеством объектов надо производить одинаковые действия. Начнем как всегда с простого, например, со списков. Посмотрите на следующий код:

<HTML>

<BODY>

<SCRIPT LANGUAGE="JScript">changeStyle(object) {(object.style.color=='black').style.color='orange';.style.color='black';

}

</SCRIPT>

<LI>Элемент 1

<LI style="cursor: hand"; onclick="changeStyle(this);">Элемент 2

</BODY>

</HTML>

Использование Script-языков дает очень гибкие возможности применения динамических стилей. В этом примере при щелчке мышью на второй элемент списка, он изменяет свой стиль с помощью функции changeStyle, которой в качестве аргумента передается объект, над которым было произведено действие.

Комбинирование использования функций и классов, а также различных событий c вашей фантазией дает поистине потрясающие результаты.

Динамика в самом IE 4.0

Explorer 4.0 обладает гибким свойствами прорисовки экрана и отображения на нем представляемой информации. Например, если вы изменили размер шрифта строчки и она теперь не помещается в отведенное ей место, остальные строки раздвинутся, чтобы не произошло их наложение одно на другую. Проиллюстрировать эту особенность очень хорошо может свойство display часто применяемой в создании динамических оглавлений. Вот пример:

<HTML>

<HEAD>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JScript">changeDisplay(object) {(object.style.display=='none').style.display='';.style.display='none';

}

</SCRIPT>

<P> Если вы наведете курсор </P>

на эту строку и 'кликните' ее, </P>

<P id=disappearingString>то эта строка исчезнет</P>

<P> А эта займет ее место<p>

</BODY>

</HTML>

Здесь комментарии излишни. Наблюдайте, как реагирует IE на изменение стилей содержимого окна.

Создание оригинальных стилей

Explorer предлагает вам свой стиль, называемый по умолчанию. Этот стиль предполагает белый чистый фон, черный цвет шрифта, все ссылки подчеркнутые и синего цвета и т. д. Что если вам не нравится все это? Вы уже умеете менять различные атрибуты напрямую. Даже если одинаковых по значению объектов и много, вы уже умеете применять классы. Но существует еще одна возможность. Для задания всего стиля документа целиком применяются так называемые Иерархические Стилевые Таблицы (Cascade Style Sheets - CSS), которые представляют собой набор установок свойств различных объектов. Чем-то они напоминают классы, но если класс сохдается внутри документа и может быть применен, а может быть и нет, то CSS, если он подключен, то установки в нем влияют непосредственно на все объекты в документе.

Введение в CSS

очень похожи на классы, только с той разницей, что в них описывается стиль для уже известного объекта. Для наглядного примера, осмотрите сейчас свой комнату (офис, зал...) в которой вы находитесь. Наверняка, вы увидите множество различных предметов (стол, кресло, окно, компьютер). У каждого из этих предметов-объектов есть характеристики, и вам надо составить список этих предметов и их характеристик. Может быть у вас получится нечто следующее:

стол:

цвет - коричневый

материал - деревянный

компьютер:

цвет - белый

материал - пластмасса

назначение - для работы

Конечно, можное пойти другим путем, но только CSS составляются именно так, где вместо предметов выступают объекты, да и их характеристики немножко другие. Для примера, вот вам отрывок такого документа:

body

{

background-color: rgb(255,255,153);

color: rgb(51,51,153);

}

{: rgb(255,0,0);family: arial, helvetica;

}

Здесь задается каким будет стиль элемента BODY и H1. Те параметры, которые не заданы, остаются по умолчанию.

Создание CSS не требует особых усилий и может быть выполнено в простом блокноте, хотя для этих целей и существуют специальные программы, облегчающие работу и наглядно показывающие, каким будет выглядит будущий документ с применением этого стиля.

Стилевая таблица в документе

Существует два способа подключения CSS. Первый - задать ее в элементе STYLE в начале документа, как класс. Это делается так:

<HTML>

<HEAD>

<STYLE>{color: red}{color: red; font-style: italic}

</STYLE>

</HEAD>

<BODY>

<H1> Этот документ</H1>

<H2>использует стилевые таблицы</H2>

</BODY>

</HTML>

В данном примере, на экране вы увидите две строки, состоящие из двух объектов: H1 и H2. Посмотрите, во что превратился стиль по умолчанию Internet Explorer. А ведь мы не делали никаких указаний в самом объекте насчет его стиля. Таким образом, сколько бы вы ни наделали объектов H1 и H2, их стиль всегда будет таким, каким вы его указали в стилевой таблице.

8.3 Стилевая таблица в отдельном файле

Если вам нравится стиль, который вы создали и вы хотите использовать его во всех своих документах. Или ваш документ состоит из множества HTML страниц и у всех них должен быть одинаковый стиль, вам необязательно каждый раз вколачивать строки стилевой таблицы в начале документа.

Второй способ подключения CSS к Web-странице - это создание CSS в отдельном файле, а в самой странице делается ссылка на этот файл. Тогда, вы можете написать в странице только одну строчку и все равно стиль ее будет таким, каким он определен в стилевой таблице во внешнем файле. Думаю не надо долго говорить о преимуществах такого способа.

Итак, сперва вы создаете таблицу, следуя указанным выше правилам. Затем, вы добавляете в элемент <HEAD> для включения таблицы стилей строку подобную следующей:

LINK означает, что к текущей странице подключается элемент, REL и TYPE описывают элемент, как стилевую таблицу, ну а HREF содержит адрес, по которому находится файл с вашей CSS.

2020-03-17

225

Обсуждений (0)

0.00 из 5.00 0 оценок

Предыдущая 1 2 3 4 5 6 7 8 91011 Следующая

Обсуждение в статье: Изменения стиля через Script-язык

Обсуждений еще не было, будьте первым... ↓↓↓