Роздрукувати сторінку
Главная \ Методичні вказівки \ Методичні вказівки \ 1499 Лабораторна робота 12 на тему Використання таблиць стилів

Лабораторна робота 12 на тему Використання таблиць стилів

« Назад

Лабораторна робота №12

Використання таблиць стилів

Мета роботи: навчитись використовувати таблиці стилів.

Хід роботи

1. Скопіювати у Блокнот наступний текст.

<HTML>

<HEAD>

<TITLE>Примеры использования таблиц стилей.</TITLE>

<META HTTP-EQUIV="Content-Type"CONTENT="text/html; Charset=Windows-1251">

<META NAME="GENERATOR" CONTENT="Visual HTML Workshop 2.1 [SNK]">

<META NAME="Keywords" CONTENT="сайт, страница, домашняя страница,  HTML-редактор, HTML, WEB дизайн, интернет, какскадные таблицы стилей, CSS, SSI, CSS-команда,"> 

<STYLE TYPE="text/css">

<!--

BODY {

background: ivory;

color: #000000;

text-align: justify;

margin-right: 20;

}

INPUT.20 {

width: 120;

height: 20;

font-family: Arial;

font-size: 9pt;

text-align: center;

background: url(/img/wb.gif)

}

INPUT.40 {

width: 120;

height: 40;

font-family: Arial;

font-size: 9pt;

text-align: center;

background: url(/img/wb.gif)

}

BUTTON.20 {

cursor: hand;

width: 120;

height: 20;

font-family: Arial;

font-size: 9pt;

color: red;

text-align: center;

background: url(/img/wb.gif)

}

BUTTON.40 {

cursor: hand;

width: 120;

height: 40;

font-family: Arial;

font-size: 9pt;

color: red;

text-align: center;

background: url(/img/wb.gif)

}

A { text-decoration:none;

font-family: Arial;

font-size: 8pt; }

H4, H1 { text-align: center;

color: #004080 }

TABLE {text-align: justify;

}

IMG  {

padding: 10 10;

}

.m

{

background: url(/img/wb.gif);

text-align: center;

padding: 1 1 1 1;

border: 1px dotted ivory;

width: 140;

}

-->

</STYLE> 

<style>

td {border: solid 0.1em red; background-color: khaki;}

</style>

</HEAD>

<BODY>

<center> 

<!--LiveInternet counter--><script language="JavaScript"><!--

document.write('<img src="http://counter.yadro.ru/hit?r'+

escape(document.referrer)+((typeof(screen)=='undefined')?'':

';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth?

screen.colorDepth:screen.pixelDepth))+';'+Math.random()+

'" width=1 height=1 alt="">')//--></script><!--/LiveInternet--> 

<!--begin of Top100-->

<a href="http://top100.rambler.ru/top100/">

<img src="http://counter.rambler.ru/top100.cnt?359155" alt="Rambler's Top100" width=1 height=1 border=0></a>

<!--end of Top100 code--> 

<TABLE WIDTH="100%" BORDER=10 FRAME=VOID CELLPADDING=5>

<TR><TD WIDTH=100 VALIGN=TOP>

<P> </P>

<table align=center><tr><td><a href='http://svoisait.ru'" title="">главная</a>

</td></tr><tr><td><a href='http://svoisait.ru/css/'" title="">DHTML</a>

</td></tr><tr><td><a href='css.shtml'" title="КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ">таблицы стилей</a>

</td></tr><tr><td><a href='css2.shtml'" title="КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ. Часть вторая.">способы<BR>употребления</a>

</td></tr><tr><td><a href='css3.shtml'" title="КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ. Часть третья.">Несколько<BR>примеров</a>

</td></tr><tr><td><a href='css_class.shtml'" title="КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ. Часть четвертая.">Селектор CLASS</a>

</td></tr><tr><td><a href='css_yuri.shtml'" title="">мысли о CSS</a>

</td></tr><tr><td><a href='filtr.shtml'" title="">фильтры</a>

</td></tr><tr><td><a href='filtr-2.shtml'" title="">Общие свойства<BR>фильтров</a>

