Чтение онлайн

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

Следующей концепцией, которую мы собираемся рассмотреть, является наследование.

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

Так, например, если я укажу одно свойство в теге body, каждый элемент, который является дочерним элементом тега body унаследует это свойство. Точно так же, если я укажу свойство для какого-либо элемента на HTML-странице, каждый дочерний элемент этого элемента также унаследует это свойство. И очевидно, что ни один из родителей этого элемента не унаследует это свойство.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Свойство font-family должно содержать несколько имен шрифтов в качестве запасных, чтобы обеспечить максимальную совместимость между браузерами и операционными системами. Начните с нужного шрифта и закончите общим семейством, чтобы позволить браузеру выбрать аналогичный шрифт в общем семействе, если другие шрифты недоступны. Названия шрифтов должны быть разделены запятой.

И на тот случай, если вы не знаете разницы между Serif и Sans-Serif, скажу, что есть шрифты без засечек и шрифты с засечками – это шрифты, в которых есть не только линии, но и небольшое украшение в конце.

Далее давайте изменим цвет. И это мы делаем с помощью свойства color.

И здесь можно использовать предопределенные имена цветов red, green, blue и т.д., а можно использовать шестнадцатеричное значение для определенного цвета.

Свойство font-style указывает, хотите ли вы, чтобы текст был курсивным или обычным.

Следующее свойство – это вес шрифта.

И вес шрифта можно указать от нормального до жирного. И вы также можете указать вес с помощью числа.

Далее мы можем указать размер шрифта.

Почти каждый браузер имеет размер шрифта по умолчанию 16 пикселей. Не путайте это с точками pt, здесь используются пиксели. Точки pt используются в печати, но не на экране. На экране вы используете пиксели. Пиксели считаются абсолютной единицей измерения размера. Тем не менее, у них есть относительная составляющая.