Селектор по типу элемента

Более частными селекторами являются селекторы по типу элемента (type selector). Объявления данного селектора управляют оформлением всех элементов данного типа (элементов, отмеченных данным тэгом). Например, такое правило делает цвет текста во всех абзацах красным:

p {

color: #f00;

}

Селектор по id

Этот вид селекторов используется, когда нужно особым образом оформить один элемент. Особое оформление часто применяется к логотипам, меню или другим уникальным элементам страницы. Например, если требуется поместить одно изображение в рамку зеленого цвета, необходимо пометить соответствующий элемент атрибутом id:

<img src=”…” id=”logo” />

В код CSS добавляется новое правило, селектор которого состоит из решетки # и значения атрибута id:

#logo {

border: solid 1px #0f0;

}

Запомните, атрибут id предназначен для выделения только одного элемента. В до­ку­менте не может быть несколько элементов с одинаковым значением атрибута id.

Селектор по class

Этот вид селекторов применяется, когда необходимо одинаково оформить несколько элементов в документе. Например, необходимо выделить несколько абзацев, изменив в них цвет фона на синий. Для этого нужно пометить каждый такой абзац атрибутом class:

<p class=”marked”>…</p>

<p class=”marked”>…</p>

<p class=”marked”>…</p>

После этого в код CSS добавляется селектор, состоящий из точки и значения атрибута class (в данном случае — marked):

.marked {

background: #00f;

}

К одному элементу можно применять оформление нескольких классов. В этом случае имена классов в значении атрибута class перечисляются через пробел:

<address class=”one two three”>…</address>

Порядок следования имен в списке не имеет значения.

Подключение таблицы стилей к веб-документу

Чтобы использовать таблицу стилей, ее необходимо подключить к веб-документу. Для этого существует несколько способов, но наилучшим является использование пустого элемента link:

<link rel=”stylesheet” type=”text/css” href=”index.css” media=”all” />

Разберемся с основными атрибутами элемента link:

• rel — отношение связанного ресурса к данному документу, т.е. чем является объект, адрес которого указа в атрибуте href, для данного документа. Значение stylesheet показывает, что подключаемый файл является таблицей стилей;

• type — тип содержания подключаемого файла. Для файлов CSS это text\css;

• href — адрес (URI);

• media — тип устройства просмотра. Значение all означает, что данная таблица применяется на всех устройствах.

Элемент style

Этот элемент позволяет внедрить таблицу стилей непосредственно в веб-документ. Он должен быть дочерним по отношению к элементу head. Содержанием элемента style является таблица стилей (обычный код CSS):

<style type=”text\css” media=”all”>

p {

color: #ff0265;

}

</style>

Другой вариант подключения таблиц стилей — использование директивы @import. Эта директива относится к синтаксису CSS и подобно директиве #include в C подставляет вместо себя указанный файл. Она может использоваться в двух вариантах:

@import ‘style.css’;

@import url(style.css);

Для внедрения в веб-документ применяется подобный код:

<style …>@import ‘style.css’;</style>

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