</td></tr><tr><td><a href='mouse.shtml'" title=""> Обработка<BR> событий</a>

<input title="Основы языка JavaScript" TYPE=SUBMIT value="JavaScript">

</td></tr><tr><td><a href='http://www.svoisait.ru/css/animal.shtml'" title="Создание мультимедийных эффектов с помощью фильтров.

Часть первая. Теги-контейнеры DIV и SPAN. Абсолютное и относительное позиционирование.">Мультэффекты</a>

</td></tr><tr><td><a href='http://svoisait.ru/css/definitions_js.shtml'" title="Основы языка JavaScript Часть вторая. Понятия и определения. Терминология языка программирования JavaScript.">Терминология</a>

</td></tr><tr><td><a href='http://svoisait.ru/css/rules_js.shtml'" title="Основы языка JavaScript Часть третья. Правила использования языка создания сценариев JavaScript.">Тег &lt;script></a>

</td></tr><tr><td><a href='http://svoisait.ru/css/script.shtml'" title="Практическое применение JavaScript. Запрос пользователю и создание переменной.">запрос пользователю</a>

</td></tr><tr><td><a href='http://svoisait.ru/css/script_time.shtml'" title="Практическое применение JavaScript. Дата и время.">дата и время</a>

</td></tr><tr><td><a href='http://svoisait.ru/css/variable.shtml'" title="Переменные, они и есть переменные. В языке написания сценариев JavaScript переменные используются так же, как и в других языках программирования!">Переменные</a>

</td></tr><tr><td><a href='http://svoisait.ru/css/object_js.shtml'" title= "Учебник JavaScript. Объекты в языке JavaScript.">объекты</a> 

</td></tr><tr><td><a href='filtr1.shtml'" title=""> Вспомогательные<br> материалы</a> 

</td></tr><tr><td><a href='.shtml'" title=""></a>

</td></tr></table>

<P></P> 

<script type="text/javascript"><!--

google_ad_client = "pub-0369862403661526";

google_ad_width = 120;

google_ad_height = 240;

google_ad_format = "120x240_as";

google_ad_type = "text_image";

//2007-10-29: svoi120x240

google_ad_channel = "2020917188";

//-->

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

<script type="text/javascript">

var begun_auto_pad = 87823107;

var begun_block_id = 115576735;

</script>

<script src="http://autocontext.begun.ru/autocontext2.js" type= "text/ javascript" ></script>

</TD><TD>

<H1>КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ</H1>

<H4>НЕСКОЛЬКО ПРИМЕРОВ</H4>

&nbsp;&nbsp;&nbsp;Учитывая то, что для некоторых (в силу их характера или склада ума) теория - трудно перевариваемое вещество, а также то, что теория требует определенной "подкованности" в рассматриваемой области, а сайт предназначен как раз для новичков в ВЕБ-строительстве,приводяться несколько практических примеров использования таблиц стилей. <BR>&nbsp;&nbsp;&nbsp;Любое правило каскадных таблиц состоит из двух частей: <I>селектора</I> и <I>определения</I>. Селектором может быть любой тег HTML. Определение задает, каким образом необходимо представлять этот тег. Определение записывается в фигурных скобках и, в свою очередь, тоже состоит из двух частей: <I>свойства</I> и <I>значения</I>, которые отделяются дуг от друга двоеточием. В одном правиле можно задавать несколько определений, отделяя их друг от друга точкой с запятой.

<UL>

<LI>Задание вида заголовков.<BR>H1 {text-align: center;<BR>color: coral;<BR>font-size: 34pt;<BR>font-family: "Times New Roman"}<BR>&nbsp;<BR>Результат использования такой таблицы

<H1 style="text-align: center;

color: coral;

font-size: 34pt;

font-family: "Times New Roman";>Будет выглядеть так.</H1>

Здесь: text-align: center; - задает выравнивание. В данном случае - по центру.<BR>

color: coral; - задает цвет.<BR>

font-size: 34pt; - размер шрифта.<BR>

font-family: "Times New Roman"; - вид шрифта.

