Селекторы в CSS. Приоритет селекторов

HTML — основа всех веб-сайтов, служит для размещения основного контента на сайте. Если запустить HTML код в браузере, то можно увидеть текст, картинки и ссылки, которые не особо радуют глаз. Чтобы сделать красивые элементы и создать хороший дизайн веб-страницы нужно воспользоваться CSS

CSS — язык стилизации веб-элементов. Он берет отдельную часть контента или всю страницу целиком, изменяя её визуальную составляющую. Чтобы свойства CSS применялись, им нужно на что-то ссылаться. Для этого используются селекторы, которых существует огромное множество.

Селекторы. CSS

Селекторов существует огромное количество, от общих(ссылающихся на все элементы веб-страницы) до тегов, классов и идентификаторов.

Общие селекторы

"*" — основной селектор в CSS. Он ссылается на каждый элемент веб-страницы находящийся в теге {body}. Чаще всего используется для обнуления отступов на странице:

*{

margin: 0;

padding: 0;

}

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

Данный селектор ссылается на каждый указанный тег. Например, если задать изменение шрифта для тегов p, то каждый параграф будет иметь этот стиль. Классы и идентификаторы используются чаще, но теги тоже имеют широкое применение. Например, когда нужно задать общие стили для тега body — шрифт, фон, отступы и т.д.

body{

font-family: "Tahoma", serif;

width: 80%;

background-color: rgba(235, 52, 52, 0.52);

margin: 0 auto;

color: rgba(255, 255, 255, 0.71);

}

Селекторы id. CSS

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

Через id можно обращаться и к другим элементам, используя его как родительский селектор. Об этом позже.

Чтобы использовать селектор идентификатора, задайте его в html, с помощью атрибута id. Введите его в css документе с решеткой вначале, без пробелов.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Тестовая страница</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1 id="head">Hello World!</h1>

<p class="text">Любой тестовый текст</p>

</body>

</html>

В CSS выглядит как:

*{

margin: 0;

padding: 0;

}

body{

font-family: "Tahoma", serif;

width: 80%;

background-color: rgba(235, 52, 52, 0.52);

margin: 0 auto;

color: rgba(255, 255, 255, 0.71);

}

#head{

font-size: 1.8rem;

text-align: center;

margin: 5px 0;

padding: 15px 0;

}

Селекторы Классов. CSS

Классы используются чаще всех остальных селекторов. Они имеют более широкий функционал чем id, так как могут задаваться до нескольких элементов.

С помощью этого селектора можно выделить несколько элементов для определенного стиля. Например, чтобы отличить кнопочные ссылки от обычных.

Для начала задайте имя класса для элемента, через атрибут class. После этого можно обратиться к нему через css. Введите его название, с точкой вначале.

HTML файл остаётся прежним в основе, но к нему добавляется новый атрибут из CSS: Селекторы классов CSS

В CSS это выглядит как:

.text{

font-size: 1.1rem;

margin: 5px 0;

text-align: center;

padding: 10px 0;

}

Родительские и селекторы. CSS

Эти указатели немного отличаются от предыдущих и имеют свои уникальные функции.

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

Чтобы обратиться к прямым потомкам элемента используйте запись X Y. Например, чтобы стилизовать все ссылки внутри параграфов, используем селектор "a"

a{

color: rgba(255, 255, 255, 0.65);

font-weight: bold;

}

Второй способ обращения к потомкам более конкретный. Например, если в теге <div> содержится многоуровневый список, а нужно обратиться только к элементам первого уровня. Для этого используйте запись <div> > <ul>.

Стили применяются только к тем тегам <ul>, которые находятся внутри самого элемента <div>. К элементам, которые находятся внутри <li>, стили применяться не будут.

Соседние селекторы применяются к тем элементам, которые находятся рядом с указателем. Допустим у вас на странице такой текст:

Тег span находится по соседству с тегом <b>. Поэтому, чтобы обратиться к нему, используем запись <b> + <span>.

Селекторы атрибутов. CSS

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

Чтобы сослаться на ссылку с атрибутом "target", в документ нужно вписать селектор a[target]

В HTML это выглядит как:

<p><a target="_blank" href="#">Ссылка на другую страницу.</a></p>

В CSS это выглядит как:

a[target]{

color: darkblue;

text-decoration: none;

}

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

a[target="blank"]

Приоритеты

По приоритету селектору располагаются следующим образом.

  1. #id:not — id c псевдо-классом отрицания. Специфичность — 101.
  2. #id — простой идентификатор. Специфичность — 100.
  3. p.green.bold — тег с двумя классами. Специфичность — 21.
  4. body section div.header — третий потомок тега с классом. Специфичность -13.
  5. body section div — третий потомок тега. Специфичность — 11.
  6. div p — второй потомок. Специфичность — 2.
  7. p — обращение к тегу элемента. Специфичность — 1.
  8. * — обращение ко всем элементам. Специфичность — 0.

Чем выше специфичность, тем выше приоритет.

Свойства селекторов. CSS

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

Заключение

Знание работы селекторов и их приоритетов позволит избежать множества ошибок при разработке веб-сайтов. Чтобы закрепить знания на практике, создайте страницу с заголовками, параграфами и списками. Измените их шрифт, цвет и отступы. Для отступов используйте общие селекторы, а для цвета и шрифтов используйте обращения к тегам элементов.

Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *