Применение стилей и стилевых таблиц.

Цель работы: Познакомиться с понятием стиль и рассмотреть способы использования стилей при формировании Web-страниц. Сформировать файлы-шаблоны.

Краткая теория

Каскадные таблицы стилей (CSS — Cascading Style Sheets) — эффективное средство автоматизации стилевого оформле­ния HTML-документов. Технология стилевого оформления широко распространена в электронном делопроизводстве (понятие стиля входит в круг базовых в Microsoft Word, Word Perfect и других офисных приложениях). Использование сти­лей для оформления электронных документов (в том числе и Web-страниц) позволяет:

1.  унифицировать оформление однотипных структурных фраг­ментов (абзацев, ячеек таблиц, иллюстраций и подписей под ними и т. д.) как в пределах одного документа, так и в рамках совокупности документов, принадлежащих одному проекту (например, одному узлу);

2.  упростить модификацию стиля по всей совокупности оди­наково оформленных документов (например, при необхо­димости устранения обнаруженных ошибок оформления);

3.  решить проблему вывода одного документа на различных устройствах отображения (в частности, в различных брау­зерах).

Определение стиля может быть:

1.  собственным для отдельного элемента документа (напри­мер, абзаца);

2.  локальным для всего документа;

3.  глобальным (внешним) для нескольких документов.

Каскадные таблицы стилей CSS имеют следующие особенности:

1.  Гибкость подключения. Информация о стилях может быть расположена практически в любом месте HTML-документа, а сами стили могут быть подключены несколькими способами.

НЕ нашли? Не то? Что вы ищете?

2.  Каскадность. Эта особенность CSS означает, что правила стиля, могут быть описаны в различных местах HTML-документа, и даже в различных документах. В результате образуется «каскад» (набор) правил, которыми должен руководствоваться браузер при отображении соответствующих элементов. Каскадность предусматривает приоритет стилей, подключенных позднее, перед стилями, которые были подключены ранее.

3.  Зависимость от среды представления. Таблицы стилей применяются к конкретным носителям (понятно, что таблицы стилей для последующего отображения на экране обычного монитора должны отличаться от таблиц стилей, предназначенных для карманного компьютера, например). Поэтому таблицы стилей должны меняться в зависимости от вероятной среды пред­ставления. На практике это означает, что, определив с помощью скриптов разрешение компьютера посетителя сайта и тип используемого браузера, мы можем подключить соответствующую таблицу стилей для наилучшего ото­бражения сайта у пользователя.

4.  Наследование. Наследование — это перенос стиля форматирования для элементов-предков на вложенные в них элементы-потомки. При изменении описания стиля элемента-предка соответственно изменяются все элементы, наследующие этот стиль.

Синтаксис

Синтаксис правила стиля CSS в наиболее общем виде имеет следующую форму:

селектор {определение}

Определением стиля называется пара «свойство: значение».

Например, {color: green} является определением стиля.

В качестве селектора могут выступать элементы, классы и одиночные объ­екты. Если для селектора определяется несколько свойств (т. е. есть пар «свой­ство: значение»), то они должны разделяться точкой с запятой.

Опре­делим с помощью CSS зеленый цвет всех абзацев на страни­це (абзац <р>).

р {color: green}

р – селектор, {color: green} – определение стиля для этого селектора

где color – это определяемое свойство,

green – значение этого свойства.

Опре­делим с помощью CSS зеленый цвет абзацев класса green на страни­це (абзац <р>).

p. green {color: green}

р – селектор,

.green – селектор название класса,

{color: green} – определение стиля для этого селектора.

Теперь не все абзацы в документе будут выделены зеленым, а только абзацы класса green.

Если указать в HTML-коде:

<р class="green"> Это текст, который нам очень хочется сделать зеленым</р>

то текст этого абзаца («Это текст, который нам очень хочется сделать зеленым») будет зеленого цвета.

Пусть необходимо выделить в тексте только один абзац зеленым цветом из множества других, т. е. нам не нужно создавать целый класс. Следовательно, следу­ет присвоить абзацу уникальный идентификатор:

<р id="green"> Это текст, который нам очень хочется выделить зеленым цветом</р>

Свойство стиля для данного идентификатора нужно описать так:

#green {color: green}

Теперь только один этот абзац будет выделен зеленым цветом.

Предположим необходимо сделать зелеными не только некоторые абзацы, но и заголовки, списки, а также любые другие элементы Web-страницы.

Описываем класс:

.green {color: green}

Указываем браузеру, что элемент относится к классу green, и он выделит его зеленым цветом.

Например:

<ol>

<li class="green">Один

<li>Два

<li class="green">Три

<li>Четыре

</ol>

body {color: green} – зеленый цвет для всех элементов на Web-странице.

Обратить внимание:

комментирование внутри контейнера <STYLE>…</STYLE> недопустимо!

Выполните примеры.

Примеры, подходящие для проекта, записать в тетрадь с комментариями.

