
	карта сайта	индекс	поиск	помощь	info

CSS - КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ

Если HTML предназначен для логического форматирования документов, то управление отображением содержимого задается с помощью каскадных таблиц стилей (Cascade Style Sheet – CSS). CSS являются мощным инструментом, позволяющим очень точно управлять отображением содержимого документа и могут использоваться не только совместно с HTML, но и с расширяемым языком разметки (Extensible Markup Language – XML).

Коробочная модель CSS

В CSS принята коробочная модель форматирования, которая обеспечивает единообразное форматирование различных тегов (рис. 5).

Коробочная модель форматирования CSS

Рис. 5. Коробочная модель форматирования CSS (увеличить)

В качестве примера приведем форматирование двух абзацев текста при помощи стиля style1, созданного в пакете Dreamweaver (рис. 6):

Задание стиля в Dreamweave

Рис. 6. Коробочная модель форматирования CSS
а – результат применения стиля: б – задание стиля в Dreamweaver (увеличить)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">

</style>
</head>
<body>
<p class="style1">Абзац 1</p>
<p class="style1">Абзац 2</p>
</body>
</html>

Сам стиль определяется в заголовке веб-страницы (тег <HEAD>). Форматирование тега выполняется при помощи атрибута class:

<p class="style1">Абзац 1</p>

Способы задания стилей

Существует три способа задания стиля. В заголовочном файле при помощи тега <style>, как в предыдущем примере, в отдельном файле и внутри тега.

Если стили заданы в отдельном файле, его необходимо подключить при помощи тега <link>:

Файл, содержащий стили, должен иметь расширение .css.

Если необходимо задать стиль внутри тега, то он определяется при помощи атрибута style:

<p style="position:absolute;top:40;left:60;color:red">Абзац 3</p>

Механизм CSS позволяет переопределить теги HTML (как, впрочем, и любые другие теги), т.е. определить способ их отображения по умолчанию:

Псевдостили гиперссылок

Для управления отображением гиперссылок используются так называемые псевдостили. Они позволяют определить вид непосещенной ссылки (a:link); ссылки, по которой пользователь уже совершал переход (a:visited), а так же вида ссылки, над которой находится курсор (a:visited) и активной ссылки (a:active):

a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #CC0000;
text-decoration: underline;
background-color: #CCFFFF;
}
a:hover {
font-family: "Times New Roman", Times, serif;
font-size: 22px;
font-style: italic;
font-weight: bold;
color: #FFFF00;
text-decoration: blink;
}
a:visited {
color: #660000;
}
a:active {
font-size: 18px;
color: #000099;
text-decoration: blink;
}

< предыдущая

оглавление

следующая >

Кто Вы?

Исследователь

Специалист

Управленец

Преподаватель

Студент

Аспирант

Другое

Результаты голосования