, каждому из которых нужно задать определенный цвет. Как это сделать? Стандартные CSS selectors по тегам не подойдут, они указывают параметры для всех блоков сразу. Выход прост. Назначьте элементам класс. Например, первый div получил class=’red’, второй - class=’blue’, третий - class=’green’. Теперь их можно выбрать, используя таблицы CSS.

Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию.red. Вторым - .blue и так далее.

Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант - использовать какую-нибудь методологию, вроде БЭМ.

Достоинства - довольно высокая гибкость.

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

Селектор по ID

Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки (« # »), затем имя блока. Например, #red.

ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный а затем назначите ему же id blue и укажете синий цвет, блок станет синим.

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

Недостатки - легко запутаться в большом количестве ID и class.

Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.

Универсальный селектор

Синтаксис: знак зведочки («*») и фигурные скобки, т. е. * {}.

Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *{}.

Достоинства - можно управлять большим количеством элементов одновременно.

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

По атрибутам

Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них - text, второй - password, третий - number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:

input{}

Этот селектор атрибутов выберет все input с типом text.

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

Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:

input{} или input

Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:

CSS выберет все элементы, в тайтле которых имеются символы «каспийск», т. е. и «каспийский», и «каспийская».

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

или заканчиваются ими:

{}.

Достоинства - максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.

Недостатки - используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?

Селекторы псевдоклассов

Псевдокласс обозначает состояние элемента. Например, :hover - то, что происходит с частью страницы при наведении курсора, :visited - посещенная ссылка. Сюда же входят элементы вроде:first-child и:last-child.

Этот тип селекторов активно применяется в современной верстке, поскольку благодаря ему можно сделать страницу «живой» без применения JavaScript. Например, вы хотите сделать так, чтобы при наведении на кнопку с классом btn ее цвет менялся. Для этого используем следующую конструкцию:

Btn:hover {

Background-color: red;

Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s - в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.

Достоинства - активно используются для «оживления» страниц. Просты в применении.

Недостатки - их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.

Селекторы псевдоэлементов

«Псевдоэлементы» - это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент::first-letter. Он дает возможность управлять внешним видом первой буквы.

Существует довольно большое количество псевдоэлементов. Перечислить их в рамках одной статьи вряд ли получится. Вы можете найти соответствующую информацию в любимом поисковике.

Достоинства - дают возможность гибко настраивать внешний вид страницы.

Недостатки - новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.

Подведем итог

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

Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов.

Селекторы в CSS используются для определения конкретного
элемента в html-странице, для которого надо применить
или изменить стиль CSS.

Виды селекторов в CSS

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

Для придания необходимого CSS-стиля в данном случае в качестве селектора записывается название html элемента. Например, достаточно прописать нужный стиль для заголовка H1, после чего данные заголовки примут требуемый нам вид. Вот таким будет код:

H1 {
font-size: 11pt;
}

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

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

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

.red {
font-family: tahoma, sans-serif;
color: red;
font-size: 11pt;
}

Пример использования селектора по классу. Применим данный стиль к заголовку H1 в html странице:

Заголовок страницы

Из примера выше видно, что применяется атрибут "class" с заданным названием CSS стиля "red ".
Другой пример. В html части пишем:

Данный заголовок синего цвета, так как к нему применен соответствующий класс

id ".

В html документе это будет выглядеть так:

Зададим стиль для данного параграфа

В документе CSS:

p#newstyle { color: blue; font-size: 12px;}

В результате, для данного параграфа будет применен шрифт синего цвета и размером 12px.

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

Не менее нужным компонентом является контекстный селектор .
Например, на сайте возникла необходимость заголовки "H1", заключенные тегом bold выделить красным цветом:

H1 bold { color:red ; }

Как видим, в первую очередь пишется заголовок H1, ставится пробел, тег bold а затем в скобочках заданный нами стиль. Выразить словами это можно так: "При наличии внутри заголовка H1 тега bold текст должен быть красного цвета".

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

Следующая страница -

". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.

Термины, используемые в описании правил CSS.

Рис.1. Обычное правило CSS. Рис.2. Пример правила CSS.

Коротко про синтаксис записи правил CSS:

• Объявление стиля в парвиле берётся в фигурные скобки - {}
• Свойство и значение в объявлении разделяются двоеточием - :
• В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
• В конце каждой пары свойство: значение ставится точка с запятой - ;
• После последней пары свойство: значение точку с запятой ставить не обязательно.
• Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
• Синтаксис CSS не чувствителен к регистру символов.

В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.

Селекторы тегов

Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.

Привет!

Заголовок h2!

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

,

и

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

Привет h1!

Заголовок h2!

Такая запись стиля равносильна следующей группе правил:

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

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

Внутри таблицы

красный цвет текста. Для решения такой задачи в селекторе элементы располагаются в порядке вложенности и разделяются пробелами. То есть наша задача решается так:

Привет! Текст абзаца в таблице.

Текст абзаца вне таблицы.

Все теги

Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег

Находящийся внутри тега

тоже отображает текст красным цветом.

На самом деле, вместо

можно было указать тег

, так как тег всегда должен содержать тег . Для дальнейшего изучения селекторов CSS нужно освоить несколько несложных терминов относящихся к структуре документа. Дерево документа (англ. document tree) - это схема построения HTML документа, показывающая порядок следования тегов и их вложенность друг в друга. Приведём пример такой схемы: Дерево документа наглядно показывает связи в HTML документе, порядок следования тегов и их вложенность. Его используют разработчики для написания CSS стилей и JavaScript сценариев. Вот пример кода, соответствующего схеме дерева элементов с рисунка 1. Привет! Текст абзаца и жирный. Пункт 1.1 Пункт 1.2 Пункт 1.3 Пункт 2.1 Пункт 2.2 Пункт 2.3 Итак, между тегами HTML документа существуют связи. Они выражаются в вложенности тегов или порядке следования одного тега за другим. Эти связи называют родственные связи, а для обозначения различных типов родственных связей используют термины, такие как предок и потомок, родительский и дочерний элемент и другией "семейные" термины. Теперь рассмотрим все типы связей. Предки и потомки Предки (ancestor) - элементы, которые содержат другие элементы, то есть элемент является предком для всех вложенных в него элементов. Потомки (descendant) - элементы, вложенные в другой элемент. Селекторы потомков уже были рассмотрены выше. Родители и дочерние элементы Родитель (parent) - это предок первого уровня (непосредственный предок) для элемента. Дочерний элемент (child - ребёнок) - это потомок первого уровня. Родительский элемент может иметь неограниченное число детей. В нашем дереве элементов у тега следующие дочерние элементы: , , и ещё один Братские или сестринские элементы Братские или сестринские элементы, (англ. siblings - братья и сестры), группа элементов имеющая общего родителя. Например, теги , , и второй Сестринские, так как у них общий родитель . Смежные элементы Смежные элементы - это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары: и , И , и Теперь вернёмся к селекторам. Дочерние селекторы Когда нас интересуют не все потомки, а только потомки первого уровня, то есть дочерние элементы, в CSS используют дочерние селекторы. Для указания того, что правило стиля задано только к дочернему элементу, в селекторе используется символ ">". Привет! Текст абзаца в таблице. Текст абзаца в таблице (в контейнере div). Текст абзаца вне таблицы. HTML-код этого примера полностью совпадает с кодом примера для селектора потомков, отличается только правило стиля. В результате применения дочернего селектора текст абзаца в таблице в контейнере уже не красного цвета, так как для этого абзаца тег родитель, а тег предок. Смежный (соседний) селектор Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента. Давайте рассмотрим реальный пример. В больших статьях, содержащих несколько разделов озаглавленных тегами , желательно увеличить верхний отступ (свойство margin-top ). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег идёт сразу после , а это может быть в начале статьи, вержний отступ над тегом будет лишним. Решить такую задачу можно при помощи селектора смежного элемента. Вот html-код с примером работы селектора смежного элемента. Привет! Заголовок h2 Заголовок h2 Текст абзаца в про невероятные приключения. Другое название смежных селекторов: соседние селекторы , тут можно прочитать подробнее про этот тип селекторов. Родственный селекторы Селектор родственного элемента похож на соседний селектор, только он распространяется на все указанные элементы, следующие за выбранным. Синтаксис родственного селектора: селектор предыдущего элемента, знак "~" (тильда) и за ним селектор выбираемых элементов. Пример исользования сестринского селектора. Привет! Текст абзаца №1 в про невероятные приключения. Текст абзаца №2 в про невероятные приключения. Текст div №1 в про невероятные приключения. Текст абзаца №3 в про невероятные приключения. Из примера видно, что после тега текст абзаца №3 также был красным цветом. То есть, для присвоения стиля сестринские элементы не должны идти друг за другом. Универсальный селектор Если в селекторе правила CSS указан символ "*", то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет "обнулить" все внешние и внутренние отступы. Тогда нужно использовать такой стиль: * { margin: 0; padding: 0; } Но символ "*" можно использовать в составных селекторах. Ul * {color: red} Этот код назначает красный цвет тексту всех потомков элемента . Классы Классы в CSS - самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса: Тег.Имя класса В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_). Пример, когда применяют классы: на сайте верхнее, боковое и нижнее меню создаётся при помощи тегов , этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top , ul.menu и ul.menu-bottom . В теле html-документа различные меню создаются с указанием класса в атрибуте class : class ="menu-top "> ... class ="menu "> ... class ="menu-bottom "> ... Классы - часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым. Можно создать класс, который будет применён к любому тегу. Для этого используется универсальный селектор. *.Имя класса { свойство1 : значение ; свойство2 : значение ; ... } Эту запись можно сократить, убрав символ "*". Имя класса { свойство1 : значение ; свойство2 : значение ; ... } ID селекторы (идентификаторы) Идентификаторы - это типы селекторов, задающие уникальное имя элемента. Уникальное - значит встречающееся один раз в коде документа. При помощи идентификаторов можно создать стиль, но их основное предназначение - обращение к ним при помощи скриптов. При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора. #Имя идентификатора { свойство1 : значение ; свойство2 : значение ; ... } Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_). Селекторы атрибутов В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег зависимости от значения атрибута type может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input , то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов. Селекторы атрибутов бывают разные. При помощи селекторов атрибутов можно установить стиль тегу, если у него есть определённый атрибут или если определённый атрибут тега имеет определённое значение. Селекторы атрибутов - тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть. Псевдоклассы Ещё одна большая тема в CSS - псевдоклассы. Приставка "псевдо" обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора. При помощи псевдоклассов создаются динамические эффекты на странице. Синтаксис псевдокласса: Селектор:псевдокласс { свойство1 : значение ; свойство2 : значение ; ... } Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover {color : green }). Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS - это зарезервированные слова. Псевдокласс :active выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover - курсор мыши просто наведён на элемент, например на ссылку. Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно. Псевдоэлементы При помощи псевдоэлементов можно добавлять в контент страницы дополнительное содержимое, которого нет в исходном коде. Также можно изменять часть элемента, например первую букву в абзаце. То есть создаваль мнимый элемент html - первую букву со своим стилем отображения. Псевдоэлементы CSS также обширная тема, для полного раскрытия которой требуется отдельная статья. Синтаксис псевдоэлементов такой же, как и у псевдоклассов: Селектор:псевдоэлемент { свойство1 : значение ; свойство2 : значение ; ... } Селекторы Селекторы в языке CSS Впервые, мы познакомились с селекторами CSS в девятом уроке учебника по CSS. В этой статье мы изучим селекторы более подробно, а так же рассмотрим другие виды селекторов CSS. Селектор (от англ. selector) — сортировка, выборка. Под селекторами, в языке CSS понимается способ выборки элементов (тегов) страницы. Как мы знаем из , схема CSS-кода выглядит следующим образом: Селектор { CSS-свойство: значение; CSS-свойство: значение; ... и т.д. } Виды CSS-селекторов Всего существует три основных вида селекторов и их различные взаимоотношения. Помимо этого существует универсальный селектор, селекторы атрибутов, селекторы атрибутов и значений и их выборка с помощью регулярных выражений. Обычно, при создании сайта, используют лишь основные селекторы. Основные виды селекторов CSS 1. Селектор тега — выбор элемента страницы по имени его тега имяТега { } 2. Селектор class — выбор элемента страницы по имени его класса.имяКласса { } 3. Селекторы id — выбор элемента страницы по имени его уникального идентификатора #имяУникальногоИдентификатора { } Взаимоотношения между селекторами CSS Взаимоотношения между селекторами, это когда между ними в CSS-коде ставят какой-либо знак: пробел, запятую, угловую скобку и т.д. Таким образом, можно выбрать какой-либо элемент на странице более точечно. 1. Контекстные селекторы — выбор элементов потомков селектор селектор { } (между селекторами ставят пробел). 2. Дочерние селекторы — выбор дочерних элементов селектор > селектор { } (между селекторами ставят знак больше). 3. Соседние селекторы — выбор соседних (братских, сестринских) элементов селектор + селектор { } (между селекторами ставят знак плюс). Если что не понятно, не переживайте, каждый селектор и их взаимоотношения мы рассмотрим отдельно, в статьях посвященных только им, вот только допишу эти статьи 🙂 Селекторы атрибутов и значений Селекторы атрибутов и значений — выбирают элементы по их атрибуту или атрибуту и значению. 1. Селектор атрибута — выбор элемента по имени атрибута [атрибут] { } 2. Селектор атрибута и значения — выбор элемента по имени его атрибута и значения [атрибут = "значение"] { } Универсальный селектор В CSS-коде, универсальный селектор записывают как символ звёздочка * Универсальный селектор необходим для того, чтобы задать CSS-свойства сразу всем элементам страницы. Обычно его используют для того чтобы обнулить отступы у элементов, пример: * { margin:0; padding:0; } Отступы у всех элементов страницы равны 0. Группирование селекторов Группирование селекторов — выбор нескольких селекторов и назначение им определённых CSS-свойств, схема: Селектор, селектор { } Между селекторами ставят запятую. Похожие публикации: Секретные коды для андроид 6 Как изменить приложение по умолчанию на Android Не слышит собеседник на iPhone Почему в айфоне 7 меня плохо слышат Обзор HTC One dual sim. Дважды флагман. Обзор HTC One dual sim Htc one dual sim фронтальная камера  Категории