0: Разберёмся с тем, что такое каскадность и наследование на практике при создании сложной вёрстки очень часто возникает ситуация, когда к 1 элементу несколько раз применяются одни и те же свойства с разными значениями и без

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

2: Конкретные примеры создадим папку css каскад.

3: Здесь внутри создадим новый файл, индекс и файл со стилями с помощью

4: Создаём структуру документа и подключаем наш файл.

5: С помощью каскадности можно задать приоритет применения свойств и тем самым сделать применение свойств предсказуемым. Давайте рассмотрим работу каскадности на конкретных

6: Примерах. Создадим папку, назовём её css каскад в нём, в ней создадим папку. Прошу прощения. Файл индекс штмл.

7: Тут же создадим файл style css развернём структуру аштмл документа с помощью эммита и подключим файл style css к нашему документу вот документ.

8: Готов. И теперь создадим здесь заголовок, чтоб было понятно, о чем идёт речь в данном документе. Назовём его каскадность и наследование. Вот.

9: И теперь на примере заголовков h2.

10: Рассмотрим, как же работает у нас каскадность, дадим текст из 10 слов и в стилях применим, изменим.

11: Цвет данного заголовка.

12: Пусть это будет серый цвет.

13: И теперь посмотрим, как это выглядит в браузере.

14: Вот, вот наш серый заголовок. Что же будет, если мы изменим это свойство ещё раз?

15: Здесь же зададим ещё раз.

16: H2 и изменим цвет, например, на зелёный.

17: Как видите, цвет поменялся. Все дело в том, что при повторном изменении данного свойства, да, в таком же селекторе предыдущее значение перезаписывается. Это как раз и есть 1.

18: Из правил каскадности, то есть применяется то значение, которое встретилось в последнюю очередь. Рассмотрим ещё 1 пример. Добавим ещё 1 заголовок.

19: Зададим здесь текст.

20: И применим к этому заголовку класс.

21: Зову его хедер.

22: И теперь этому хедеру вот здесь, перед 2 h2 добавим описание хедер и зададим цвет, например.

23: Синий.

24: И как видите, этот класс применился. То есть у нас 2 заголовок стал синего цвета. Почему же так получилось? Хотя последнее по очереди описание у нас

25: Задаёт зелёный цвет. Применился у нас все равно синий. Здесь в игру вступает такое понятие как специфичность. Дело в том, что специфичность у селектора по классу выше, чем у селектора по элементу. Поэтому

26: Приоритет у такого селектора, соответственно, такого класса выше, поэтому применяется именно синий цвет. Рассмотрим ещё 1 пример. Зададим заголовок также

27: H2.

28: Из 8 слов и применим к этому заголовку этот же класс, а также применим селектор по id, назовём его, например, хедлайн.

29: И опишем его здесь.

30: Решётка хедлайн

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

32: Селектора. По id специфичность больше, чем у класса, соответственно данный

33: Данный селектор перекрыл значение предыдущего, то есть селектор по классу. И ещё 1 пример. Также добавим заголовок давайте мы просто скопируем текущий

34: Здесь мы.

35: Уберём селектор по классу и добавим инлайн стиль style. Да, здесь мы зададим цвет. Ну пусть это будет, например, Браун. И как видите, этот

36: Стиль применился и связано это опять же со специфичностью специфичность у inline стилей выше, соответственно, у них более высокий приоритет, чем у селектора по элементу, классу и id итак.

37: Каскадность это механизм, который управляет конечным результатом в ситуации, когда к 1 элементу применяются разные сисс правила. Здесь важно учитывать специфичность селектора. Так, например, для селектора по элементу или псевдоэлементу.

38: Специфичность селектора у нас равна единице. Специфичность селектора по классу равна 10. Специфичность для селектора. По id у нас равна 100 и для

39: Inline стиля специфичность равна 1000 вот так они у нас в порядке возрастания специфичности, а значит, приоритеты расположены в данном списке, ну и универсальный селектор у нас специфичности не имеет при применении.

40: Любого из вышеперечисленных селекторов универсальный селектор будет перезаписан.

41: Ну и ряд интересных примеров здесь все стандартно. Элемент h1. Его специфичность равна единице. И более интересный пример это h1, то есть в контексте которого ищется элемент е.

42: Специфичность такого селектора, такого контекстного селектора будет складываться, то есть из специфичности элемента h1 и специфичности элемента е. М. Соответственно, специфичность будет равна 2 более интересный пример.

43: Значит, селектор по айди в элементе дифф, значит элемент диф у нас имеет специфичность единицу. Селектор по id у нас имеет специфичность 100 дальше в контексте этого селек.

44: У нас есть ещё 1 селектор, это элемент п, который имеет специфичность единицу и class about который имеет специфичность 10. И общая суммарная специфичность данного элемента будет выше, чем, допустим,

45: Просто у селектора, по id, здесь у нас все складывается, то есть селектор по id имеет 100, да, дальше селектор по классу даёт 10 и 2 селектора по элементу даёт нам двоечку, то есть специфичность данного селектор.

46: Будет равна 112. Ну и ещё 1 пример. То есть специфичность селектора по id с элементом ли, значит, у элемента ли специфичность равна единице у

