Селекторы в СSS. Идентификационные и контекстные селекторы. Селекторы в сss. Идентификационные и контекстные селекторы Назначение селекторов
 Скачать 423.9 Kb.
|
Селекторы в СSS. Идентификационные и контекстные селекторыНазначение селекторовСтили или лучше сказать каскадные таблицы стилей (Cascading Style Sheets) или попросту CSS определяют представление документа, его внешний вид.Определение стиля состоит из двух частей: селектор, который указывает на элемент, и блок объявления стиля - набор команд, которые устанавливают правила форматирования.В данном случае селектором является div. Этот селектор указывает, что этот стиль будет применяться ко всем элементам div.После селектора в фигурных скобках идет блок объявления стиля.Div { background-color: red; width: 100px; height: 60px; } Cascading Style SheetsМежду открывающей и закрывающей фигурными скобками определяются команды, указывающие, как форматировать элемент.Каждая команда состоит из свойства и значения.Наборы таких стилей часто называют таблицами стилей или CSS (Cascading Style Sheets или каскадные таблицы стилей).div { background-color: red; width: 100px; height: 60px; } Селекторы по тегамРяд селекторов наследуют название форматируемых тегов, например, div, p, h2 и т. д. При определении такого селектора его стиль будет применяться ко всем тегам соответствующих данному селектору.div { width: 50px; /* ширина */ height: 50px; /* высота */ background-color:r ed; /* цвет фона */ margin: 10px; /* отступ от других элементов */ } Селекторы по классамИногда для одних и тех же элементов требуется различная стилизация. И в этом случае мы можем использовать классы. Для определения селектора класса в CSS перед названием класса ставится точка.Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы..redBlock { background-color: red; } Контекстные селекторыПри создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега только когда он располагается внутри контейнера. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого. Контекстные селекторыКонтекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий: Тег1 Тег2 { ... }.В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.<Тег1> <Тег2> ... Соседние (смежные) селекторыЗдесь элементы h2 и оба блока div являются смежными, так как находятся на одном уровне. А элементы параграфов и заголовок h2 не являются смежными, так как параграфы вложены в блоки div. Чтобы стилизовать первый смежный элемент по отношению к определенному элементу, используется знак плюса +.h2+div { color: red; } ЗаголовокТекст первого блока Текст второго блока Стилизация смежных элементов одного уровняЕсли нам надо стилизовать вообще все смежные элементы одного уровня, неважно непосредственно идут они после определенного элемента или нет, то в этом случае вместо знака плюса необходимо использовать знак тильды ""h2div { color: red; } ЗаголовокТекст первого блока Текст второго блока Дочерние селекторыСелекторы дочерних элементов отличаются от селекторов потомков тем, что позволяют выбрать элементы только первого уровня вложенности. Для обращения к дочерним элементам используется знак угловой скобки. В блоке с классом article есть два параграфа. Селектор .article > p выбирает только те параграфы, который находятся непосредственно в блоке article:.article > p { color: red; } Аннотация к статье Текст статьи ПсевдоклассыПсевдоклассы описывают различные состояния элементов. Например, какой цвет будет у активной ссылки или при наведении.Названия псевдоклассов нам не нужно самим придумывать, их надо просто знать.Имя псевдокласса добавляется через двоеточие к селектору, тогда как название обычного класса указывается внутри тега HTML разметки.Псевдоклассы
|