Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В прошлом уроке была разобрана вторая часть словосочетанияКаскадные таблицы стилей, а именнотаблицы стилей. Мы изучили, как записываются и применяются стили к различным HTML элементам. В этом уроке поговорим о значении словакаскадные.

2 Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это все не уйдет в общий бассейн.

3 В CSS слово каскадность имеет такое же значение. В качестве воды у нас CSS свойства. Они могут накладываться и перекрывать друг друга. Другими словами каскадность - возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.

4 Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark. Первый класс будет отвечать за жирное начертание текста, а второй за установку темного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

5 В CSS файле укажем следующие стили:

6 Попробуйте воспроизвести этот пример, и вы увидите, что текст выводится темного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

7 Итоговыми стилями для нашего параграфа будут:

8 Это и есть каскадность стилей CSS. Хоть мы и использовали разные селекторы и классы для описания, но в конечном итоге они суммировались.

9 <h2>Приоритет селекторов</h2>

10 Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберем на примере. Возьмем параграф с классом red и идентификатором blue. Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зеленый цвет.

11 Перед тем, как читать дальше попробуйте выполнить этот пример в любом удобном вам месте.

12 Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть, дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф все равно останется синим.

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

14 Условно можно расставить селекторы в следующем порядке по приоритету:

15 <ol><li>Селектор по идентификатору (#blue)</li>

16 <li>Селектор по классу (.red)</li>

17 <li>Селектор по тегу (p)</li>

18 </ol>Где1- самый высокий приоритет, а3- самый низкий.

19 Разберем еще один пример:

20 Этот текст будет наклонным, жирным и зеленым. И вот почему:

21 <ul><li>Селектор по тегу p:<ul><li>Добавит синий цвет</li>

22 <li>Добавит жирное начертание</li>

23 </ul></li>

24 <li>Селектор по классу .important:<ul><li>Заменит синий цвет на пурпурный</li>

25 <li>Сделает текст курсивным</li>

26 </ul></li>

27 <li>Селектор по идентификатору #intro:<ul><li>Заменит пурпурный цвет на зеленый</li>

28 </ul></li>

29 </ul>После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:

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

31 <h2>Переопределение свойств</h2>

32 Возможно, у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу"Кто последний, тот и прав". Проще всего это так же посмотреть на примере:

33 Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error, который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае

34 Цвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.

35 <h2>Вес селекторов</h2>

36 Во время разработки вы будете встречать разные ситуации, при которых одни селекторы будут иметь больший вес, чем другие. Причем их месторасположение в CSS файле не имеет особого значения:

37 Какой высоты будет элемент <textarea>? Правильный ответ -50px, так как селектор по классу имеет больший приоритет, чем селектор по тегу. Но как же задать высоту в200pxи не вводить новые классы? Достаточно подставить к тегу еще и название класса:

38 Теперь для элемента <textarea> будет установлена высота в200px. Это произошло благодаря тому, что приоритеты "складываются" в рамках одного селектора. Для большего понимания таких сложений можно представить, что общий вес селектора определяется тремя цифрами, где:

39 <ol><li>Первая цифра показывает количество идентификаторов в селекторе</li>

40 <li>Вторая цифра показывает количество классов в селекторе</li>

41 <li>Третья цифра показывает количество тегов в селекторе</li>

42 </ol>Может звучать сложно, но концепция простая. Разберем прошлый пример:

43 <ul><li>Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим:010</li>

44 <li>Селектор textarea состоит из одного тега. Записываем единицу в третий разряд нашего числа:001</li>

45 </ul>Визуально понятно, что010 > 001, поэтому свойства внутри такого правила имеют больший приоритет. Мы захотели это исправить и дополнили наш селектор:

46 Теперь порядок сил во вселенной немного изменился:

47 <ul><li>Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим:010</li>

48 <li>Селектор textarea.form-input состоит из одного класса и тега. Записываем единицу во второй и третий разряд нашего числа:011</li>

49 </ul>Получаем, что010 < 011, а значит свойства внутри селектора textarea.form-input будут иметь больший приоритет.

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