Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

Что такое селекторы CSS

Иногда возникает такая ситуация, когда в CSS уже назначены стили, например для параграфов :  задан синий цвет текста, размер шрифта 18 пикселей, а тут вдруг стало нужно один из параграфов сделать красного цвета. И что же делать?

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

Селекторы разделяют на несколько типов. Существуют 4 типа селекторов.

- Селекторы CSS для элементов - это которые мы изучали.
- Селекторы CSS для для классов
- Селекторы id
- Селекторы
CSS для контекста

Теперь по подробнее:

Селекторы для элементов - да это те которые мы разбирали, то есть для тэгов HTML к которым применяли какой либо стиль. Например заголовки и параграфы:

h1
{text-align: center;}
p
{color: blue ;font-size: 18px; text-indent: 30px; }



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

.class_red
{font-size: 14px; color: red}

Ставим точку,пишем название нашего нового класса и в скобках стиль.
Потом применяем его в HTML. Допустим для параграфа:

<p class ="class_red"> ... текст в параграфе ... </p>

В HTML используется атрибут class, его значением стало название стиля.

Для наглядности :

<p>В этом параграфе работает селектор для элемента применённый ранее
</p>
<p class ="class_red">А в этом уже новый селектор для класса,здесь текст красный</p>
<p>Тут опять работает селектор для элемента </p>

Вот так будет в CSS:

p
{font-size 12px; color: blue; }
.class_red
{font-size: 14px; color: red}


Сначала создаём основной стиль для всех параграфов (селектор для элемента), затем если нужно изменить какой либо атрибут создаем новый стиль (селектор для класса) и применяем его к нужному параграфу или другому элементу.
При создании нового стиля указывают только те свойства, которые нужно изменить или добавить относительно основного. К примеру:
В основном стиле установлен размер шрифта: 12 пикселей и синий цвет текста, а нам нужен красный цвет и больше ничего.
Поэтому в новом стиле нужно указывать только свойство цвета, размер шрифта второй раз указывать не надо.

Я думаю Вы меня поняли.

 



Селекторы id - нужны для того чтобы задать стиль для одного уникального элемента, который будет отличаться от всех остальных.
К примеру, все стили заданы для всех элементов : для параграфов, для заголовков, для фона и т.д., НО нам нужно чтобы один единственный параграф отличался цветом и размером шрифта, пускай это будет самый верхний (первый). В CSS это будет так :

p#toptext
{color: yellow; font-size: 32px; }

А в файле HTML укажем:

<p id="toptext"> Текст верхнего параграфа </p>

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



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

p strong
{color: green; }

Пример 2 :

table p em
{color: blue; }

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

Вот вроде по селекторам закончили. Может быть поначалу будет мало что понятно, но со временем всё проясниться. Главное больше тренируйтесь.

Перейти к следующему уроку
Блоки CSS

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!