Введение в веб-разработку с HTML, CSS, JavaScript
Шрифт:
Таким образом, объявления, например, размера шрифта и объявление цвета, так как это два разных свойства, при том, что они определены для одного и того же элемента, и даже если они определены в разных местах, они сольются в одно объявление. И элемент получит как размер шрифта, так и цвет.
Следующей концепцией, которую мы собираемся рассмотреть, является наследование.
И это довольно простая концепция. Основная идея здесь заключается в том, что у вас есть дерево объектной модели документа. И если
Так, например, если я укажу одно свойство в теге 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 используются в печати, но не на экране. На экране вы используете пиксели. Пиксели считаются абсолютной единицей измерения размера. Тем не менее, у них есть относительная составляющая.