47: Селектора по id 100 и, соответственно, суммарная будет равна у них 101.

48: Рассмотрим вышеупомянутый универсальный селектор.

49: Зададим с его помощью цвет в документе, например, красный и, как видите, элементы, у которых не было задано никаких свойств, никаких селекторов, стал красного.

50: Цвета. Ну ещё есть возможность запретить переопределение свойств и сделать это можно с помощью правила импотент, указав служебное слово импотент после какого-то

51: Определённого свойства. Это свойство уже нельзя будет изменять. Какой бы селектор мы не применяли. Единственный способ переопределить данное значение. Это задать ещё 1 правило. Импотент, например, вот здесь

52: И теперь у нас все стало зелёного цвета, то есть везде, где применён у нас элемент h2, но на практике такое не используют, потому что ни к чему, кроме путаницы, это все не приведёт.

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

54: Этот цвет, это свойство здесь и было применено. А во 2 примере у нас с вами было задано

55: Свойства для элемента h2. Причём это было сделано дважды и поэтому у нас переопределён универсальный селектор. Как видите, он перечёркнут дальше. 1 элемент h2 и 2 заключительный по порядку элемент h2 у нас зелёного цвета поэтому

56: Он и применился в 3 примере у нас переопределены соответственно, универсальный и 2 селектора по элементу в 3 примере, соответственно, универсальный селектор по элементу, селектор по классу и применён.

57: Selector по id ну и в 4 примере то есть переопределены все предыдущие и применён селектор по элементу точнее по инлайн элемент инлайн стиль.

58: Образом здесь это можно отслеживать. Это очень удобно. Теперь познакомимся с наследованием и для демонстрации работы наследования нам необходимы вложенные друг в друга элементы. Давайте мы для правильности здесь наследование заменим на

59: Специфичность.

60: И создадим ещё 1 заголовок, который будет называться наследование. Ну давайте добавим между этими фрагментами ещё и

61: Горизонтальную линию. Вот. И для того, чтобы у нас заголовки были не красного цвета, мы с вами временно за комментарием наш универсальный селектор

62: И здесь мы с вами создадим пустой контейнер с классом контейнер. Внутри у нас с вами будет заголовок h3.

63: И создадим также абзац с текстом.

64: Вот теперь давайте пропишем свойства нашему классу контейнер.

65: Например, создадим.

66: Размер шрифта 24 пикселя зададим цвет пусть это будет brown зададим внутренний отступ.

67: Где-нибудь 15 пикселей и border.

68: 1 пиксель.

69: Сплошная линия и, например, цвета корол. Вот свойства наши применились. Видим результат. Теперь давайте посмотрим на инструменты разработчика что же там у нас произошло. Ведь, по сути дела, мы задали

70: Значение свойств только для контейнера, да, но внутренние элементы также частично переняли отдельные свойства.

71: Здесь мы видим

72: Заданные нами свойства. В этом можно убедиться. И посмотрим внутренние элементы, внутренние элементы, как мы уже с вами заметили, частично переняли свойства родителя. Например, заголовок пере.

73: Свойства фон сайз 24 пикселя и color цвета Браун 2 других свойства то есть пинги бордер он у нас не не унаследовал вот здесь мы даже можем увидеть от чего были унаследованы данные свойства.

74: Унаследовано от диф с классом контейнер. Совершенно аналогично. У нас произошло наследование и в элементе п, то есть тоже унаследованы 2 этих свойства. А пенниборд у нас не унаследованы. Дело в том, что не все свойства на

75: Наследуются свойства, связанные со шрифтами, цветом и некоторые другие. Мы с вами чуть позднее рассмотрим, какие классы, свойства у нас наследуются, а какие нет. Вот, а вот эти 2 у нас

76: Соответственно, не унаследуется. Это у нас свойства, связанные с блоками, отступами, рамками, границами. Вот, и что же можно сделать, если вдруг нам понадобилось унаследовать ещё и эти 2 свойства, то есть Педин и border в таком слу.

77: Мы можем сделать это принудительно. Давайте мы с вами создадим

78: Отдельные классы.

79: Для каждого из элементов да, то есть для заголовка, назовём его head, просто head и для текста.

80: Это будет у нас.

81: Контент, контент. И теперь зададим собственно свойства. Да, этим элементам хэд сразу контент пропишем.

82: Например, мы хотим унаследовать отступы для заголовка, поэтому здесь мы запишем пединг и запишем значение inherit, указав тем самым, что мы хотим унаследовать именно.

83: Родителю данные свойства, как видите, отступы у нас добавились, и, допустим, мы хотим наследовать отступы.

84: И рамку.

85: У родителя для текста.

86: Как видите, все это у нас сразу же появилось, но к Такому подходу, как правило, не прибегают, потому что это тоже вызывает путаницу, то есть и то есть нарушается каскадность, и поэтому к этому способу не прибегают образом.

87: Наследование это механизм, с помощью которого определённые свойства передаются от предка к его потомкам спецификации css установлено, что наследование свойств, относящихся к текстовому содержимому, у нас наследуется, а свойства, относящиеся к оформлению блоков.

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