Привет всем! Сегодня мы продолжим знакомство с потрясающей технологией CSS, в рамках чего и познакомимся с понятием «Селектор» (на всякий случай напоминаю — немного информации о CSS было представлено в этой записи).
Что есть селектор в CSS? На самом деле CSS-стиль имеет две основные части — селектор и блок объявления, который в свою очередь обрабатывает параметры, отвечающие за свойства форматирования — текст, цвета, размер и прочее. Пример можно увидеть чуть ниже:
h1 {
font-family: Arial, sans-serif;
color: #000000;
}
Фактически, выделенная жирным часть кода и есть селектор — используя его мы говорим веб-документу о том, что все, относящееся к h1 должно иметь такой-то шрифт, такого-то цвета. Нужно обозначить внешний вид текста h2? Опишите его следующим образом:
h2 {
font-family: Arial, sans-serif;
color: #000000;
}
и аналогично по совершенно любым параметрам документа. НО! Что делать, если, например, нужно использовать несколько стилей оформления текста h2? Для этого нам понадобится селектор классов. На примере это выглядит следующим образом: предположим, у нас имеется два текста шрифтом h2. Однако, один нужно сделать жирным, а второй — нет. Для этого подключим классы. Класс .bold описывает свойства текста, который нам нужно сделать жирным, а класс .classic будет описывать параметры текста, который нам делать жирным не нужно.
Напомню, что и тот и другой текст должны быть написаны h2. Воспользуемся этими заготовками:
Этот код отвечает за оформление жирного текста:
h2.bold {
font-family: Arial, sans-serif;
color: #000000;
font-weight: bolder
}
А вот этот код отвечает за оформление текста без жирного выделения.
h2.classic {
font-family: Arial, sans-serif;
color: #000000;
}
Как видно из примера — разница лишь в селекторах классов и параметре, отвечающем за толщину шрифта. Количество классов — не ограничено, и вы можете использовать их в любом количестве. Главное — на запутаться, и знать меру в оформлении 🙂
Что касается использования созданных селекторов в веб-документе — для их подключения используется конструкция в стиле:
<h2 class=»ваш-класс-оформления»>Сам текст</h>
Сразу уточню — параметры и тонкости использования указанных выше font-family — в следующей записи.
На этом видео представлены примеры работы описанных выше кодов. Как видите — все просто! И да — пример CSS-кода с простым шрифтом, жирным шрифтом и наклонным — ниже, или доступен по ссылке: http://codepen.io/Lavrynenko/pen/JEppqK
See the Pen JEppqK by Lavrynenko (@Lavrynenko) on CodePen.
А сейчас — спасибо за внимание! Делайте репост на свои страницы, не стесняйтесь задавать вопросы и следите за обновлениями!
Support the Blog!
Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️
Одна мысль про “CSS — селекторы”
Комментарии закрыты.