Теперь, ваш выбор размещения стилей в одном или другом месте не только влияет на возможность повторного использования стилей, но также влияет на то, какие объявления стилей переопределяют другие объявления стилей.
Давайте рассмотрим пример.
В этом примере мы указываем в теге style, что каждый h2 в нашем HTML-документе должен иметь темно-бордовый цвет текста.
Однако есть и другие места, где вы можете указать стиль CSS.
Например,
вы можете указать стиль CSS непосредственно для элемента, указав атрибут style и объявления CSS непосредственно в теге элемента.
Объявления стилей будет точно такое же, как и раньше, и они также заканчиваются точкой с запятой, и вы можете указать здесь несколько объявлений, просто завершая их точкой с запятой.
Это называется встроенным стилем, и, как вы могли догадаться, это наименее пригодный для повторного использования способ стилизации элементов.
Обычно этот способ стилизации используется для быстрого тестирования, чтобы посмотреть, как будет выглядеть стиль.
Теперь, что, если у меня есть несколько страниц на моем веб-сайте, и я хочу, чтобы все они выглядели одинаково? Это означает, что указание стилей с помощью тега style мне не поможет.
И мне нужен какой-то другой способ указать стили, который является внешним по отношению к HTML-странице.
Для этого мы можем использовать тег с именем link, где мы сообщаем браузеру, что есть таблица стилей и указываем ее местоположение, используя атрибут href.
И внешние таблицы стилей это просто файлы со списками правил CSS. И здесь нет никаких особых тегов.
Как вы можете видеть в этом файле style.css, мы указываем для тела документа, что его цвет фона должен быть серым, а размер шрифта должен составлять 130% от размера шрифта по умолчанию.
Реальные веб-сайты почти всегда используют внешние таблицы стилей, что означает, что вы берете все свои стили и помещаете их во внешний файл, а затем связываете его обратно с несколькими HTML-страницами с помощью тега link.
Этот метод не только повторно использует стили CSS, но и способствует единообразному виду всего веб-сайта.
Теперь давайте рассмотрим разрешение конфликтов при определении стилей.
Само название CSS это каскадные таблицы стилей. То есть каскадирование это фундаментальная особенность CSS. Это алгоритм, определяющий, как комбинировать значения свойств из разных источников.
И если есть конфликт в стилизации, чтобы понять какое правило CSS выигрывает, нужно понимать этот алгоритм.
Алгоритм каскадирования объединяет четыре концепции.
Это происхождение, или приоритет происхождения, слияние, а также наследование и специфичность.
Сначала давайте рассмотрим первые две концепции происхождение и слияние.
Когда два
CSS объявления конфликтуют, другими словами, они определяют по-разному одно и то же свойство для одного и того же элемента, срабатывает правило приоритета происхождения.
И это очень простое правило последнее объявление побеждает.
Теперь, пытаясь выяснить, что такое последнее объявление, вы должны помнить, что HTML обрабатывается последовательно. То есть сверху вниз.
Поэтому, чем ниже объявление на странице, тем выше его приоритет.
При этом для внешнего CSS думайте, как об объявленном в том месте, где он подвязан.
Теперь о слиянии.
Когда разные объявления CSS не конфликтуют, но свойства CSS для элемента разные, существует простое правило объявления сливаются.
Таким образом, объявления, например, размера шрифта и объявление цвета, так как это два разных свойства, при том, что они определены для одного и того же элемента, и даже если они определены в разных местах, они сольются в одно объявление. И элемент получит как размер шрифта, так и цвет.
Следующей концепцией, которую мы собираемся рассмотреть, является наследование.
И это довольно простая концепция. Основная идея здесь заключается в том, что у вас есть дерево объектной модели документа. И если вы укажете какое-то свойство CSS для какого-либо элемента, все дочерние элементы этого элемента также наследуют это свойство, и вам не нужно указывать свойство для каждого элемента.
Так, например, если я укажу одно свойство в теге body, каждый элемент, который является дочерним элементом тега body унаследует это свойство. Точно так же, если я укажу свойство для какого-либо элемента на HTML-странице, каждый дочерний элемент этого элемента также унаследует это свойство. И очевидно, что ни один из родителей этого элемента не унаследует это свойство.
Теперь давайте рассмотрим концепцию специфичности.
И
у специфичности также есть довольно простое правило выигрывает наиболее конкретная комбинация селекторов.
И есть довольно простой метод, который позволяет выяснить, какая комбинация селекторов является более специфичной, чем другие.
Вы можете думать о специфичности как о подсчете очков. Комбинация с наибольшим количеством очков побеждает.
И эту оценку можно рассчитать, если расположить типы факторов, влияющих на оценку, слева направо, причем слева будет наивысшее значение специфичности. Затем просто возьмите правило CSS и заполните эту табличку.
Самое высшее значение специфичности имеет атрибут стиля элемента style. И это происходит, когда вы указываете объявления CSS прямо в элементе, используя атрибут стиля. Нет ничего более конкретного, чем это объявление.