- •Лабораторная работа №5 Разработка таблиц стилей css в html-документе
- •Установка стилей для отдельного html-тега
- •Добавление стилей на web-страницу
- •Пример 1: Добавление стилей на web-страницу
- •Добавление стилей на web-сайт
- •Пример 2: Добавление стилей на web-сайт
- •Определение классов для создания тегов
- •Пример 3: Определение классов
- •Определение id для идентификации объекта
- •Пример 4: Идентификация объекта
- •Определение ссылок стилей с псевдоклассами
- •1. A:link {…}
Пример 4: Идентификация объекта
<html>
<head>
<style type="text/css">
#area1 {
color: red;
margin-left: 10px; }
#image1 { float: right; }
</style>
</head>
<body>
<p> текст ……… </p>
<p id="area1"> <img id="image1" src="2.jpg"> текст…<i> текст…</i> текст…</p>
<p> текст ………....</p>
</body>
</html>
Рис.12. Пример 4
Определение ссылок стилей с псевдоклассами
Большинство браузеров позволяют задать цвет ссылок для различных состояний (ссылка, посещенная ссылка и активная ссылка) в теге <body> документа. При помощи CSS можно указать не только цвет, но и другие CSS-свойства для ссылок.
Поддерживающие CSS браузеры автоматически распознают определенные классы, которые носят название псевдоклассы.
Псевдоклассы представляют собой теги с уникальными атрибутами, которые можно определить по отдельности. Например, тег <a> включает несколько состояний ссылок: active, visited, hover и link (задается по умолчанию). Можно задавать эти псевдоклассы по отдельности, как если бы они были HTML-селекторами.
Порядок, в котором задаются стили, имеет значение для определенных браузеров. Чтобы получить наилучший результат, определяйте стили в следующем порядке: link, visited, hover и active.
1. A:link {…}
Псевдокласс link позволяет определить внешний вид гиперссылок, которые еще не были выбраны (рис.13).
Рис.13. Псевдокласс link
2. a:visited {…}
Псевдокласс visited позволяет определить внешний вид ссылок, которые уже были выбраны пользователем (рис.14).
Рис.14. Псевдокласс visited
3. a:hover {…}
Псевдокласс hover позволяет определить внешний вид ссылок, на которых расположен курсор мыши (рис.15).
Рис.15. Псевдокласс hover
4. a:active {…}
Псевдокласс active позволяет определить внешний вид ссылки, по которой щелкнул пользователь (рис.16).
Рис.16. Псевдокласс active
Пример 5: Определение ссылок стилей с псевдоклассами
<html>
<head>
<style type="text/css" >
a:link {color:#cc0000;
font-weight:bolt;}
a:visited {color:green;
text-decoration:none;
font-weight:normal;}
a:hover {color:#ff0000;
text-decoration:none;
cursor:nw-resize;}
a:active {color:#32CD32;
background-color:#ff0000;
text-decoration:none;}
</style>
</head>
<body>
<p><a href="index.html">следующая страница</a></p>
</body>
</html>
Задания к лабораторной работе:
Для выполнения заданий используйте файл «Цветовая схема» при задании цветов.
Создайте стиль для отдельного HTML-тега <h1>: выберете цвет шрифта зеленый, определите любой тип и размер шрифта.
Создайте стиль для web-страницы с использованием следующих тегов с необходимыми параметрами:
<Body> – цвет, рисунок,
<h1> – тип, размер и цвет шрифта,
<h2> – тип, размер и цвет шрифта,
<p> – тип, размер и цвет шрифта.
Создайте два внешних стиля. Первый пусть содержит несколько определений тегов <h1>…..<h6>, <p>, <Body>, а второй – содержит определения независимых и зависимых классов. Затем создайте HTML-документ, добавьте ссылки на внешние таблицы стилей двумя описанными способами и оформите его используя указанные теги.
Создайте внешний CSS-файл и определите в нем ID для идентификации трех любых объектов и свяжите этот файл с HTML-документом.
Создайте несколько ссылок на HTML-странице и оформите их используя псевдоклассы link, visited, hover и active.
Теоретические вопросы: (необходимо законспектировать)
Основное назначение и принципы использования каскадных таблиц стилей (CSS).
Синтаксис добавления стилей: для отдельного HTML-тега, на web-страницу, не web-сайт в целом.
Способы добавления внешних стилей на HTML-страницу.
Назначение и синтаксис классов для создания тегов.
Определение ID для идентификации объекта.