- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
Раздел 3. Ссылки
Всё рассмотренное в предыдущих работа можно применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на web-сайт. Для этого используются так псевдоклассы.
Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.
Рассмотрим пример. Ссылки специфицируются в HTML тэгом <a>. В CSS также можем использовать a в качестве селектора:
a {
color: blue;
}
Ссылка может иметь разные состояния. Используйте a:link и a:visited для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.
Мы рассмотрим каждый их четырёх псевдоклассов на примерах и с объяснениями.
В примере кода непосещённые ссылки – синие, посещённые ссылки – фиолетовые, активные ссылки имеют , ссылки становятся оранжевыми и курсивными при прохождении указателя над ними,.
Задание 9.16
Измените содержание выше созданных файлов, сохраните их под новыми именами и просмотрите результат в браузере
Default9_16.htm:
<html>
<head>
<title>Работа с ссылками</title>
<style type="text/css">
a:link {
color: #6699CC;
}
a:visited {
color: #660099;
}
a:active {
background-color: #FFFF00;
}
a:hover {
color: orange;
font-style: italic;
}
</style>
</head>
<body>
<p>Примеры изменения стиля текста:</p>
<ul>
<li><a href="default31.htm"> свойство text-ident</a></li>
<li><a href=" default32.htm "> свойство text-align </a></li>
<li><a href=" default33.htm "> свойство text-decoration </a></li>
<li><a href=" default34.htm "> свойство text-spacing </a></li>
<li><a href=" default35.htm "> свойство text-transform </a></li>
</ul>
</body>
</html>
Пример 1: Эффект при нахождении указателя над ссылкой
Рассмотрим несколько дополнительных примеров для псевдокласса :hover.
Расстояние между буквами
Расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:
Задание 9.17
Измените содержание выше созданного файла, сохраните под новым именем и просмотрите результат в браузере
Default9_17.htm:
<html>
<head>
<title>Работа с ссылками</title>
<style type="text/css">
a:link {
color: #6699CC;
}
a:visited {
color: #660099;
}
a:active {
background-color: #FFFF00;
}
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<p>Примеры изменения стиля текста:</p>
<ul>
<li><a href="default31.htm"> свойство text-ident</a></li>
<li><a href=" default32.htm "> свойство text-align </a></li>
<li><a href=" default33.htm "> свойство text-decoration </a></li>
<li><a href=" default34.htm "> свойство text-spacing </a></li>
<li><a href=" default35.htm "> свойство text-transform </a></li>
</ul>
</body>
</html>
UPPERCASE и lowercase
Свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:
Задание 9.18
Измените содержание выше созданного файла, сохраните под новым именем и просмотрите результат в браузере
Default9_18.htm:
<html>
<head>
<title>Работа с ссылками</title>
<style type="text/css">
a:link {
color: #6699CC;
}
a:visited {
color: #660099;
}
a:active {
background-color: #FFFF00;
}
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
</style>
</head>
<body>
<p>Примеры изменения стиля текста:</p>
<ul>
<li><a href="default9_1.htm"> свойство text-ident</a></li>
<li><a href=" default9_2.htm "> свойство text-align </a></li>
<li><a href=" default9_3.htm "> свойство text-decoration </a></li>
<li><a href=" default9_4.htm "> свойство text-spacing </a></li>
<li><a href=" default9_5.htm "> свойство text-transform </a></li>
</ul>
</body>
</html>
Удаление подчёркивания ссылок
Свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.
a {
text-decoration:none;
}
Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.
Задание 9.19
Измените содержание выше созданного файла, сохраните под новым именем и просмотрите результат в браузере
Default9_19.htm:
<html>
<head>
<title>Работа с ссылками</title>
<style type="text/css">
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
</style>
</head>
<body>
<p>Примеры изменения стиля текста:</p>
<ul>
<li><a href="default9_1.htm"> свойство text-ident</a></li>
<li><a href=" default9_2.htm "> свойство text-align </a></li>
<li><a href=" default9_3.htm "> свойство text-decoration </a></li>
<li><a href=" default9_4.htm "> свойство text-spacing </a></li>
<li><a href=" default9_5.htm "> свойство text-transform </a></li>
</ul>
</body>
</html>
Задание для самостоятельного выполнения:
Создайте документ, содержащий ссылки на четыре рисунка. Используйте псевдоклассы и рассмотренные ранее свойства элементов для создания собственных эффектов.
Контрольные вопросы:
Работа с шрифтами: основные операции.
Работа с ссылками: основные операции.