Отчет в тетради:

Конспект:

Способы применения CSS

Синтаксис описания стилей в общем виде. Шпаргалка тегов описания стилей.

Сведения о селекторах (имя элемента разметки, имя класса, идентификатор объекта)

Каскадные таблицы стилей. Наследование.

Файлов в папке «CSS»

Примеры

Списанные в тетрадь примеры комментировать построчно, и описать, что происходило на экране.

1.

<html>
<head>
<style type="text/css">
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold;

color: #0000ff; font-style: italic; }
</style>
</head>
<body>
<b>Полужирный шрифт</b><br>
<i>Курсивный шрифт</i><br>
<b><i>Полужирный курсивный шрифт Arial синего цвета</i></b><br>
<i><b>Курсивный полужирный шрифт</b></i>
</body>
</html>

2.

hi {font-family: Arial, Helvetica, sans-serif; font-size: 160%; color:

#000033;}

h2 {font-family: Arial, Helvetica, sans-serif; font-size: 135%; color:

#333333;}

h3 {font-family: Arial, Helvetica, sans-serif; font-size: 120%; color:

#990000;}

3.

hi, h2, h3 { font-family: Arial, Helvetica, sans-serif; }

hi { font-size: 160%; color: #000033; }

h2 { font-size: 135%; color: #333333; }

h3 { font-size: 120%; color: #990000; }

В следующих примерах будет полезна таблица.

Специальные псевдоклассы

link

Адресная ссылка <а>, по которой еще не выполнялся переход

visited

Адресная ссылка <а>, по которой уже выполнялся пе­реход

active

Элемент, активизированный устройством целеуказания, например, щелчком мыши

hover

Элемент, выбранный, но не активизированный устрой­ством целеуказания, например, позиционированием курсора мыши на элементе (без щелчка)

focus

Элемент, находящийся в фокусе, т. е. готовый принять клавиатурный ввод

4.

<html>
<head>
<style type="text/css">
a:link { color: #003366; }
a:visited { color: #660066; }
a:hover { color: #800000; }
a:active { color: #FF0000; }

</style>
</head>
<body>
[<a href=#>Ссылка 1</a>][<a href=#>Ссылка 2</a>][<a href=#>Ссылка 3</a>]
</body>
</html>

5.

<head>
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
</style>

</head>
<body>
<a href="">Ссылка никуда</a>

6.

<head>
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size: 24; font-weight: bold; color: navy;}
</style>

</head>
<body>
<a href="">Мышь наведи!</a>

7.

<head>
<style>
a:link { color: blue; text-decoration: none }
a:hover { color: red; text-decoration: underline }
.link { color: blue }
</style>

</head>
<body>
<a href=""><span class="link">Мышь наведи!</span></a>
</body>

8.

<html>
<head>
<style>
a { font-size: 16px; color: red }
a.link1 { font-size: 12px; color: green }
a.link2 { font-size: 14px; color: blue }
</style>

</head>
<body link="#0000ff">
<p><a href="">Ссылка 1</a>
<p><a href="" class="link1">Ссылка 2</a>
<p><a href="" class="link2">Ссылка 3</a>
</body>
</html>

9.

<html>
<head>
<style type="text/css">
.move {cursor: move}
.help {cursor: help}
</style>
</head>
<body>
<strong>
<a href="" class="move">Переместите меня</a>
<br>
<a href="" class="help">FAQ</a>
</b>
</body>
</html>

10.

<html>
<body style="font-family: Verdana">
<em>Слой 1 cверху</em>
<div style="position:relative; font-size:50px; z-index:2;

color: #3355ad">Слой 1</div>
<div style="position:relative; top:-65; left:5; color: #ee342b;

font-size:80px; z-index:1">Слой 2</div>
<em>Слой 2 cверху</em>
<div style="position:relative; font-size:50px; z-index:3;

color: #3355ad">Слой 1</div>
<div style="position:relative; top:-65; left:5; color:#ee342b;

font-size:80px; z-index:4">Слой 2</div>
</body>
</html>

11.

<table style="width:100%;background:green;

filter:alpha(opacity=100,style=1,finishopa city=10);

height:5">

<tr>

<td><b style="color:white; font-family: Arial">Большой заголовок</b>

</table>

12.

<table border="1">

<tr>

<td style="filter: blur(add='0', direction='180', strength='6')">

&nbsp;Текст в ячейке после применения фильтра Blur&nbsp;</td>

<tr>

<td align="center">Обычный текст в ячейке таблицы</td>

</table>

13.

<p align=center

style="filter: dropshadow(color='#d2b48c', offx=8, offy=5, positive=1);

width:600; font:400%; font-family:arial">

Текст с тенью
Пример "негативной" тени:
<p align=center

style="filter: dropshadow(color='#d2b48c', offx=8, offy=5, positive=0);

width:100%; font:400%; font-family:arial">

Текст с "негативной" тенью