<P></P>

<LI>Абзац.<BR>

<P style="text-align: center;

color: blue;

font: oblique 12pt/24pt "Times Cyr", serif;">Пример использования таблицы стилей для форматирования текста в отдельном абзаце (или во всех, это уже на Ваше усмотрение). Этот абзац отформатирован при помощи следующих правил: <BR>

P style="text-align: center;<BR>color: blue;<BR>

font: oblique 12pt/24pt "Times Cyr", serif;"<BR>

Свойство oblique в данном случае задает высоту шрифта 12 пунктов и высоту строк - 24 пункта.</P>

<LI>Следующие две таблицы сделаны при помощи таких правил:<BR>

<FONT COLOR="#0000FF"><B>border: solid 0.1em red; background-color: teal;</B><BR>

<B>td {border: solid 0.1em red; background-color: khaki;}</B></FONT><BR>

причем первая строчка действует только на первую таблицу, так как стоит в теге TABLE, непосредственно создающем таблицу, а вторая - на все таблицы, которые есть на этой странице, так как стоит в теге style в заголовке страницы.<BR>

<P></P>

<TABLE style="border: solid 0.1em red; background-color: teal;" width=90%>

<CAPTION><B><I><FONT COLOR="#408080">Почтовые спонсоры, с которыми стоит работать.<BR></FONT></I></B></CAPTION><TR>

<TD><A target="_blank" HREF=""> WmMail </A></TD>

<TR>

<TD><A TARGET=_blank HREF="http://www.wepaid.com/join.php?ref=sergech2">WePaid</A></TD>

</TABLE>

<P><!--92700-->

</P>

</BODY>

</HTML>

  1. Зберегти документ з назвою CSS1.html, відкрити його за допомогою броузера та перейти до редагування HTML-коду. Зверніть увагу на будову сторінки.

  2. В самому документі опишіть стилі.

  3. Збережіть у своїй папці.

  4. Скопіювати у Блокнот наступний текст.

<HTML>

<HEAD>

<TITLE>Таблицы стилей. Селектор CLASS.</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; Charset=Windows-1251">

<META NAME="Author" CONTENT="SERGEI CHERVONYASHCHY">

<META NAME="Keywords" CONTENT="таблицы стилей, селектор, тег, форматирование, сайт, оформление сайта, HTML, CSS, ">

<STYLE TYPE="text/css">

<!--

BODY {

background: ivory;

color: #000000;

text-align: justify;

margin-right: 20;

}

INPUT.20 {

width: 120;

height: 20;

font-family: Arial;

font-size: 9pt;

text-align: center;

background: url(/img/wb.gif)

}

INPUT.40 {

width: 120;

height: 40;

font-family: Arial;

font-size: 9pt;

text-align: center;

background: url(/img/wb.gif)

}

BUTTON.20 {

cursor: hand;

width: 120;

height: 20;

font-family: Arial;

font-size: 9pt;

color: red;

text-align: center;

background: url(/img/wb.gif)

}

BUTTON.40 {

cursor: hand;

width: 120;

height: 40;

font-family: Arial;

font-size: 9pt;

color: red;

text-align: center;

background: url(/img/wb.gif)

}

A { text-decoration:none;

font-family: Arial;

font-size: 8pt; }

