Как мы уже знаем CSS это код, который преобразует обычную разметку в красивый вид.

Наши настройки блоков/элементов в ZERO и в стандартных блоках - тоже преобразуются по итогу в CSS. CSS код нельзя писать просто так в блоке T123, нужно использовать специальный тег и думаю вы с ним уже знакомы.

Это тег <style>

Совет:
Напишите тег <style> в T123 и сразу нажмите Enter, закрывающий тег появится автоматически. А у ваш курсор сразу будет в месте откуда вы сможете начать писать CSS код.

Давайте расскажу, что можно делать с помощью CSS:

• Менять цвет элемента
• Добавлять картинку/иконку в элемент
• Менять позиции картинки/иконки
• Двигать элемент в любую сторону
• Скейлить элемент в любую сторону
• Изменять ширину/высоту элемента
• Добавлять любые стейты: ховер/актив/маркер/фокус/ и др.
• Добавлять псевдоэлементы, они добавляют к основному элементу дополнительные
• Добавлять отступы внешние/внутренние
• Добавлять обводку внешнюю/внутреннюю
• Добавлять тень внешнюю/внутреннюю
• Изменять видимость элементов
• Изменять позиции в слоях
• Менять шрифты, настройки текста
• Добавлять адаптивность к блокам и элементам, отображать на разных экранах - элементы по разному

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

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

Мы уже знаем что такое теги, классы, id и атрибуты. Как раз из них и формируются селекторы.

Стандартная CSS Структура:

(тег, класс, ID, атрибут) { - Выделенное и есть селектор
(CSS правила)
}

Давайте подставим примерные значения:
.tn-atom {
background-color: red;
}

В данном случае .tn-atom является селектором.

Вставьте этот код в T123 и посмотрите что получится с дефолтным ZERO блоком. Вы наглядно увидите как во все объекты, которые имеют класс tn-atom добавится красный фон.

Как я писал на странице об HTML тегах, класс tn-atom в тильде ставится на все элементы внутри ZERO блока и является дочерним для всех элементов.
Именно поэтому окрасились все элементы, теперь я думаю будет понятнее для чего нужны уникальные классы, о которых также писал, они помогут нам достучаться до конкретных элементов.

Как вы уже поняли, селектором является выражение, которое состоит из класса, id или атрибута. Они вставляются до скобок { ... }, но при этом надо правильно их вставить.

К примеру, чтобы задать CSS код для элемента, и мы хотим вызвать его через класс:
.tn-atom {

}
Для класса используется точка вначале

Если хотим задать CSS код для элемента, но уже вызвать элемент через id блока:
#rec792264209 {

}
Для ID используется решетка вначале

Если хотим задать CSS код для элемента, но уже вызвать элемент через атрибут:
[data-elem-id="1725450981268"] {

}
Для атрибута используются квадратные скобки с указанием атрибута и его значения

При этом это может быть один и тот же элемент, просто у него имеется класс tn-atom, id rec792264209, а атрибут data-elem-id="1725450981268"

Таким образом вы сможете стучаться до объекта. И я рекомендую вам научиться использовать все три способа, потому-что тильда

1. Не всегда дает уникальный класс
2. Мало где дает ID элементам, кроме целых блоков
3. Но почти везде есть атрибуты с уникальным значением

Но это еще цветочки! Вы можете вписывать по 2,3,4, классов, id и атрибутов в 1 селектор!
Как это выглядит?

Представьте такой код:
.tn-elem__7922642091725450981268 .tn-atom {

}

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

Получается у нас 2 класса в одном селекторе. И стоит понимать, что так можно сделать только если класс первого элемента является родителем, а остальные классы дочками.

Структура такая:
<div class="one"> - Родительский элемент

- <div class="two"> - Дочерний элемент

-- <div class="three"></div> - Дочерний элемент происходящий от класса "two"

- </div> Закрывающий тег дочернего элемента от класса "one"

</div> - Закрывающий тег родительского элемента

Представим, что наша задача обратится к элементу с классом "three", но при этом усложним, и нам нельзя будет напрямую к нему обращаться, а только через наследование.

Как мы это сделаем?
.one .two .three {

}

Как видите, мы прямо последовательно обратились сначала к первому элементу с классом "one", далее ко второму элементу с классом "two", и в конце к третьему с классом "three"

К сожалению, в CSS на данный момент нельзя обращаться от дочки к родителю, например:
.three .one {

}

Играет строгая модель наследования, когда от старшего переходит к младшему.

Давайте теперь напишем селектор для нашего квадрата, но обратимся через ID блока.