В чем разница между этими двумя способами связывания HTML-страницы с CSS-файлом?

Question

Я читал несколько уроков по css и видел два разных способа указать, какой файл css следует использовать для оформления страницы:

<style type="text/css">@import url("style.css");</style>

и

<link rel="stylesheet" type="text/css" href="style.css" />

Какая разница между ними? Какой я должен использовать?

Answer 1

Согласно «Наилучшим методам ускорения работы вашего веб-сайта» Yahoo * с использованием @ include ведет себя так, будто в нижней части страницы в Internet Explorer .

Загрузка CSS в конце страницы вызывает перерисовку страницы. Это означает, что страница сначала отображается без CSS, а затем перерисовывается с помощью CSS. Это немного замедляет загрузку страницы.

Answer 2

Каскад CSS и почему вы должны заботиться

Это сводится к Специфичность CSS и CSS Cascading. Будьте внимательны и знайте, что вы делаете, и CSS Specificity может стать вашим другом.

// 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 */

Это займет версию внешних стилей

Примечание: Специфичность CSS встроенного стиля равна 1000, поэтому он превосходит все, кроме тега! Important, который равен 10000. Еще одна статья о специфике CSS

Справочник по специфике CSS

• ! Важный = 10000
• встроенный стиль = 1000

• каждый #id в правиле = 100 Например, это 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 */

Итак ... Каскад применяется только к элементу той же Специфичности . Каскады применяются ПОСЛЕ ТОГО, как применяются правила специфичности.

Answer 3

Нет большой разницы, если вы не используете очень старые браузеры (netscape 4.x и т.е. 3.x). Вы можете прочитать полное описание того, что каждый из них означает здесь .

С точки зрения стандартов, нет никакой разницы между ссылками на внешние таблицы стилей или их импортом. В любом случае это правильно, и в любом случае одинаково хорошо будет работать (в большинстве случаев).

Answer 4

Речь идет о приоритете. если вы @import foo.css, правила CSS ведут себя так, как будто вы поместили содержимое файла foo.css непосредственно в этот блок <style>. Это означает, что они имеют более высокий приоритет, чем файл CSS, который <link> ed в.

Таким образом, если бы вы @import файла с установленным font-size: 12pt И связали файл с установленным font-size: 14pt, вы бы получили 12pt текст.

Answer 5

Исторически, я считаю, что первое часто использовалось, чтобы предотвратить использование Netscape 4 ваших стилей (хотя я могу ошибаться; когда Netscape 4 все еще оставался проблемой, я не очень знал о кросс-браузерном кодировании, поэтому это очень нечеткое воспоминание).

В наши дни люди иногда используют <link>, чтобы добавить одну таблицу стилей с веб-страницы, а затем @import, чтобы получить кучу других с этого листа. Это позволяет вам разделить ваши стили на layout.css, typography.css и т. Д., Если вам нравится это делать.

Как упоминал Тангл, кеширование становится проблемой с @import, но только для IE.

Answer 6

Как уже говорилось, первая - это встроенная таблица стилей (которую также можно сделать во внешних таблицах стилей). Это может привести к лучшему упорядочению таблиц стилей при внешнем использовании, но имейте в виду, что когда таблица стилей встроена, браузер не будет ее кэшировать

Answer 7

правило @import - это в основном хак. Все современные браузеры понимают правило @import, тогда как ранние браузеры не понимают. Таким образом, если ваш сайт падает в ранних браузерах из-за правила css (это не обычное дело, но все же ...), у вас может быть простой css для более старых версий (в элементе ссылки), который они поймут, проанализируют и поместите его выше правила @import

РЕДАКТИРОВАТЬ: поскольку правило @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");

Answer 8

первый - это встроенный CSS, который ссылается на другой файл; в то время как второй является прямой ссылкой из HTML в CSS.

Я не могу придумать причину использовать первый.