Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ЛР_№5 Основы CSS.doc
Скачиваний:
69
Добавлен:
25.03.2016
Размер:
628.22 Кб
Скачать

Пример 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>

Задания к лабораторной работе:

Для выполнения заданий используйте файл «Цветовая схема» при задании цветов.

  1. Создайте стиль для отдельного HTML-тега <h1>: выберете цвет шрифта зеленый, определите любой тип и размер шрифта.

  2. Создайте стиль для web-страницы с использованием следующих тегов с необходимыми параметрами:

<Body> – цвет, рисунок,

<h1> – тип, размер и цвет шрифта,

<h2> – тип, размер и цвет шрифта,

<p> – тип, размер и цвет шрифта.

  1. Создайте два внешних стиля. Первый пусть содержит несколько определений тегов <h1>…..<h6>, <p>, <Body>, а второй – содержит определения независимых и зависимых классов. Затем создайте HTML-документ, добавьте ссылки на внешние таблицы стилей двумя описанными способами и оформите его используя указанные теги.

  2. Создайте внешний CSS-файл и определите в нем ID для идентификации трех любых объектов и свяжите этот файл с HTML-документом.

  3. Создайте несколько ссылок на HTML-странице и оформите их используя псевдоклассы link, visited, hover и active.

Теоретические вопросы: (необходимо законспектировать)

  1. Основное назначение и принципы использования каскадных таблиц стилей (CSS).

  2. Синтаксис добавления стилей: для отдельного HTML-тега, на web-страницу, не web-сайт в целом.

  3. Способы добавления внешних стилей на HTML-страницу.

  4. Назначение и синтаксис классов для создания тегов.

  5. Определение ID для идентификации объекта.

13