Визуальные свойства

Свойство	Значение	Описание	Пример
cursor	crosshair hand pointer move e-resize ne-resize nw-resize n-resize sw-resize se-resize s-resize w-resize text wait help auto default	Задает вид курсора	cursor: crosshair
filter	alpha blur chroma dropshadow flipv fliph glow gray invert light mask shadow wave xray	Фильтр для текста или изображения	filter: fliph
visibility	inherit none visible	Задает видимость фрагмента документа	visibility: visible
display	inline list-item none block	Задает видимость фрагмента документа, визуально отличается от visibility тем, что сдвигает предыдущий и последующий элементы вместе	display: block

Единицы измерения

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

Относительные единицы

Единица	Описание
em	Высота шрифта элемента
ex	Высота символа x
px	Пиксел
%	Процент

Абсолютные единицы

Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Добавление таблиц стилей к документу

Таблицы стилей могут быть добавлены на страницу тремя разными способами, которые различаются по своим возможностям.

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег LINK в заголовке страницы.

<link rel="stylesheet" type="text/css" href=mysite.css>

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом STYLE.

<style type="text/css"> H1 { font-size: 120%; font-family: Arial; color: #333366; } </style>

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр style, а его атрибуты указываются с помощью языка таблицы стилей.

<H1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366;">Hello, world!</H1>

Вопросы к теме

• Из чего состоит стиль?

• Какие существуют селекторы?

• Как работает каскадирование?

• Сколькими способами можно использовать стили в документе?

• Как выглядит группирование?

• Сколько существует единиц измерения для значений свойств стилей?

Практическое задание

Задание 1

В HTML документе оформить с помощью стилей цвет фона, цвет текста, увеличить межстрочный интервал и выровнять текст по ширине окна.

Задание 2

Оформить документ с помощью стилей.