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

<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; просмотров: 1607;

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

Публикации по технике и механике

Публикации по биологии

Публикации по информатике

Публикации по строительству

Публикации по физике

Публикации по химии

Публикации по электронике

Публикации по искусству

Публикации по истории

Публикации по медицине

Публикации по педагогике