- чем в css отличается .sidebar от #sidebar (div ная конструкция)
- Селекторы типа, класса и ID
- Селекторы типа
- Универсальный селектор
- Использование универсального селектора для облегчения чтения ваших селекторов
- Селекторы класса
- Нацеливание классов на отдельные элементы
- Нацеливание на элемент, к которому применено более одного класса
- Селекторы ID
- В следующей статье
- В этом модуле
- Found a content problem with this page?
- CSS — Урок 3. Правила и селекторы CSS
- Селекторы CSS
- Это заголовок первого уровня
- Это заголовок второго уровня
чем в css отличается .sidebar от #sidebar (div ная конструкция)
Идентификаторы:
Имя идентификатора в CSS — файле начинается со знака #, примеры имени идентификаторов: #header, #div.header, #a.menulink:hover и т. д.
Идентификатор может встречаться только один раз на странице
Идентификатор — это не только стиль, но еще метка однозначно определяющая объект, на которую можно ссылаться
Для объектов идентификаторы указываются через специальный атрибут ID.Пример DIV .
Классы для тэгов (p, img,h1, body и т. д. )
Имя таких классов является именем тэга, используемым в HTML, точка перед именем в этом случае не ставится.
Могут использоваться много раз на странице, столько раз, сколько встречается сам тэг на странице, изменить оформление такого стиля можно, присвоив ему какой — либо другой стиль через дополнительный атрибут CLASS или ID.
Классы CSS
Классы CSS, также, как и классы для тэгов могут использоваться не ограниченное число раз на странице.
Наименование классов Вы придумываете сами, когда создаете их в CSS файле. Имя стиля класса начинается с точки. Пример .IMG1
селекторы, начинающиеся с точки, определяют элементы с соответствующим классом в html, начинающиеся с решетки — с id
. (точка) в css определяют класс для элементов html.
# (решетка) — идентификатор.
Идентификатор, как правило применяются к уникальным элементам html (например для #header (заголовок) #fuuter (подвал) . Селекторы по классу могут быть применены много раз для любых элементов html. Например, класс .red может быть применен для обозначения цвета параграфа (p ) или заголовка (h4 )
Селекторы типа, класса и ID
В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.
Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
---|---|
Задача: | Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу. |
Селекторы типа
Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.
Попробуйте добавить CSS-правило, чтобы выбрать элемент и изменить его цвет на синий.
Универсальный селектор
Универсальный селектор обозначается звёздочкой ( * ). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.
Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.
Использование универсального селектора для облегчения чтения ваших селекторов
Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента , которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого , и сделать их шрифт жирным, мы могли бы использовать псевдокласс :first-child , который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента :
article :first-child font-weight: bold; >
Однако этот селектор можно спутать с article:first-child , который выберет любой элемент , являющийся первым дочерним элементом другого элемента .
Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента или первым дочерним элементом любого потомка элемента :
article *:first-child font-weight: bold; >
Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.
Селекторы класса
Селектор класса начинается с символа точки ( . ). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight , и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.
Нацеливание классов на отдельные элементы
Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим с классом highlight иначе, чем заголовок с классом highlight . Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.
Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.
Нацеливание на элемент, к которому применено более одного класса
Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.
В примере ниже у нас есть , содержащий примечание. Серая граница применяется когда блок имеет класс notebox . Если у блока есть также класс warning или danger , мы меняем border-color (en-US).
Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему не применён ни один стиль, так как он имеет только класс danger ; ему нужен ещё и класс notebox , чтобы получить какую-нибудь стилизацию.
Селекторы ID
Селектор ID начинается с # , а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id . Можно выбрать элемент, которому присвоен id , а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:
**Предупреждение:**Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.
Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.
В следующей статье
Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.
В этом модуле
- Каскад и наследование
- Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
- Модель коробки (The box model)
- Фон и границы
- Обработка разных направлений текста
- Переполнение содержимого
- Значения и единицы измерения
- Изменение размеров в CSS
- Элементы изображений, форм и медиа-элементы
- Стилизация таблиц
- Отладка CSS
- Организация вашей CSS
Found a content problem with this page?
This page was last modified on 7 нояб. 2022 г. by MDN contributors.
Your blueprint for a better internet.
CSS — Урок 3. Правила и селекторы CSS
CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:
Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:
Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег , значит идем на страницу style.css и пишем следующий код:
Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:
Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):
Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.
Думаю, принцип уже понятен: мы указываем селектор, т.е. элемент, к которому применяется стиль, а в фигурных скобках — его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки, пока же мы рассматриваем общий принцип составления таблицы стилей.
Селекторы CSS
Селекторы по идентификатору
В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них — розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.
В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:
Текст параграфа с идентификатором (id).
Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:
Это заголовок первого уровня
Это заголовок второго уровня
Абзац с идентификатором (id)