H4, H1 { text-align: center;

color: #004080 }

TABLE {text-align: justify;

}

IMG  {

padding: 10 10;

}

.m

{

background: url(/img/wb.gif);

text-align: center;

padding: 1 1 1 1;

border: 1px dotted ivory;

width: 140;

}

-->

</STYLE> 

<STYLE TYPE="text/css">

<!--

A { text-decoration:none;

font-family: Arial;

font-size: 10pt; }

H4 { text-align: center;

color: #FF8040 }

BODY {

background: ivory;

color: #000000;

text-align: justify;

}

P {color: blue}

H1.class1 { text-align: center;

color: #FF8040 }

H1.class2 { text-align: center;

color: red;

border-width: 1;

border: solid }

-->

</STYLE>

</HEAD>

<BODY>

<center>  

<script type="text/javascript"><!--

google_ad_client = "pub-0369862403661526";

google_ad_width = 120;

google_ad_height = 240;

google_ad_format = "120x240_as";

google_ad_type = "text_image";

//2007-10-29: svoi120x240

google_ad_channel = "2020917188";

//-->

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

<script type="text/javascript">

var begun_auto_pad = 87823107;

var begun_block_id = 115576735;

</script>

<script src="http://autocontext.begun.ru/autocontext2.js" type= "text/ javascript"></script>

</TD><TD>

<H1>КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ</H1>

<H6 ALIGN=CENTER>Обратите вниманте.</H6>

<H4>Селектор CLASS</H4>

&nbsp;&nbsp;&nbsp;Прежде чем рассказывать об употреблении селектора CLASS, следует сказать несколько общих слов об употреблении таблиц стилей, собственно объясняющих необходимость данного селектора.<BR>&nbsp;&nbsp;&nbsp;Дело в том, что хотя применение правил стилей в отдельных тегах формально не противоречит правилам HTML, в действительности является абсолютно нецелесообразным, так как сводит на нет основные преимущества таблиц стилей. Вспомним, что таблицы стилей:<UL>

<LI><FONT COLOR="#0000FF">а.</FONT> дают возможность помещать всю информацию о внешнем виде сайта в одно место, например, в одном файле. Такой файл можно сделать один раз и потом пользоваться им всю жизнь.

</UL>

И, как следствие -

<UL>

<LI><FONT COLOR="#0000FF">б.</FONT> дают возможность оформлять сайт как единое целое, делать страницы в едином стиле,

<LI><FONT COLOR="#0000FF">в.</FONT> при желании или необходимости сделать какие-то изменения во внешнем облике сайта, достаточно внести исправления только в файл с правилами таблиц стилей.

</UL>

&nbsp;&nbsp;&nbsp;Другими словами: таблицы стилей облегчают труд ВЕБ-мастера, удаляя из него рутинные действия по прописке параметров каждого тега и их значений и оставляя больше времени и сил для творчества.

Правда, я не знаю, компенсирует ли этот остаток те силы и время, которые уйдут на изучение CSS.<BR>&nbsp;&nbsp;&nbsp;При использовании же правил таблиц стилей в отдельных тегах, для внесения изменений придется пересмотреть весь документ, что потребует достаточно большой и кропотливой работы.<BR>&nbsp;&nbsp;&nbsp;Но у каждой медали две стороны. Есть вторая сторона и у таблиц стилей :-) (что-то шуток сегодня много!). Дело в том, что таблицы стилей, в качестве селектора которых используется тег HTML, влияют на отображение ВСЕХ элементов в документе, определенным этим тегом. То есть, если мы пропишем в файле с правилами, например: P {color: blue}<P>то все, что будет заключаться в теги параграфа, будет отображаться синим цветом, как этот текст.</P>

А если нам нужно (или мы очень хотим) выделить какой-то параграф, для особой важности, например, красным цветом? Хорошо, если один, тогда можно прописать для него правила в теге, его определяющем. А если у нас таких параграфов на сайте много? Например 20-30% или больше? На этот случай в HTML 4.0 введен в качестве стандартов для всех тегов параметр CLASS. Его значением является ссылка на класс, задаваемый в таблице стилей.

Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой.<BR>&nbsp;&nbsp;&nbsp;Конкретный пример: мы хотим, чтобы заголовки первого уровня на нашем сайте были двух видов. Прописываем в таблицы стилей такое правило: <BR>

<FONT COLOR="#0000FF">H1.class1 { text-align: center;<BR>

color: #FF8040 }<BR>

H1.class2 { text-align: center;<BR>

color: red;<BR>

border-width: 1;<BR>

border: solid }<BR>

</FONT>и получаем:<H1>Этот заголовок определяется классом 1</H1><H1>Этот - классом 2</H1>&nbsp;&nbsp;&nbsp;Яркие примеры, не так ли? В тексте документа эти заголовки определены следующими тегами: <BR>&lt;H1 class=class1>Этот заголовок определяется классом&nbsp;1&lt;/H1><BR>&lt;H1>Этот - классом&nbsp;2&lt;/H1><BR>

В данном примере я обозвал классы немудрено, просто по порядку. Это не имеет принципиального значения. Вы можете присваивать им любые имена, например, называть в честь любимых и друзей: <BR>H1.Sveta<BR>H1.Vova. <BR>

Главное потом не перепутать, кто есть кто и расставить имена классов в тексте документа в нужных местах. <BR>&nbsp;&nbsp;&nbsp;Вот собственно и все о селекторе, он же - параметр, CLASS. Мало, но довольно существенно.

</TD></TR></TABLE>

</BODY>

</HTML>

  1. Зберегти документ з назвою CSS2.html, відкрити його за допомогою броузера та перейти до редагування HTML-коду.

  2. Розглянемо приклади стилів для рисунків.

  3. Скопіювати у Блокнот наступний текст.

<HTML>

<HEAD>

<TITLE>Создание HTML-страниц с мультимедийными эффектами при помощи фильтров.</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; Charset= Windows-1251">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT=" Разнообразные визуальные эффекты: постепенное проявление изображения или текста, изменение контрастности графического изображения, "свечение" букв текста и т.п. - все это достигается применением фильтров к элементам страницы и организацией переходов из одного визуального состояния в другое.">

<STYLE TYPE="text/css">

<!--

BODY {

background: ivory;

color: #000000;

text-align: justify;

margin-right: 20;

}

INPUT.20 {

width: 120;

height: 20;

font-family: Arial;

font-size: 9pt;

text-align: center;

background: url(/img/wb.gif)

}

INPUT.40 {

width: 120;

height: 40;

font-family: Arial;

font-size: 9pt;

text-align: center;

background: url(/img/wb.gif)

}

BUTTON.20 {

cursor: hand;

width: 120;

height: 20;

font-family: Arial;

font-size: 9pt;

color: red;

text-align: center;

background: url(/img/wb.gif)

}

BUTTON.40 {

cursor: hand;

width: 120;

height: 40;

font-family: Arial;

font-size: 9pt;

color: red;

text-align: center;

background: url(/img/wb.gif)

}

A { text-decoration:none;

font-family: Arial;

font-size: 8pt; }

H4, H1 { text-align: center;

color: #004080 }

TABLE {text-align: justify;

}

IMG  {

padding: 10 10;

}

.m

{

background: url(/img/wb.gif);

text-align: center;

padding: 1 1 1 1;

border: 1px dotted ivory;

width: 140;

}

-->

</STYLE> 

</HEAD>

<BODY>

<center>

</TD><TD>

&nbsp;&nbsp;&nbsp;Некоторые авторы выделяют фильтры в отдельный класс инструментов оформления HTML-страниц и это, в общем-то, правильно. Но, постольку, поскольку значения свойства фильтров указываются следуя правилам задания свойств каскадных таблиц стилей, а также учитывая, что этот сайт - не всеобъемлющий справочник, а всего лишь краткое руководство для начинающих, я позволил себе вольность включить описание фильтров и переходов в главу CSS. Если в будущем я решусь развить эту тему дальше, она будет выделена в отдельный раздел. <BR>

&nbsp;&nbsp;&nbsp; Итак:

<H1>Фильтры.</H1>

&nbsp;&nbsp;&nbsp;Как всегда, сначала немного теории (уж никак без нее иногда не обойтись :-(. В принципе те, кто не любит теорию, могут сразу переходить к примерам :-).<BR>

&nbsp;&nbsp;&nbsp;<B><I>Фильтр</I></B> - это некоторый алгоритм, преобразующий визуальное отображение элемента в окне броузера. Он может быть статическим и динамическим.<BR>

&nbsp;&nbsp;&nbsp;<B><I>Статический фильтр</I></B> преобразует элемент и после этого он отображается.<BR>

&nbsp;&nbsp;&nbsp;<B><I>Динамический фильтр</I></B> воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр еще называют <I>переходом</I> из одного состояния отображения в другое.<BR>

&nbsp;&nbsp;&nbsp;Фильтры применяются не ко всем элементам, а только к тем, которые определяют прямоугольный блок и не являются окнами. <A target=_blank HREF="filtr1.shtml">Здесь</A> Вы найдете перечень элементов, к которым могут применяться фильтры и к которым они применяться не могут, а <A target=_blank HREF="filtr2.shtml">здесь</A> - краткий перечень фильтров и их свойств.<BR>

&nbsp;&nbsp;&nbsp;Как я уже сказал, применяются фильтры путем задания свойства фильтров следуя правилам задания свойств каскадных таблиц стилей. Общий вид записи задания свойств такой:<BR>

<B>filter: имя_фильтра(параметры);</B><BR>

Параметры, если они нужны, задаются в форме:<BR><B>имя_параметра=значение_параметра</B><BR>

Некоторым фильтрам требуется несколько параметров, задаваемых через запятую, а некоторым параметры вообще не нужны, но круглые скобки должны присутствовать обязательно.<BR>

&nbsp;&nbsp;&nbsp;Если к элементу применяется несколько фильтров, они задаются в виде списка с пробелом в качестве разделителя.<BR>

&nbsp;&nbsp;&nbsp;Ну а теперь пора переходить к примерам :-) Для экспериментов нам понадобится какая-нибудь картинка. Возьмем для этого хотя бы розы, которые я в прошлом году пытался отправить (к сожалению, безуспешно) женщинам - читателям моей рассылки на восьмое марта. Дорогие женщины, вот розы, которые предназначались Вам (лучше поздно, чем никогда :-):<BR>

<TABLE ALIGN=CENTER CELLPADDING=1>

<TR>

<TD> <IMG SRC="img/roza.jpg" ALT="roza.jpg[11 кб]" WIDTH="75" HEIGHT="107" BORDER="0" ALIGN="right"></TD>

</TR>

</TABLE>

<BR>А теперь начнем с ними экспериментировать. (Я не буду приводить код, с помощью которого это делается. Вы можете посмотреть его кликнув правой кнопкой мыши и выбрав "просмотр в виде HTML".)<BR>

Мы можем сделать их слегка размытыми:

<IMG SRC="img/roza.jpg" ALT="пример использования фильтр blur()" WIDTH="75" HEIGHT="107" BORDER="0" style="filter: blur()"><BR>

Можем сделать негатив:

<IMG SRC="img/roza.jpg" ALT="пример использования фильтр invert()" WIDTH="75" HEIGHT="107" BORDER="0" style="filter: invert()"><BR>

Или просто черно - белое изображение:

<IMG SRC="img/roza.jpg" ALT="пример использования фильтр gray" WIDTH="75" HEIGHT="107" BORDER="0" style="filter: gray"><BR>

<P></P>Следующая композиция сделана из одного рисунка с помощью фильтров:

<TABLE ALIGN=CENTER BORDER=0 COLS=2><TR>

<TD><IMG SRC="img/monarch ja timotei.jpg" ALT="пример использования фильтров flipH и flipV" WIDTH="300" HEIGHT="160" BORDER="0" style="filter: flipH"></TD>

<TD><IMG SRC="img/monarch ja timotei.jpg" ALT="пример использования фильтров flipH и flipV" WIDTH="300" HEIGHT="160" BORDER="0"></TD>

</TR><TR>

<TD><IMG SRC="img/monarch ja timotei.jpg" ALT="пример использования фильтров flipH и flipV" WIDTH="300" HEIGHT="160" BORDER="0" style="filter: flipV flipH"></TD>

<TD> <IMG SRC="img/monarch ja timotei.jpg" ALT="пример использования фильтров flipH и flipV" WIDTH="300" HEIGHT="160" BORDER="0" style="filter: flipV"><BR></TD>

</TR></TABLE>

&nbsp;&nbsp;&nbsp;Постольку, поскольку в одной статье все равно не удастся описать все возможности, которые фильтры дают ВЕБ-мастеру, я в заключении приведу пару примеров использования фильтра glow

с тегом SPAN:<BR>

<SPAN STYLE="width:100%;color:blue; font-size:28pt; text-align:center;

filter:glow(Color=orange);">

<B>"Светящиеся буквы"</B></SPAN><BR>

<SPAN STYLE="width:100%;color:blue; font-size:24pt; text-align:center;

filter:glow(Color=red, Strength=10);">

<B>"Светящиеся буквы"</B></SPAN><BR>

<SPAN STYLE="width:100%;color:yellow; font-size:24pt; text-align:center;

filter:glow();">

<B>"Светящиеся буквы"</B></SPAN><BR>

</BODY>

</HTML>

  1. Зберегти документ з назвою CSS3.html. Скопіюйте картинки у свою папку. Відкрийте його за допомогою броузера.

  2. Скопіюйте у блокнот наступний текст

<HTML>

<HEAD>

<TITLE>Общие свойства некоторых фильтров.</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; Charset= Windows-1251">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT=" Разнообразные визуальные эффекты: постепенное проявление изображения или текста, изменение контрастности графического изображения, "свечение" букв текста и т.п. - все это достигается применением фильтров к элементам страницы и организацией переходов из одного визуального состояния в другое.">

<STYLE TYPE="text/css">

<!--

BODY {

background: ivory;

color: #000000;

text-align: justify;

margin-right: 20;

}

INPUT.20 {

width: 120;

height: 20;

font-family: Arial;

font-size: 9pt;

text-align: center;

background: url(/img/wb.gif)

}

INPUT.40 {

width: 120;

height: 40;

font-family: Arial;

font-size: 9pt;

text-align: center;

background: url(/img/wb.gif)

}

BUTTON.20 {

cursor: hand;

width: 120;

height: 20;

font-family: Arial;

font-size: 9pt;

color: red;

text-align: center;

background: url(/img/wb.gif)

}

BUTTON.40 {

cursor: hand;

width: 120;

height: 40;

font-family: Arial;

font-size: 9pt;

color: red;

text-align: center;

background: url(/img/wb.gif)

}

A { text-decoration:none;

font-family: Arial;

font-size: 8pt; }

H4, H1 { text-align: center;

color: #004080 }

TABLE {text-align: justify;

}

IMG  {

padding: 10 10;

}

.m

{

background: url(/img/wb.gif);

text-align: center;

padding: 1 1 1 1;

border: 1px dotted ivory;

width: 140;

}

-->

</STYLE>

</HEAD>

<BODY>

<center>

<H1>Общие свойства некоторых фильтров.</H1>

&nbsp;&nbsp;&nbsp;Есть несколько свойств, которые присущи всем фильтрам или какой-то их группе.

<UL>

<LI>&nbsp;&nbsp;&nbsp;Каждый фильтр имеет свойство <B><I>enabled</I></B>, которое разрешает (значение <B><I>true</I></B>) или запрещает (значение <B><I>alse</I></B>) применение присоединенного к обьекту фильтра <LI>&nbsp;&nbsp;&nbsp;Свойство <B><I>strenght</I></B> фильтров <B><I>blur</I></B>, <B><I>glow</I></B> и <B><I>wave</I></B> определяет интенсивность применения соответствующего фильтра. Оно может принимать значения в пределах от 0 до 255. Вот несколько примеров (напоминаю, что для того, чтобы посмотреть HTML-код, которым описан тот или иной пример, Вам нужно кликнуть по странице правой кнопкой мыши и выбрать из меню "посмотреть в виде HTML". Маленькая подсказка появится при простом наведении указателя мышки на обьект.<BR>

<UL>

<LI><IMG SRC="img/monarch ja timotei.jpg" ALT="пример использования фильтра blur(strength=10)" WIDTH="300" HEIGHT="160" BORDER="0" style="filter: blur(strength=10)">

<IMG SRC="img/monarch ja timotei.jpg" ALT="пример использования фильтров flipH blur(strength=255)" WIDTH="300" HEIGHT="160" BORDER="0" style="filter: flipH blur(strength=255)">

<LI><SPAN title="пример использования фильтра glow(Color=red, Strength=2)" STYLE="width:100%;color:blue; font-size:24pt; text-align:center;

filter:glow(Color=red, Strength=2);">

<B>"Светящиеся буквы"</B></SPAN><BR>

<LI><SPAN title="пример использования фильтра glow(Color=red, Strength=200)" STYLE="width:100%;color:blue; font-size:24pt; text-align:center;

filter:glow(Color=red, Strength=200);">

<B>"Светящиеся буквы"</B></SPAN><BR>

<LI><SPAN title="пример использования фильтра wave(Strength=2)" STYLE="width:100%;color:blue; font-size:34pt; text-align:center; filter:wave(Strength=2);">

<B>"Волнистые буквы"</B></SPAN><BR>

<LI><SPAN title="пример использования фильтра wave(Strength=20)" STYLE="width:100%;color:blue; font-size:34pt; text-align:center; filter:wave(Strength=20);">

<B>"Волнистые буквы"</B></SPAN><BR>

Как видно из последнего примера, со значениями иногда нужно обращаться довольно аккуратно :-).

</UL>

<LI>&nbsp;&nbsp;&nbsp;Свойство <B><I>direction</I></B> фильтров <B><I>blur</I></B> и <B><I>shadow</I></B> определяет направление, в котором размывается объект или падает тень. Значение этого свойства может задаваться любым числом, как положительным, так и отрицательным и определяет угол, отсчитываемый от вертикали объекта по часовой стрелке с шагом 45 градусов.

<LI>&nbsp;&nbsp;&nbsp;Свойство <B><I>color</I></B> имеют фильтры, которые воздействуют на цветовую гамму элемента. Это фильтры <B><I>chroma</I></B>, <B><I>dropShadow</I></B>, <B><I>glow</I></B>, <B><I>mask</I></B>,<B><I>shadow</I></B>. Значение этого свойства задается шестнадцатиричным числом вида #RRGGBB или словом, например red, green и т.д. <BR>Несколько примеров:

<UL>

<LI><SPAN title="пример использования фильтра dropShadow(color=green)" STYLE="width:100%;color:blue; font-size:34pt; text-align:center; filter: dropShadow(color=green);">

<B>"Буквы с тенью"</B></SPAN><BR>

<LI><SPAN title="пример использования фильтра Shadow(color=red, Strength=35, direction=225)" STYLE="width:100%;color:blue; font-size:34pt; text-align:center; filter: Shadow(color=red, Strength=35, direction=225);">

<B>"Буквы с тенью"</B></SPAN><BR>

<LI><IMG SRC="img/monarch ja timotei.jpg" ALT="пример использования фильтра blur(strength=10)" WIDTH="300" HEIGHT="160" BORDER="0" style="filter: blur(strength=50, direction=45)">

</UL><LI>&nbsp;&nbsp;&nbsp;Фильтры <B><I>blur</I></B> и <B><I>wave</I></B> имеют булево свойство <B><I>add</I></B> включать или не включать исходное изображение объекта в отфильтрованный образ. Имеет значения true и false.

<SPAN title="пример использования фильтра blur(Strength=20)" STYLE="width:100%;color:blue; font-size:44pt; text-align:center; filter: blur(Strength=20);">

<B>Размытые буквы.</B></SPAN>

<SPAN title="пример использования фильтра blur(Strength=20, add=false)" STYLE="width:100%;color:blue; font-size:44pt; text-align:center; filter: blur(Strength=20, add=false);">

<B>Размытые буквы.</B></SPAN><BR>

</UL>

</BODY>

</HTML>

  1. Зберегти документ з назвою CSS4.html. Відкрийте його за допомогою броузера.

  2. Застосуйте вивчені стилі у своїх сайтах і покажіть викладачу.

  3. Випишіть стилі у звіт.

  4. Оформіть звіт.

Питання для самоперевірки

  1. Навіщо використовуються стилі?

  2. Як можна задати стилі?

  3. Як визначити стилі для Н1-Н6?

З повагою ІЦ "KURSOVIKS"!