Тема Дизайн Web-страниц c помощью CSS
Лабораторная работа №4
Тема «Дизайн Web-страниц c помощью CSS»
Цель:
1) научиться использовать свойства стилей для дизайна и верстки Web-страниц
2) выработать навык эстетического оформления web-документа.
Теоретическая часть
CSS-свойства: оформление таблиц
Таблицы
Свойства CSS могут применяться к таблицам, их строкам и ячейкам для задания свойств текста и шрифта, управления фоном, полями, границами,… Создадим таблицу и применим к ней CSS -стили. В таблицу внесем данные о… тег <th>...</th>.ГодБраузер IE Firefox Safari Opera
2009 69.13% 22.67% 3.58% 2.18% 2008 77.83% 16.86% 2.65% 1.84% 2007 79.38% 14.35% 4.70% 0.50%Псевдоклассы
Способы привязки правил оформления 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. Пример: меню сайта