Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов.

Селекторы в CSS используются для определения конкретного
 элемента в html-странице, для которого надо применить
 или изменить стиль CSS.

Виды селекторов в CSS

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

Для придания необходимого CSS-стиля в данном случае в качестве селектора записывается название html элемента. Например, достаточно прописать нужный стиль для заголовка H1, после чего данные заголовки примут требуемый нам вид. Вот таким будет код:

H1 {
font-family: tahoma, sans-serif;
font-size: 11pt;
}

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


Селектор по классам

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

.red {
font-family: tahoma, sans-serif; 
color: red;
font-size: 11pt;
}

Пример использования селектора по классу. Применим данный стиль к заголовку H1 в html странице:

<H1 class ="red">  Заголовок страницы </H1>

Из примера выше видно, что применяется атрибут "class" с заданным названием CSS стиля "red".
Другой пример. В html части пишем:

<H1 class="blue"> Данный заголовок синего цвета, так как к нему применен соответствующий класс </H1>
<H2 class ="small_grey > Текст, заключенный в данные теги, будет с уменьшенными буквами и серого цвета </H2>

Чтобы реализовать выше написанное необходимо внести следующие изменения в CSS:

.blue {color:blue;}
.small_grey {
font-size:12px;
color:grey;
}

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

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

Если необходимо, чтобы класс распространял свое действие только на конкретный элемент (например параграф) следует написать данный элемент перед точкой, как в примере ниже:

P.black {color:black;}

Такая комбинация будет направлять свое действие на элемент P.


Селектор по id

Бывают случаи, когда необходимо задать стиль отдельному элементу на сайте. Делается это путем присваивания данному элементу атрибута "id".

Далее в таблице стилей следует прописать селектор, который выглядит в виде решетки (#). Например, давайте зададим стиль селектором по id для параграфа.

В html документе это будет выглядеть так:

<p id="newstyle"> Зададим стиль для данного параграфа </p>

В документе CSS:

p#newstyle { color: blue; font-size: 12px;}

В результате, для данного параграфа будет применен шрифт синего цвета и размером 12px.


Контекстный селектор

Не менее нужным компонентом является контекстный селектор.
Например, на сайте возникла необходимость заголовки "H1", заключенные тегом bold выделить красным цветом: 

H1 bold { color:red; }

Как видим, в первую очередь пишется заголовок H1, ставится пробел, тег bold а затем в скобочках заданный нами стиль. Выразить словами это можно так: "При наличии внутри заголовка H1 тега bold текст должен быть красного цвета".

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

Следующая страница - Блоковая модель в CSS

Предыдущая - Как оформить ссылку с использованием CSS