Главная | Обратная связь | Поможем написать вашу работу!

Динамическое изменение CSS

Лабораторная работа № 4

КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ (CSS)

Цель работы

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

Теоретические сведения.

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

Введение в CSS

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

стол:
цвет - коричневый
материал - деревянный
компьютер:
цвет - белый
материал - пластмасса
назначение - для работы

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

body
{
background-color: rgb(255,255,153);
color: rgb(51,51,153);
}
h3
{
color: rgb(255,0,0);
font-family: arial, helvetica;
}

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

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

2.2. Создание стилевой таблицы в документе

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

<HTML>
<HEAD>
<STYLE>
h3 {color: red}
h3 {color: red; font-style: italic}
</STYLE>
</HEAD>
<BODY>
<h3> Этот документ</h3>
<h3>использует стилевые таблицы</h3>
</BODY>
</HTML>

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

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

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

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

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

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

Динамическое изменение CSS

Вы можете динамически изменять имя подключаемого файла со стилевой таблицей, соответственно изменяя сам стиль. Вот функция, на языке JScript, которая при ее вызове, если уже применен какой-либо стиль, убирает его и подключает новый.

function change_style()

{ if (document.styleSheets.href!= null)
document.styleSheets.href = "newStyle.css";
}

Если стилевая таблица определена внутри HTML-страницы, вы можете добавлять новые определения с помощью функции addRule (object, style). Где object - объект, а style, соответственно, стилевые установки. Вот пример, в котором после щелчка на кнопку, происходит изменение стилевой таблицы (пример 2):

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function newRule()

{

document.styleSheets.MyStyles.addRule("P","color:blue");}
</SCRIPT>
<STYLE ID="MyStyles">
h3 {color:red}
h3 {color:red;font-style:italic}
</STYLE>
</HEAD>
<BODY>
<h3>Этот документ использует таблицы стилей </h3>
<P>Это абзац. Щелкни на кнопку для изменения его стиля</P>
<BUTTON onclick="newRule()">Нажми меня</BUTTON>
</BODY>
</HTML>

Просмотрев страничку с таким кодом, вы увидите, как происходит изменение стиля, путем добавления установки в таблицу стилей.

Классы

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

<STYLE TYPE="text/css">

#text
{ position:absolute;
top:400 px;
left: 10px;}

A {text-decoration:none;}

.regular
{color:red;}
.superBig
{ font-size:16pt;
font-weight:bold;
color: red;
}
.copyright
{ font-size:9pt;
font-style:italic;
text-transform:capitalize;
}
</STYLE>

В этом примере созданы три класса: regular, superBig, copyright. Ниже показано, как применить эти классы в слое навигации text.

<DIV ID="text">
<CENTER>
<P CLASS="superBig">Класс superBig </P>
<P CLASS="regular">Класс regular </P>
<P CLASS="copyright">Класс copyright </P>
</CENTER>
</DIV>
Можно также специально привязать класс тегу. Например:

P
{
font-size:16pt;
font-weight:bold;
font-family:verdana, sans-serif;
}

P.small
{ font-size:9pt;
margin-left:5em;
margin-right:5em;
}
Ниже показано, как применить класс <P>:

<HTML>

<HEAD>

{ font-size:16pt;

font-weight:bold;

font-family:verdana, sans-serif;

}

h3.small

{ font-size:9pt;

margin-left:5em;

margin-right:5em;

}

cool{ color: blue; font-style; italic;}

</STYLE>

</HEAD>

<BODY>

<h3> Этот документ использует стилевые таблицы</h3>

<h3 CLASS="small"> Этот документ использует стилевые таблицы</h3>

</center>

</BODY>

</HTML>

Жесткий контроль с помощью тега <SPAN>

Тег <SPAN> - это удобный универсальный инструмент для применения стиля в любом месте, где он необходим.

<h3> Этот документ использует стилевые таблицы</h3>

Этот документ

<SPAN CLASS="cool"

использует стилевые таблицы

</SPAN> </h3>

Тег SPAN применяет класс coll к фразе " использует стилевые таблицы ".

Селекторы ID

Селекторы ID (сокращение от "identifier" - идентификатор) аналогичен классу, но гораздо более ограничен по своим возможностям. Каждый селектор ID может применятся в документе только один раз.

#specialOffer {font-family:gadget,

serif; font-size:40;}

селектор ID можно вызвать следующим образом:

Задание на работу

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

4. Контрольные вопросы

1. Что такое CSS?

2. Какие способы подключения CSS Вы знаете?

3. Каким образом происходит подключение таблицы стилей внутри документа?

4. Каким образом происходит подключение таблицы стилей из отдельного файла?

5. Как можно изменять стилевые установки, когда CSS находится внутри html - документа?

6. Для чего используются классы в CSS?

7. Преимущества использования классов?

8. Механизм действия тега <SPAN>.