Лабораторная работа №4
Тема «Дизайн Web-страниц c помощью CSS»
Цель:
1) научиться использовать свойства стилей для дизайна и верстки Web-страниц
2) выработать навык эстетического оформления web-документа.
Теоретическая часть
CSS-свойства: оформление таблиц
Псевдоклассы
Способы привязки правил оформления CSS к элементам документа HTML могут быть: по названию тега, по имени класса, по ID и т.п. В CSS также существует несколько псевдоклассов. С помощью псевдоклассов можно задать стиль в зависимости от состояния элемента или его положения в документе.
Для ссылок определено 4 псевдокласса:
link - ссылки, которые не посещались пользователем;
visited - посещенные ссылки;
active - активная (нажатая) ссылка;
hover - ссылка, на которую наведен курсор.
Пример:
<html>
<head>
<title>IIpимep</title>
<style>
A:link, A:visited {
color: black;
font-family: Verdana, sans-serif;
text-decoration: none;
}
A:hover {
color: #de7300;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="index.html">Главная</а><br>
<a href="hobby.html">Moe хобби</а><br>
<a href="photo.html">Фотоальбом</а><br>
</body>
</html>
Рисунок 4. Пример: меню сайта