logo
Ermak

16. Таблицы стилей css и их виды. Принцип отделения структуры от оформления с помощью таблиц стилей.

Таблицы стилей или CSS

Таблицы стилей (style sheets) представляют собой абстракцию, в которой стиль документа определяется отдельно от его содержания. Термин "таблицы стилей"прочно вошел в русскую речь, хотя в некоторых книгах вы можете встретить и более точный перевод - "листы стилей".  Общие сведения о таблицах стилей находятся здесь. Сводная таблица стилей.

По методам добавления стилей в документ различают три вида стилей.

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

Определяются атрибутом непосредственно в элементе. Мало отличается от традиционного HTML. Внешний вид документа трудно изменить.

Пример

<!-- каждому параграфу – свой цвет -->

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">

</head>

<P style="color:blue">LET US TALK</P>

<P style="color:red">LET US READ</P>

</html>

Глобальные стили

Определяются тэгом STYLE с атрибутом TYPE="text/css" в контейнере <HEAD>...</HEAD>, являются универсальным средством, позволяющим не только оперативно изменять внешний вид страницы, но и  и бороться с перегруженностью  документа оформительскими тэгами.

Пример

<!-- все параграфы лилового цвета -->

<html>

<head>

<style type="text/css">

<!--

P {color:#FF00FF}

-->

</style>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">

</head>

<P>LET US READ AND LEARN</P>

<P>LET US READ AND LEARN</P>

</html>

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

Связанные стили

Определяются во внешнем файле. Позволяют всем страницам, принадлежащим одному серверу выглядеть единообразно. Для связи с файлом, на котором описана таблица стилей, используется тэг<LINK> с атрибутом REL="stylesheet".

Другие атрибуты

 TITLE. Задает заголовок страницы, на которой с помощью тэга <STYLE>, определена таблица стилей.

 HREF. Ссылка на страницу с таблицей стилей или имя файла.

 TYPE. Тип файла, с которым нужно установить связь.

Пример

<LINK TITLE="mystyle" REL="stylesheet" HREF="style.htm" TYPE="text/css">

Каскадные таблицы стилей (CSS)

Каскадные таблицы стили CSS (Cascading Style Sheets) - первый стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тэгами от внешних.

CSS - это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами. Здесь можно найти самые разнообразные свойства стилей. Однако, пока еще броузеры не поддерживают все возможности CSS. Можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.