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

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

Наличие загрузки CSS в конце страницы заставляет страницу быть повторно представленной. Это означает, что страницу сначала показывают без 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>

, Если у меня есть правило в importedStyles.css так:

.error { color: blue; } /* specificity = 10 */

И правило в "externalStyles.css" как так:

div.error { color: red; } /* specificity = 11 */

Это обратит externalStyles Внимание версии

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

Специфики CSS Ссылка Специфики CSS

• ! важный = 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 */

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

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

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

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

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

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

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