Использование тега «link» в HTML
Это лучший метод, который стоит применять (подробнее об этом можно прочесть в конце статьи). Внутри вашей веб-страницы, наряду с открывающими и закрывающими тегами «head», вы можете включить следующее:
<link rel="stylesheet" href="style.css">С момента выхода HTML5, разработчики пристрастились добавлять атрибут type в элемент «link» для того, чтобы указать, какой тип файла вы включаете. Но валидаторы кода HTML никогда не требовали этого, а также это не требуется ни в одной версии любого браузера.
Применение @import At-Rule
Вместо элемента «link», вы можете включить ссылку на CSS-файл следующим образом:
<style>
@import url(style.css);
</style>Данный метод, так называемый At-Rule (это только один из типов At-Rule), должен быть включен либо внутри тегов «style» в головную часть вашего документа (head), либо внутрь таблицы стилей (на которую можно сослаться как раз посредством элемента «link», либо посредством другого правила @import).
Объявление @import должно быть перед каким-либо правилом CSS, в противном случае он не будет работать.
Применение элемента «style»
Вы можете включить CSS где-угодно на странице посредством внесения правил CSS в теги «style» следующим образом:
<style>
p {
margin: 0 0 20px 0;
}
</style>Хотя подобное можно расположить где-угодно в документе HTML, лучше всего разместить эти строки внутри тега head.
Применение строчных стилей
Еще один способ внедрения CSS в веб-страницу заключается в применении строчных стилей. Данный метод позволяет вам определить стили для конкретного отдельного элемента. Например:
<p style="color: red; padding: 20px;">Example paragraph text goes here.</p>Какой же метод – лучший?
Можно сразу сказать, что лучшим методом является первый описанный здесь. Конечно же, не стоит исключать случаи, когда и другие методы окажутся удобнее. В течение многих лет мы применяли каждый из этих способов. Меньше всего мы использовали и используем метод @import.
Метод @import потерял свою популярность по разным причинам. Во-первых, он был не совсем совместим с IE, что временами приводило к тому, что страница загружалась без стилей (если метод был включен в «head»). Также, раньше @import отлично подходил, когда в старых браузерах (типа Netscape 4) нужно было игнорировать CSS-стили, которые они не понимают. Но сейчас это уже не востребовано.
Также следует отметить, что «тело» нестилизованного контента не появляется, если вы используете элемент «link», поэтому нужно обратиться к другому файлу в CSS посредством метода @import.
Еще два предложенных метода (использование элемента «style» и строчные стили) следует избегать, так как они не очень хорошо подходят для долгосрочного применения. Например, если у вас целая куча кода CSS в «head», то этот CSS не будет влиять на что-либо. Как и в случае со строчными стилями, стили будут влиять только на определенные элементы.
