Войти
s-lub » Учебники » CSS » Типы селекторов в CSS

Типы селекторов в CSS

Типы селекторов в CSS

Вот мы и добрались до самого сложного в CSS, это селекторы. Они предназначены что бы в определённом месте документа HTML применялись определённые свойства CSS, их можно объединять, что позволяет множество разных расширений прописать буквально в несколько строк (образно конечно)…

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

Все предыдущие статьи относились именно к нему. Другими словами в качестве селектора использовалось имя HTML элемента или написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.

Пример:
P {font-family: arial, verdana, sans-serif; font-size: 12px} – шрифты во всех параграфах будут arial, а размер шрифта 12.

Но если нужно каждому параграфу применить разные стили, то этот способ уже не подойдет и мы будем использовать селекторы по классу.

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

В структуре CSS документа можно прописать множество классов и обозначить их определёнными именами, например:

p {font-size: 10px; color: black;}
.wun {font-size: 12px; color: green;}
.twu {font-size: 14px; color: red;}

А в HTML документе прописать абзацы следующим образом:
<p> Шрифт в этом параграфе будет 10 размера и чёрного цвета</p>
<p class="wun "> Шрифт в этом параграфе будет 12 размера и зелёного цвета </p>
<p class ="twu " > Шрифт в этом параграфе будет 14 размера и красного цвета </p>
<p> Шрифт в этом параграфе будет 10 размера и чёрного цвета </p>

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

Селектор по id

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

Пример:
css - часть:
#win { color: red; font-weight: bold; text-align: center }
html- часть:
<Н1 id="win">Заголовок будет красного цвета, жирного шрифта и располагаться по центру </Н1>

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

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

Пример:
CSS документ:
p {font-size: 10px; color: black;}
.wun {font-size: 12px;}
.twu { color: red;}

HTML документ:
<p class="wun twu "> Шрифт в этом параграфе будет 12 размера и красного цвета </p>

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