Лабораторна робота 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.">Тег <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> Учитывая то, что для некоторых (в силу их характера или склада ума) теория - трудно перевариваемое вещество, а также то, что теория требует определенной "подкованности" в рассматриваемой области, а сайт предназначен как раз для новичков в ВЕБ-строительстве,приводяться несколько практических примеров использования таблиц стилей. <BR> Любое правило каскадных таблиц состоит из двух частей: <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> <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>
<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> Прежде чем рассказывать об употреблении селектора CLASS, следует сказать несколько общих слов об употреблении таблиц стилей, собственно объясняющих необходимость данного селектора.<BR> Дело в том, что хотя применение правил стилей в отдельных тегах формально не противоречит правилам HTML, в действительности является абсолютно нецелесообразным, так как сводит на нет основные преимущества таблиц стилей. Вспомним, что таблицы стилей:<UL> <LI><FONT COLOR="#0000FF">а.</FONT> дают возможность помещать всю информацию о внешнем виде сайта в одно место, например, в одном файле. Такой файл можно сделать один раз и потом пользоваться им всю жизнь. </UL> И, как следствие - <UL> <LI><FONT COLOR="#0000FF">б.</FONT> дают возможность оформлять сайт как единое целое, делать страницы в едином стиле, <LI><FONT COLOR="#0000FF">в.</FONT> при желании или необходимости сделать какие-то изменения во внешнем облике сайта, достаточно внести исправления только в файл с правилами таблиц стилей. </UL> Другими словами: таблицы стилей облегчают труд ВЕБ-мастера, удаляя из него рутинные действия по прописке параметров каждого тега и их значений и оставляя больше времени и сил для творчества. Правда, я не знаю, компенсирует ли этот остаток те силы и время, которые уйдут на изучение CSS.<BR> При использовании же правил таблиц стилей в отдельных тегах, для внесения изменений придется пересмотреть весь документ, что потребует достаточно большой и кропотливой работы.<BR> Но у каждой медали две стороны. Есть вторая сторона и у таблиц стилей :-) (что-то шуток сегодня много!). Дело в том, что таблицы стилей, в качестве селектора которых используется тег HTML, влияют на отображение ВСЕХ элементов в документе, определенным этим тегом. То есть, если мы пропишем в файле с правилами, например: P {color: blue}<P>то все, что будет заключаться в теги параграфа, будет отображаться синим цветом, как этот текст.</P> А если нам нужно (или мы очень хотим) выделить какой-то параграф, для особой важности, например, красным цветом? Хорошо, если один, тогда можно прописать для него правила в теге, его определяющем. А если у нас таких параграфов на сайте много? Например 20-30% или больше? На этот случай в HTML 4.0 введен в качестве стандартов для всех тегов параметр CLASS. Его значением является ссылка на класс, задаваемый в таблице стилей. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой.<BR> Конкретный пример: мы хотим, чтобы заголовки первого уровня на нашем сайте были двух видов. Прописываем в таблицы стилей такое правило: <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> Яркие примеры, не так ли? В тексте документа эти заголовки определены следующими тегами: <BR><H1 class=class1>Этот заголовок определяется классом 1</H1><BR><H1>Этот - классом 2</H1><BR> В данном примере я обозвал классы немудрено, просто по порядку. Это не имеет принципиального значения. Вы можете присваивать им любые имена, например, называть в честь любимых и друзей: <BR>H1.Sveta<BR>H1.Vova. <BR> Главное потом не перепутать, кто есть кто и расставить имена классов в тексте документа в нужных местах. <BR> Вот собственно и все о селекторе, он же - параметр, CLASS. Мало, но довольно существенно. </TD></TR></TABLE> </BODY> </HTML>
<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> Некоторые авторы выделяют фильтры в отдельный класс инструментов оформления HTML-страниц и это, в общем-то, правильно. Но, постольку, поскольку значения свойства фильтров указываются следуя правилам задания свойств каскадных таблиц стилей, а также учитывая, что этот сайт - не всеобъемлющий справочник, а всего лишь краткое руководство для начинающих, я позволил себе вольность включить описание фильтров и переходов в главу CSS. Если в будущем я решусь развить эту тему дальше, она будет выделена в отдельный раздел. <BR> Итак: <H1>Фильтры.</H1> Как всегда, сначала немного теории (уж никак без нее иногда не обойтись :-(. В принципе те, кто не любит теорию, могут сразу переходить к примерам :-).<BR> <B><I>Фильтр</I></B> - это некоторый алгоритм, преобразующий визуальное отображение элемента в окне броузера. Он может быть статическим и динамическим.<BR> <B><I>Статический фильтр</I></B> преобразует элемент и после этого он отображается.<BR> <B><I>Динамический фильтр</I></B> воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр еще называют <I>переходом</I> из одного состояния отображения в другое.<BR> Фильтры применяются не ко всем элементам, а только к тем, которые определяют прямоугольный блок и не являются окнами. <A target=_blank HREF="filtr1.shtml">Здесь</A> Вы найдете перечень элементов, к которым могут применяться фильтры и к которым они применяться не могут, а <A target=_blank HREF="filtr2.shtml">здесь</A> - краткий перечень фильтров и их свойств.<BR> Как я уже сказал, применяются фильтры путем задания свойства фильтров следуя правилам задания свойств каскадных таблиц стилей. Общий вид записи задания свойств такой:<BR> <B>filter: имя_фильтра(параметры);</B><BR> Параметры, если они нужны, задаются в форме:<BR><B>имя_параметра=значение_параметра</B><BR> Некоторым фильтрам требуется несколько параметров, задаваемых через запятую, а некоторым параметры вообще не нужны, но круглые скобки должны присутствовать обязательно.<BR> Если к элементу применяется несколько фильтров, они задаются в виде списка с пробелом в качестве разделителя.<BR> Ну а теперь пора переходить к примерам :-) Для экспериментов нам понадобится какая-нибудь картинка. Возьмем для этого хотя бы розы, которые я в прошлом году пытался отправить (к сожалению, безуспешно) женщинам - читателям моей рассылки на восьмое марта. Дорогие женщины, вот розы, которые предназначались Вам (лучше поздно, чем никогда :-):<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> Постольку, поскольку в одной статье все равно не удастся описать все возможности, которые фильтры дают ВЕБ-мастеру, я в заключении приведу пару примеров использования фильтра 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>
<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> Есть несколько свойств, которые присущи всем фильтрам или какой-то их группе. <UL> <LI> Каждый фильтр имеет свойство <B><I>enabled</I></B>, которое разрешает (значение <B><I>true</I></B>) или запрещает (значение <B><I>alse</I></B>) применение присоединенного к обьекту фильтра <LI> Свойство <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> Свойство <B><I>direction</I></B> фильтров <B><I>blur</I></B> и <B><I>shadow</I></B> определяет направление, в котором размывается объект или падает тень. Значение этого свойства может задаваться любым числом, как положительным, так и отрицательным и определяет угол, отсчитываемый от вертикали объекта по часовой стрелке с шагом 45 градусов. <LI> Свойство <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> Фильтры <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>
Питання для самоперевірки
З повагою ІЦ "KURSOVIKS"! |