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


CSS селекторы

Селекторы CSS

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

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

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 #abzac {
 color: #ff0000;
}
</style>
</head>
<body>
</html>
<p id=”abzac”>Это пробный абзац, на котором мы можем наглядно увидеть, как работают селекторы различных видов.</p>
</body>
</html>

Отличие в данном случае от селекторов тегов в том, что селектор id может быть присвоен к любому тегу и может использоваться в документе только один раз. Для применения к какому либо тегу данного селектора вам достаточно прописать атрибут id в котором вы уже укажите название данного селектора, которое, кстати пишется в произвольной форме, как вам удобнее для его понимания так и пишите. Это очень удобно, если вы скажем, задаете правила исключительно для шапки или подвала, и очень часто применяется при верстке.

Следующий вид селекторов, о котором хотелось бы рассказать это селекторы классов, при верстке сайта они постоянно применяются, давайте посмотрим, что они из себя представляют:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 .abzac {
 color: #ff0000;
}
</style>
</head>
<body>
<p class=”abzac”>Это пробный абзац, на котором мы можем наглядно увидеть, как работают селекторы различных видов.</p>
</body>
</html>

Здесь ситуация отличается в том, что данный селектор вы можете применять много раз в одном документе, в отличии от предыдущего, и он так же может быть применим практически к любому тегу html. Присваивается он к тегу благодаря атрибуту class=”” и название данного селектора так же пишется в произвольной форме как вам удобно.

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

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 p {
 color: #ff0000;
}
b {
 color: #ff0000;
}
</style>
</head>
<body>
<p>Это пробный абзац, на котором мы можем наглядно увидеть, как работают селекторы различных видов.</p>
<b>Это тег жирного выделения текста</b>
</body>
</html>

Давайте разберемся, что мы имеем. Во-первых мы ввели новый тег, а именно <b> это тег для выделения текста, к нему мы прописали правило, что текст в этом теге будет выделятся красным цветом. Теперь с помощью свойства групповых селекторов мы можем значительно сократить запись следующим образом:

<style type="text/css">
 p,b {
 color: #ff0000;
}
</style>

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

Идем дальше и будем понемногу усложнять наш материал, мы рассмотрим селекторы потомков. Давайте перейдем сразу к примеру:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
p {
 color: #ff0000;
}
b {
 color: #19e63b;
}
p b {
 color: #000000;
}
</style>
</head>
<body>
<p>Это пробный абзац, на котором мы можем наглядно увидеть, как <b>работают селекторы различных</b> видов.</p>
<b>Это просто жирный текст с заданным цветом</b>
</body>
</html>

А в браузере мы получим следующее:

Селекторы потомков

Теперь поподробнее, для начала мы задали цвет для тега <p> - красный, для тега <b> зеленый, и третий как раз и есть пример селекторов потомков, это для тега <b> - черный только при условии если он будет встречаться внутри тега <b>, то есть мы cделали запись вида p b, в которой тег <p> родительский, а тег <b> потомок, которые мы перечислили через пробел, без запятых. Это очень интересное и важное свойство селекторов, которое нужно понимать и оно очень часто применяется на практике.

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

Дата: 2014-03-28
Автор: Алексей Мезенцев
Создание Интернет-магазина на OpenCart 2.0

Видеокурс по OpenCart 2.0

Научись создавать Интернет-магазины всего за сутки!

Получить курс