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 Впервые, мы познакомились с селекторами 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 — это указатель на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов: 1. Селекторы по тэгам : h1 2. Селектор по id : #main 3. Селекторы по классам : .hidden 4. Селектор по нескольким классам Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс.hidden и класс.closed . Hidden.closed 5. Контекстные селекторы Разделяются пробелом. Такие селекторы используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент. P strong ul .selected .header .menu a 6. Соседние селекторы Выделяет последующий элемент. Записываются с помощью знака + . Читается как: применить свойства к селектор2 который должен быть сразу после селектор1 . Стили применяются к элементу, подходящему под селектор2 , только если перед ним расположен элемент, подходящий под селектор1 . ... .green + .selected {} В примере.green + .selected применит стили ко второму элементу, т.к. перед ним есть элемент с классом.green . Селектор.green + li тоже применит стили ко второму элементу, а селектор.selected + .green не сработает. 7. Родственные селекторы Выделяет последующие элементы. Похожи на предыдущий, но с тем различием, что выбираются все следующие элементы , а не только первый элемент. item Selected too Not selected ... ul ~ p {} В данном примере будут выбраны все элементы p, идущие за ul. В то время, как при использовании селектора ul + p будет выбран только первый элемент. 8. Дочерние селекторы Записываются с помощью знака > и распространяются только на элементы первого уровня вложенности. На элементы вложенные в другие элементы не распространяются. Ul > li {} В случае контекстных селекторов они влияют на всех потомков (например если задать ul li) что не всегда удобно. Дочерние селекторы позволяют задать стили только для элементов первого уровня вложенности. ul > li означает то же, что и ul li , но выбираются только li первого уровня вложенности, которые напрямую являются вложенными в ul. На li вложенные в другие дочерные li элементы, правила уже не будут действовать. 9. Селекторы атрибутов Чаще всего используются при работе с формами. Селекторы атрибутов записываются с использованием квадратных скобок элемент[атрибут] . Примеры селекторов атрибутов: Input input div a a a a В примере выше ~ позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой, например из: 10. Глобальный селектор Селектор * выберет все элементы. Его также можно использовать для выделения дочерних элементов: * { margin: 0; padding: 0; } .content * { outline: none; } 11. Псевдоклассы Примеры псевдоклассов: A:link a:visited a:active a:hover input:checked .clearfix:after {} div:not(#container) p::first-line p::first-letter Псевдокласс отрицания:not бывает очень полезным. Например, когда необходимо выбрать все div, за исключением того, который имеет id container. Ну для начала, скажу что селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS . Селектор по элементу До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса. P { font-size: 12px } А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу . Селектор по классу Давайте разберем как создать универсальный класс в CSS . А сделать это очень просто: сначала ставим точку, затем сразу, без пробела,пишем имя класса, ну а затем в фигурных скобках стиль. Ну например: .green { font-family: arial, verdana, sans-serif; font-size: 12px; color:green; } Как применить данный стиль? Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html: class ="green "> ... текст параграфа... Как видите используется атрибут class со значением названия стиля. Понятно? вот вам еще примерчик: Это обычный параграф, для него используется селектор по элементу Class ="green "> Этот параграф зеленый, т.к к нему применили класс Class ="big_red " > А этот параграф большего шрифта и красный Этот параграф снова обычный, по классу селектора элемента p { font-family:arial,verdana,sans-serif; font-size:18px; } .green {color:green;} .big_red { font-size:28px; color:red; } Указываем сначала базовый стиль для всех параграфов(селектор по элементу), а потом уже, если хотим в каком-либо параграфе что-то изменить, создаем для него специальный стиль (селектор по классу) и присваиваем его этому параграфу. Когда мы создаем этот самый специальный класс, мы должны писать туда только те свойства, которые хотим добавить, или изменить, по отношению к базовому стилю для этого элемента. Классы из примера выше, можно применить не только к параграфу, но и например к заголовкам, или например к ячейке таблицы, или ко всей таблице, короче они могут применяться везде, где они могут на что-то повлиять (в данном случае везде, где есть параметр цвет, и текст). Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой: P.green {color:green;} Теперь класс green не будет действовать ни на что другое, кроме элемента P. Наверх Селектор по id Данный селектор применяется если необходимо выделить один единственный элемент, уникальный,отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом: html- часть: <Н1 id ="firstheader "> Первый заголовок на странице css - часть: H1 #firstheader { color: red; font-weight: bold; text-align: center } Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #. В принципе, то же самое можно сделать и с использованием селектора по классу, это уже кому как больше нравится:) Наверх Контекстный селектор Это очень полезная вещь. Допустим у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом(strong) слова. И вот, нам резко понадобилось сделать так, чтобы слова, в параграфе, которые выделены жирным стали зеленого цвета. Так вот. Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов. Селекторы в 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 текст должен быть красного цвета". Этим способом можно задать также стили для пунктов маркированных списков, таблиц и даже их ячеек, причем с разным уровнем вложенности. Следующая страница - Похожие статьи Наташа Королева Инстаграм: умиротворенная певица наслаждается редкими минутами отдыха Инстаграм глазами звезд наташа королева Установка AirSlax на виртуальную машину Программы для загрузки файлов × Close Гаджеты Железо ПК Интернет Программы