Универсальные селекторы

<8 9 10 11 12 1314>

Универсальные селекторы выбирают каждый элемент на странице для применения к ним стилей оформления. В HTML - документе возможна очень краткая запись, в которой имени класса предшествует точка (.), и оно может быть объединено с простым селектором:

*.warning {font-weight: bold;}

Например, следующее правило определяет, что для каждого элемента на странице должна быть добавлена сплошная черная граница толщиной 1 пиксель:

* {

border: 1px solid #000000;

}

Комментарии в CSS

Комментарии помещаются между символами /* и */. Комментарии можно добавлять либо между правилами, либо внутри блока свойств - например, в следующем коде CSS второе и третье свойства помещены между ограничителями комментария, так что они будут игнорироваться браузером.

Комментарии могут охватывать несколько строк, и браузер будет игнорировать эти строки:

/* Это комментарий CSS */

/* Это комментарий CSS, и он может занимать несколько строк */

Объединение CSS и HTML. Тег <LINK>

Рассмотрим применение тега <LINK>. На Рис. 3 показана общая структура ссылки на внешнюю таблицу стилей.

Рисунок 3. Общая структура ссылки на внешнюю таблицу стилей

Чтобы внешняя таблица стилей была успешно загружена, тег <LINK> должен быть размещен внутри элемента <HEAD>. Атрибут Rel отвечает за установку взаимосвязи и имеет значение stylesheet. Атрибут Typeописывает тип данных, которые будут загружаться с помощью тега <LINK>.

Далее расположен атрибут Href, значением этого атрибута является URL (Uniform Resource Locator) таблицы стилей. URL может быть абсолютным (http://www.stylesheet.com/filename.css) или относительным (filename.css).

С документом может быть ассоциирована не одна связанная таблица стилей:

<LINK Rel ="stylesheet" Type="text/css" Href="sheet1.css" />

<LINK Rel ="stylesheet” Type="text/css" Href="sheet2.css" />

Альтернативная таблица стилей

Одной из наиболее весомых причин в пользу использования связанных через тег <LINK> таблиц стилей является возможность использования альтернативных стилей для клиентов. Такие браузеры, как Firefox и Opera поддерживают атрибут Rel="alternate stylesheet" и, когда есть возможность, позволяют пользователям переключаться между таблицами стилей.

Элемент <STYLE>

Элемент <STYLE> – это единственный способ включение таблиц стилей, которые располагаются в самом документе:

<STYLE Type="text/css">

Далее следуют один или несколько стилей, и все завершается закрывающим тегом </STYLE>.

Директива @import

Данная директива находится внутри тега <STYLE>. На Рис.4 показана общая структура команды @import.

Рисунок 4. Общий синтаксис импортирования внешней таблицы стилей

Единственное основное отличие заключается в синтаксисе и размещении команды. Директива @import должна располагаться в контейнере <STYLE> и перед всеми остальными правилами CSS:

<STYLE Type="text/css">

@import url(sheet2.css);

@import url(http://www.stylesheet.com/sheet.css);

H1 {color: green;}

</STYLE>

С точки зрения стандартов нет разницы между ссылкой на внешние таблицы стилей или их импортом.

<8 9 10 11 12 1314>

Дата добавления: 2016-09-26; просмотров: 1580;