Синтаксис CSS. Селекторы

Синтаксис CSS

Включение CSS в HTML. Связывание

Включение CSS в HTML. Импортирование

Информация о стилях может располагаться в отдельном файле. Расположение описания стилей в отдельном файле имеет смысл в случае, если планируется применять эти стили к большему, чем одна, количеству страниц.

Cоздается обычный текстовый файл. Чаще с расширением CSS (mystyles.css). C помощью языка CSS в нем описываются необходимые стили. Этот файл размещается на Web-сервере.

В теге <STYLE> с помощью свойства @import можно импортировать внешнюю таблицу стилей в текущую стилевую таблицу.

<style type="text/css">
@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];

В качестве типа носителя выступают различные устройства:

• all - Все типы. Это значение используется по умолчанию.

• screen - Экран монитора.

• print - Печатающие устройства вроде принтера.

• aural - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

• braille - Устройства, основанные на системе Брайля, предназначенные для слепых людей.

• handheld - Наладонные компьютеры и аналогичные им аппараты.

• projection - Проектор.

• tv - Телевизор.

Т.к. происходит импортирование внешней таблицы стилей в текущую стилевую таблицу, то чтобы не нарушались правила каскада свойство @import следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил.

Связывание также используется для включения таблицы стилей описанных во внешнем файле. Делается это с помощью тега LINK, располагающегося внутри контейнера HEAD ваших страниц:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

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

Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей.

Тег <LINK>

См. стр. 9

селектор { свойство: значение;}

селектор - элементы сообщают браузеру, где применить стиль. Это могут быть имена HTML-тегов, идентификаторы элементов, авторские классы, псевдоклассы, псевдообъекты и др.

свойство – свойство стиля. Свойства шрифта, цвета, текста, таблицы, позиционирование и т.д.

body { color: blue; }

#form3 {color:red; background-color: blue}

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

< STYLE TYPE="text/css">
<!--
A {text-decoration: none; }

p {color: red; }
-->
</STYLE>

Если некоторые экземпляры нужно отобразить по-другому, CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого описывается класс.

Для присвоения класса используется параметр CLASS = "имя класса».

< STYLE TYPE="text/css">
p.blue {color: blue }

.green {color: green;}
</STYLE>

…

<p class=“blue”> Синий абзац</p>

<h1 class=“blue”> А вот заголовок синим не стал</h1>

<h1 class=“green ”> А зеленым, пожалуйста. И абзац тоже может стать зеленым. </h1>

Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.

Параметр ID задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.

< STYLE TYPE="text/css">
#myID {letter-spacing: 1em; }
</STYLE>

…

<P ID=myID> Разрежённые слова в абзаце</P>

Синтаксис CSS. Псевдоклассы

Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта.

Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для тега P псевдокласс:first-letter, в котором устанавливаете различные стили:

p:first-letter { float: right; font-size: 2em; color: red;}

В CSS2 определяются следующие псевдоклассы:

• :link - еще не посещенные ссылки;

• :visited - посещенные ссылки;

• :hover - элемент, над которым в настоящее время находится курсор;

• :first-line - первая формированная строка абзаца;

• :first-letter - первая буква абзаца;

• :first-child -первый дочерний элемент другого элемента;

• :active - активный в данный момент элемент;

• :focus - элемент, имеющий фокус ввода;

• :lang - этот псевдокласс определяет текущий язык;

• :before - определяет содержимое перед элементом;

• :after - определяет содержимое после элемента.

Дата добавления: 2014-01-06