Ранее я рассказывал, как использовать таблицы стилей на уровне документа. Они в HTML-документах используется очень часто, особенно если документ создаётся динамически, либо когда это какой-то отдельный документ. Однако при создании сайтов, как правило, все его страницы должны иметь одинаковый стиль, поэтому прописывать стили в каждом документе - это плохое решение. Особенно плохим оно покажется, если, например, в какой-то прекрасный момент вы захотите поменять цвет всех заголовков на всех ваших 10500 страницах.
Так что для страниц сайта лучше использовать внешние таблицы стилей, и подключать их к каждой странице сайта. В таком случае замена, например, шрифта на всех страницах потребует изменения лишь в одном месте - в файле, в котором определены стили для всего сайта. Такой файл обычно имеет расширение .css и содержит стили для разных элементов сайта.
Допустим, у нас есть файл styles.css, который хранится в том же каталоге, что и HTML-документ, и в этом файле определены следующие стили:
В таком случае для того, чтобы подключить этот файл к HTML-документу, можно использовать тег <link>:
Это первый способ подключения внешних таблиц стилей. Но есть и второй - импортирование:
<style type="text/css">
@import url("styles.css");
</style>
А можно и без url:
@import "styles.css";
Импортирование должно выполняться ДО любых стилевых правил. Согласно стандарту CSS каскадирование происходит так:
- Сначала импортируются таблицы стилей
- Затем обрабатываются правила, определённые на уровне документа
На этом всё. Подписывайтесь на канал, чтобы ничего не пропустить.