Введение в веб-разработку с HTML, CSS, JavaScript. Тимур Машнин

это свойство.

      Теперь давайте рассмотрим концепцию специфичности.

      И у специфичности также есть довольно простое правило – выигрывает наиболее конкретная комбинация селекторов.

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

      Вы можете думать о специфичности как о подсчете очков. Комбинация с наибольшим количеством очков побеждает.

      И эту оценку можно рассчитать, если расположить типы факторов, влияющих на оценку, слева направо, причем слева будет наивысшее значение специфичности. Затем просто возьмите правило CSS и заполните эту табличку.

      Самое высшее значение специфичности имеет атрибут стиля элемента style. И это происходит, когда вы указываете объявления CSS прямо в элементе, используя атрибут стиля. Нет ничего более конкретного, чем это объявление.

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

      Здесь у первого правила количество баллов 2, а у второго 12 баллов. Поэтому второе правило выигрывает.

      И есть еще одна концепция, которую мы рассмотрим. И это концепция переопределения всех правил с помощью «!important».

      В этом примере все три абзаца получат красный цвет фона, хотя селектор идентификатора и селектор класса имеют более высокую специфичность. Потому что правило «!important» переопределяет свойство background-color в обоих случаях.

      Правило «!important» говорит что не имеет значение, какая есть специфичность и переопределяет все CSS объявления.

      Теперь я хочу предупредить вас об использовании этого «!important». Хотя очень заманчиво пропустить понимание всех этих каскадных правил и правил специфичности и просто хлопать «!important» везде, когда что-то не получается, это очень быстро в реальном проекте превратится в кошмар обслуживания, когда вы будете переопределять одно «!important» объявление другим «!important» объявлением, и возникнет гигантский беспорядок.

      Теперь, давайте поговорим о стилизации текста.

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

      В этом примере мы создаем класс с именем style, и мы применяем этот класс ко второму абзацу в нашем html-файле.

      И наша задача состоит в том, чтобы стилизовать второй абзац.

      И первое, что мы обычно хотим сделать, это указать семейство шрифтов. И здесь указана ссылка на часто используемые шрифты.

      Таким образом, семейство шрифтов – это имя свойства font-family.

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