Существует три способа задания стиля: в заголовочном теге, при помощи тега <style>, как в предыдущем примере, в отдельном файле и внутри тега.
Если стили заданы в отдельном файле, его необходимо подключить при помощи тега <link>:
<link href="/StyleA.css" rel="stylesheet" type="text/css">
Файл, содержащий стили, должен иметь расширение .css.
Если необходимо задать стиль внутри тега, то он определяется при помощи атрибута style:
<p style="position:absolute;top:40;left:60;color:red">Абзац 3</p>
Механизм CSS позволяет переопределить теги HTML (как и любые другие теги), т.е. определить способ их отображения по умолчанию:
<style type="text/css"> <!--
h1 {
font-family: "Times New Roman", Times, serif; font-size: 34px;
color: #FF0000; text-align: center;
}
--> </style>
Для управления отображением гиперссылок используются так называемые псевдостили. Они позволяют определить вид непосещенной ссылки (a:link); ссылки, по которой пользователь уже совершил переход (a:visited), а также вида ссылки, над которой находится курсор
(a:visited), и активной ссылки (a:active):
a:link {
font-family: Geneva, Arial, Helvetica, sans-serif; color: #CC0000;
text-decoration: underline; background-color: #CCFFFF;
}
a:hover {
font-family: "Times New Roman", Times, serif; font-size: 22px;
font-style: italic; font-weight: bold; color: #FFFF00; text-decoration: blink;
}
18
a:visited {
color: #660000;
}
a:active { font-size: 18px; color: #000099;
text-decoration: blink;
}
1.Создайте два файла page1s.htm и page2s.htm. со структурой вэбстраниц (теги <html>, <head> и <body>). С помощью заголовочных тегов озаглавьте эти страницы. Установите на странице page1s.htm ссылку на страницу page2s.htm.
2.Создайте абзац текста с помощью тега <p> и отформатируйте его с помощью стиля styleA. Задайте числовые значения margin и padding этого стиля, равными последней цифре номера зачетной книжки. Если последняя цифра 0, то значение сделать равным 10. Остальные параметры взять из примера в разделе «Теоретическая часть».
3.В файле page1s.htm создайте псевдостили гиперссылок со следующими значениями (табл. 5 – 7):
|
|
|
|
|
|
|
|
|
|
Таблица 5 |
|
|
|
Параметр color псевдостилей гиперссылок |
|
|
|
|
|||||
Вариант |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
|
9 |
|
|
|
|
|
|
|
|
|
|
|
|
a:link |
#000099 |
#0000FF |
#FF0000 |
#00FF00 |
#FF00FF |
#990000 |
#0000FF |
#00FF00 |
#FF0000 |
|
#00CC00 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:hover |
#000033 |
#FF0000 |
#000099 |
#0000FF |
#000099 |
#0000FF |
#000033 |
#FF0000 |
#0000FF |
|
#000033 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:visited |
#0000FF |
#000033 |
#FF00FF |
#000033 |
#0000FF |
#000033 |
#000099 |
#0000FF |
#000099 |
|
#0000FF |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
19
|
|
|
|
|
|
|
|
|
|
|
|
Таблица 6 |
|
|
|
Параметр |
font-style псевдостилей гиперссылок |
|
|
|
|||||||
Вариант |
0 |
|
1 |
|
2 |
3 |
4 |
5 |
6 |
|
7 |
8 |
9 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Roman |
|
Arial |
|
Roman |
Arial |
Roman |
Arial |
Roman |
|
Arial |
Roman |
Arial |
a:link |
New |
|
|
New |
New |
New |
|
New |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Times |
|
|
|
Times |
|
Times |
|
Times |
|
|
Times |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Arial |
|
Roman |
|
Arial |
Roman |
Arial |
Roman |
Arial |
|
Roman |
Arial |
Roman |
a:hover |
|
New |
|
New |
New |
|
New |
New |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Times |
|
|
Times |
|
Times |
|
|
Times |
|
Times |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Roman |
|
Arial |
|
Roman |
Arial |
Roman |
Arial |
Roman |
|
Arial |
Roman |
Arial |
a:visited |
New |
|
|
New |
New |
New |
|
New |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Times |
|
|
|
Times |
|
Times |
|
Times |
|
|
Times |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Таблица 7 |
|
|
|
Параметр |
font-size псевдостилей гиперссылок |
|
|
|
|||||||
Вариант |
0 |
|
1 |
|
2 |
3 |
4 |
5 |
6 |
|
7 |
8 |
9 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:link |
16 |
|
18 |
|
16 |
18 |
16 |
18 |
16 |
|
18 |
16 |
18 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:hover |
18 |
|
20 |
|
18 |
20 |
18 |
20 |
18 |
|
20 |
18 |
20 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:visited |
16 |
|
18 |
|
16 |
18 |
16 |
18 |
16 |
|
18 |
16 |
18 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20 |
|
|
|
|
|
|
|
|
|
|
|
|
|
1.А. Матросов и др. HTML. СПб: БХВ-Петербург, 2003.
2.Т. Пауэлл. Web-дизайн. СПб: БХВ-Петербург, 2002.
3.В. Дронов. Macromedia Dreamweaver. СПб: БХВ-Петербург, 2003.
4.http://www.htmlbook.ru/
5.http://www.postroika.ru/
6.http://dreamweaver.com.ru/
7.http://dreamweaver3.narod.ru/
21