Методы встраивания таблиц стилей в документе html
-
Связывание – HTML-документ с помощью тэга <LINK> связывается с внешним файлом, содержащим таблицу стилей и имеющим расширение .css. Позволяет использовать одну таблицу для форматирования нескольких страниц HTML.
Например:
<LINK REL=stylesheet TYPE=TEXT/CSS HREF=mystyles.css>
-
Встраивание – таблица стилей определяется в разделе <STYLE>, который располагается в разделе <HEAD>. Позволяет задавать все правила таблицы стилей непосредственно в самом документе.
Например:
<style type=text/css>
h1 {color: green}
p {color: maroon}
</style>
-
Вложение – определение стиля для конкретного элемента с помощью параметра STYLE, размещаемого внутри тэга элемента. Позволяет изменять форматирование конкретных элементов страницы.
Например:
<p STYLE="text-align: justify; font-size: 20; background-color: silver">
-
Импорт – импорт внешнего файла CSS с помощью директивы @IMPORT. Позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Например:
<style type="text/css"> @import "style.css" </style>
Все способы встраивания таблиц стилей свободно сочетаются в одном документе.
Принципы наследования
Воздействие таблиц стилей на элементы происходит в следующем порядке:
-
назначаются связанные стили из внешнего файла;
-
затем встраиваемые стили из раздела <LINK>;
-
в последнюю очередь вложенные стили для каждого элемента.
Совместимость с браузерами, не поддерживающими CSS
Обеспечивается путем заключения содержимого раздела <STYLE> в комментарий HTML. Те браузеры, которые поддерживают CSS, игнорируют любые комментарии в разделе <STYLE> и обрабатывают их содержимое. Браузеры, не поддерживающие CSS, не принимают тэга <STYLE>, а комментарий вместе с содержимым игнорируют.
Например:
<STYLE>
<!--
h1 {color: red}
h2 {color: blue}
-->
</STYLE>
Селекторы класса
Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тэга и отделяется от него точкой.
Например:
Е
сли
все заголовки 1 уровня должны быть
красного цвета, но иногда они могут быть
зелеными или синими, используем селектор
класса – h1.blue
и h1.green
Селекторы ID
Задает уникальное имя элемента, которое используется для ссылок на него в таблицах стилей. Селектор ID можно применять к любому элементу документа. Запись селектора ID начинается с символа #.
Например:
<HEAD>
<STYLE TYPE=text/css>
<!--
#back {color: maroon; font-size:20}
-->
</STYLE>
</HEAD>
<BODY>
<H1 ID=back> Заголовок коричневый </H1>
<P ID=back>Содержимое параграфа</P>
</BODY>
Псевдоклассы
Псевдоклассы описывают стили в зависимости от состояния элемента. На сегодняшний день реализованы псевдоклассы для тега <A>:
А:link {…} – описывает стиль для не просмотренных ссылок;
A:visited {…} – описывает стиль просмотренных ссылок;
A:active {…} – описывает стиль активных ссылок;
A:hover {…} – описывает стиль ссылок при наведении указателя мыши.