Я читал несколько уроков о css, и я видел два разных способа указать, какой css файл следует использовать для стилизации страницы:
<style type="text/css">@import url("style.css");</style>
и
<link rel="stylesheet" type="text/css" href="style.css" />
Какая разница между ними? Какой из них я должен использовать?
Нет большой разницы, если вы не используете очень старые браузеры (netscape 4.x и т.д. 3.x). Вы можете прочитать полную информацию о том, что означает здесь.
С точки зрения стандартов нет никакой разницы между ссылкой на внешнюю таблицу стилей или ее импортом. В любом случае это правильно, и любой из них будет работать одинаково хорошо (в большинстве случаев).
В соответствии с Yahoo "Лучшие практики для ускорения вашего веб-сайта" , используя @include, ведет себя как < & ссылка GT; в нижней части страницы в Internet Explorer.
При загрузке CSS в конце страницы происходит перезагрузка страницы. Это означает, что страница сначала отображается без CSS, а затем перерисовывается с помощью CSS. Это немного замедляет загрузку страницы.
Это сводится к Специфика CSS и CSS-каскадирование. Протестируйте внимательно и знайте, что вы делаете, а специфика CSS может быть вашим другом.
// bring CSS into the Page
<style type="text/css">@import url("importedStyles.css");</style>
/// Link to CSS Style Sheet
<link rel="stylesheet" type="text/css" href="linkedStyles.css" />
Так как @import привносит стиль в эту страницу, эти правила будут переопределять внешние или "связанные" таблицы стилей. Внутристраничные CSS-козыри из-за более высокой Специфика CSS:
<span style="color: red;">I am DEFINITELY RED</span>
Однако это работает только тогда, когда правила имеют одинаковую специфичность
Возьмите следующее:
<div class="error">I am an error message</div>
Если у меня есть правило в importStyles.css так:
.error { color: blue; } /* specificity = 10 */
И правило в "externalStyles.css" выглядит так:
div.error { color: red; } /* specificity = 11 */
Будет выполнена версия externalStyles
Примечание: Специфика CSS встроенного стиля - 1000, поэтому он превосходит все, кроме важного тега, который равен 10000. Еще одна статья спецификации CSS
каждый #id в правиле = 100 -eg, это 200:
#content #footer {color: red; }/* 200 */
каждый класс = 10
каждый элемент html = 1
Итак, некоторые примеры:
body .selected { color: red; } /* 11 */
ul li { color: red; } /* 2 */
ul li.selected { color: blue; } /* 12 */
#content ul li.selected a { color: red; } /* 113 */
/* Careful, can't override this, ever */
a { color: blue; !important } /* 10,000 - Override everything */
Итак... Каскад применяется только к элементу той же Спецификации. Каскады применяются ПОСЛЕ соблюдения правил специфики.
правило @import - это, в основном, хак. Все современные браузеры понимают правило @import, тогда как ранние браузеры этого не делают. Таким образом, если ваш сайт выходит из строя в ранних браузерах из-за правила css (это не обычная вещь, но все же...), вы можете иметь простой css для более старых версий (в элементе ссылки), которые они поймут и проанализируют и поместите его выше правила @import
EDIT: поскольку правило @import создает несколько проблем с кешированием (как уже упоминалось ранее), вы могли бы @import (styles.php) и в styles.php делать что-то вроде
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
header($ExpStr);
echo ("@import url(style1.css);\r");
echo ("@import url(style2.css);\r");
echo ("@import url(style3.css);\r");
Как сказано, первая - это вложенная таблица стилей (которая также может быть выполнена во внешних таблицах стилей). Это может привести к улучшению упорядоченных таблиц стилей при использовании извне, но помните, когда вложенная таблица стилей браузера не будет кэшировать ее
Исторически я считаю, что первый часто использовался, чтобы предотвратить Netscape 4 от наложения на ваши стили (я мог ошибаться, хотя, когда Netscape 4 все еще был проблемой, я не очень разбирался в кросс-браузерном кодировании это очень нечеткая память).
В наши дни люди иногда используют <link> для включения единой таблицы стилей с веб-страницы, а затем @import, чтобы захватить кучу других с этого единственного листа. Это позволяет отделять ваши стили от layout.css, typography.css и т.д., Если это так, как вам нравится катиться.
Как упоминалось в Tungle, кеширование становится проблемой с @import, но только для IE.
Это о приоритете. если вы @import foo.css, правила CSS ведут себя так, как если бы вы поместили содержимое foo.css прямо в этот блок <style>. Это означает, что они имеют более высокий приоритет, чем файл css, который <link> ed in.
Итак, если вы должны были @import файл, который установил font-size: 12pt И связать файл, который установил font-size: 14pt, вы получите текст 12pt.
первый - это, по сути, встроенный CSS, который ссылается на другой файл; в то время как второй является прямым ссылкой от HTML к CSS.
Я не могу придумать причину использования первого.