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

• Селектор - это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,

  или и т.д.

  Свойство - это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.

  Значение - задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.

  Синтаксис селекторов в CSS следующий:

  Селектор { свойство: значение }

  Пример. Вы можете задать границу таблицы следующим образом:

  Table { border: 2px solid #FF8C00; }

  Здесь синтаксис селектора такой: table - это селектор, а border - свойство, а 2px solid #FF8C00 - значение этого свойства.

  Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.>

  Стандартные селекторы

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

  H1 { color: #8B4513; }

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

  Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента:

  * { color: #808080; }

  Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

  Селекторы потомков или вложенные селекторы

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

  .

  Ul em { color: #CD5C5C; }

  Селекторы класса

  Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

  Blue { color: #0000FF; }

  class="blue" . Вы можете сделать селектор класса немного более конкретным. Например:

  H1.blue { color: #0000FF; }

  с атрибутом class="blue" .

  Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

  Этот абзац будет оформлен классами center и bold .

  ID селекторы

  Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

  #blue { color: #0000FF; }

  Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id="blue" . Вы можете сделать id селектор немного более конкретным. Например:

  H1#blue { color: #0000FF; }

  Это правило отображает содержимое в синем цвете только для элементов

  с атрибутом id="blue" .

  Истинная мощность id селекторов - это когда они используются в качестве основы для селекторов-потомков, например:

  #blue h2 { color: #0000FF; }

  В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id="blue" .

  Дочерние селекторы

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

  Body > p { color: #0000FF; }

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

  или

  Соседние селекторы HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример: Strong + em { color: #0000FF; } Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила. Селекторы атрибутов Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text: Input { color: #0000FF; } Преимущество использования селекторов атрибутов заключается в том, что элемент не изменяется, а цвет применяется только к нужным текстовым полям. Для селектора атрибутов применяются следующие правила: p - выбирает все элементы абзаца с атрибутом lang. p - выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru». p - выбирает все элементы абзаца, где атрибут lang содержит слово «ru». p - выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru». Несколько правил стиля Возможно, Вам потребуется определить несколько правил стиля для одного элемента. Вы можете задать эти правила для объединения нескольких свойств и соответствующих значений в один блок, как показано в следующем примере: H1 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; } Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках. Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках. Группировка селекторов в CSS Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как показано в следующем примере: H1, h2, h3 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; } Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним. Вы можете группировать различные id селектора вместе, как показано ниже: #header, #content, #footer { position: absolute; width: 300px; left: 250px; } Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов. Селекторы в 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 Впервые, мы познакомились с селекторами 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-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль. Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов. К простым селекторам относятся: селектор типа универсальный селектор селекторы атрибутов селектор идентификатора селектор класса псевдо-классы CSS селектор Пример Описание CSS .class .myClass Выбирает все элементы с классом myClass (class="myClass"). 1 #id #main Выбирает элемент с идентификатором main (id="main"). 1 * Выбор всех элементов. 2 элемент span Выбор всех элементов . 1 элемент,элемент div,span Выбор всех элементов и всех элементов . 1 [атрибут] Выбирает все элементы с атрибутом title . 2 [атрибут="значение"] Выбирает все элементы с атрибутом title , значение которого в точности совпадает со значением указанным в селекторе (title="cost"). 2 [атрибут~="значение"] Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два"). 2 [атрибут|="значение"] Выбор всех элементов с атрибутом lang , значение которого начинается с "ru". 2 [атрибут^="значение"] a Выбор каждого элемента с атрибутом href , значение которого начинается с "https". 3 [атрибут$="значение"] Выбирает все элементы с атрибутом src , значение которого оканчивается на ".png" (src="some_img.png"). 3 [атрибут*="значение"] Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два"). 3 Составной селектор - это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор. Span.className p.className1.className2#someId:hover Сложный селектор - это последовательность селекторов, которые разделены комбинаторами. Список селекторов - это селекторы, перечисленные через запятую. Комбинаторы Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора. Псевдо-классы Псевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом. Псевдо-класс Пример Описание CSS :link a:link Выбор всех не посещенных ссылок. 1 :visited a:visited Выбор всех посещенных ссылок. 1 :active a:active Выбор активной ссылки. 1 :hover a:hover Выбор ссылки при наведении курсора мышки. 1 :focus input:focus Выбор элемента , который находится в фокусе. 2 :first-child p:first-child Выбор каждого элемента Который является первым дочерним элементом своего родителя. 2 :lang(язык) p:lang(ru) Выбор каждого элемента С атрибутом lang , значение которого начинается с "ru". 2 :first-of-type p:first-of-type Выбор каждого элемента Который является первым из элементов 3 :last-of-type p:last-of-type Выбор каждого элемента Который является последним из элементов Своего родительского элемента. 3 :only-of-type p:only-of-type Выбор каждого элемента Который является единственным элементом Своего родительского элемента. 3 :only-child p:only-child Выбор каждого элемента Который является единственным дочерним элементом своего родительского элемента. 3 :nth-child(n) p:nth-child(2) Выбор каждого элемента Своего родительского элемента. 3 :nth-last-child(n) p:nth-last-child(2) Выбор каждого элемента Который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. 3 :nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента Который является вторым дочерним элементом Своего родительского элемента. 3 :nth-last-of-type(n) p:nth-last-of-type(2) Выбор каждого элемента Который является вторым дочерним элементом Своего родительского элемента, считая от последнего дочернего элемента. 3 3 :not(селектор) :not(p) Выбор всех элементов, кроме элемента . 3 Псевдо-элементы Псевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей. Загрузка... Top