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

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

я не могу придумать причину использовать первую.

правило @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");

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

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

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

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

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

From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases).

Согласно "Рекомендации Yahoo по ускорению работы вашего веб-сайта", использование @включают ведет себя как размещение <link> внизу страницы в Internet Explorer.

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

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

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

Каскад CSS и почему вам стоит беспокоиться

Все сводится к Специфика CSS и каскадированию CSS. Действуйте осторожно и знайте, что вы делаете, и 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 */

Потребуется версия externalStyles

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

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

• ! important = 10,000
• встроенный стиль = 1000

• каждый #id в правиле = 100 -например, это 200:

  #content #footer {цвет: красный; } / * 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 */

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