Ссылка на внешний лист стилей

Технология CSS разработки Web-страниц

Введение

Спецификация CSS (Cascading Style Sheets) – каскадные таблицы стилей – признана полностью контролировать форму представления элементов HTML-разметки. При этом, логическая структура документа, по-прежнему, определяется элементами HTML-разметки, в то время как форма представления каждых из этих элементов задается CSS-описателем элемента. Актуальная на сегодняшний день версия листов стилей, CSSlevel2 (или сокращенно CSS2), позволяет полностью отказаться от нежелательных тегов и атрибутов HTML, отвечающих за визуальное представление данных. В классической форме ее применения HTML-документы содержат в себе только структурированный контент, а описание внешнего облика страниц всецело и полностью отделено от HTML-документов и хранится во внешнем по отношению к ним листе стилей. Тогда, модифицировав единственный CSS-файл, мы можем изменить оформление страниц, связанных с ним. Итак, CSS-технология призвана воплотить в жизнь принцип разделения содержания и его представления.

2.1 Синтаксис конструкций CSS и связь листа стилей с Web‑страницей

Конструкции CSS имеют следующий формат:

селектор {

свойство_1: значение_1;

свойство_2: значение_2;

…

свойство_n: значение_n;

}

В ней селектор определяет, к каким HTML-элементам разметки будет применено данное правило, и не только. Приведем, для ясности, несколько примеров:

· * {…} – распространяется на все без исключения элементы;

· h1, h2, p {…} – применяется к заголовкам первого и второго уровней, а также к абзацам;

· p a {…} – относится к гиперссылкам, расположенным внутри абзаца.

Конструкция свойств и их значений предписывает браузеру правила представления элементов контента. Наример следующее правило

p {text-align: right; color:red}

предписывает все абзацы выровнять по правому краю и окрасить их в красный цвет.

Способы применения CSS

По способу применения CSS различают внешние и внутренние листы стилей. При этом различают четыре способа применения стилей:

· ссылка на внешний лист стилей;

· описание листа стилей в заголовке HTML-документа;

· импорт описания стиля в документ;

· переопределение стиля в элементе разметки HTML-документа.

Ссылка на внешний лист стилей

Наиболее предпочтительный вариант – организация внешнего листа стилей в виде отдельного файла, как правило, но не обязательно, с расширением css. В этом случае ссылка на описание стилей, расположенное за пределами документа, осуществляется вставкой в контейнер <head>…</head> элемента link, имеющего следующий формат:

в котором значения атрибутов rel и type задаются соответствующими лексемами, а атрибут href задает URL для внешнего файла описания стилей.

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: