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

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

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

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

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

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

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

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

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

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

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

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

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

Существует множество свойств CSS, влияющих на отображение текста.

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

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

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