Html 包含CSS的最佳方式？为什么要使用@import？_Html_Css

Html 包含CSS的最佳方式？为什么要使用@import？

html css

Html 包含CSS的最佳方式？为什么要使用@import？,html,css,Html,Css,基本上，我想知道使用@import将样式表导入现有样式表与只添加另一个样式表相比有什么好处/目的 <link rel="stylesheet" type="text/css" href="" /> 在文档的头部添加css样式表与使用导入功能没有太大区别。使用@import通常用于链接样式表，以便轻松扩展样式表。它可以用来轻松地交换不同的颜色布局，例如与一些通用css定义结合使用。我想说的主要优点/目的是可扩展性我也同意xbonez的意见，即可移植性和可维护性是附加的好处。我认

基本上，我想知道使用

@import

将样式表导入现有样式表与只添加另一个样式表相比有什么好处/目的

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

在文档的头部添加css样式表与使用导入功能没有太大区别。使用

@import

通常用于链接样式表，以便轻松扩展样式表。它可以用来轻松地交换不同的颜色布局，例如与一些通用css定义结合使用。我想说的主要优点/目的是可扩展性

我也同意xbonez的意见，即可移植性和可维护性是附加的好处。

我认为这其中的关键是为什么要编写多个CSS样式表的两个原因

因为网站的不同页面需要不同的CSS定义，所以您需要编写多个表单。或者至少不是所有的页面都需要其他页面所需的所有CSS定义。因此，为了优化不同页面上加载的工作表并避免加载过多的CSS定义，需要拆分CSS文件

我想到的第二个原因是，你的CSS越来越大，处理起来很笨拙，为了更容易维护大的CSS文件，你把它们分割成多个CSS文件

由于第一个原因，附加的

标记将适用，因为这允许您为不同的页面加载不同的CSS文件集

第二个原因是，

@import

语句看起来最方便，因为您可以获得多个CSS文件，但加载的文件总是相同的

从加载时间的角度来看，没有什么不同。浏览器必须检查并下载单独的CSS文件，无论它们是如何实现的。

从页面速度的角度来看，几乎不应该使用CSS文件中的

@import

，因为它可以防止样式表被同时下载。例如，如果样式表A包含文本：

@import url("stylesheetB.css");

然后，在下载第一个样式表之前，可能不会开始下载第二个样式表。另一方面，如果两个样式表都在主HTML页面的

元素中引用，则可以同时下载这两个样式表。如果两个样式表总是一起加载，那么简单地将它们合并到一个文件中也会很有帮助

偶尔会有一些情况下，

@import

是合适的，但它们通常是例外，而不是规则。

出于速度原因，最好不要使用

@import

在页面中包含CSS。请参阅这篇优秀文章，了解原因：

此外，缩小和组合通过@import标记提供的css文件通常比较困难，因为缩小脚本无法从其他css文件中“剥离”出@import行。使用link方法将它们作为包含时，样式表将并行加载（更快更好），并且几乎所有浏览器都支持link

“导入”会一个接一个地加载任何额外的css文件（速度较慢），可能会让您看到一些未设置样式的内容，它们非常相似。有些人可能认为@import更易于维护。但是，每个@import都将以与使用“link”方法相同的方式花费您一个新的HTTP请求。因此，就速度而言，它并不更快。正如“Dashwuff”所说，它不会同时加载，这是一种崩溃

我经历了一个可以添加的链接样式表的“高峰”。虽然添加任意数量的链接Javascript对我的免费主机提供商来说都不是问题，但在外部样式表数量翻了一番之后，我遇到了崩溃/减速。正确的代码示例是：

@import 'stylesheetB.css';

因此，正如Nitram所提到的，我发现它对于在硬编码设计的同时拥有一个好的心理地图很有用。祝你好运。

如果有英语语法错误，我也很抱歉。

我使用@import的一个地方是当我在做一个页面的两个版本时，英语和法语。我将使用main.css用英语构建我的页面。当我构建法语版本时，我将链接到法语样式表（main_fr.css）。在法语样式表的顶部，我将导入main.css，然后为法语版本中我需要的不同部分重新定义特定规则。

@Nebo Iznad Mišo Grgur

以下是使用@import的所有正确方法

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

来源：

如果你正在使用CSS重置，比如Eric Meyer的RESET CSS v2.0，那么在你的CSS中使用@import，所以它在应用CSS之前就完成了它的工作，从而防止了冲突。

我要扮演魔鬼代言人，因为我讨厌人们太多的同意

1.如果需要依赖于另一个样式表的样式表，请使用@import。在单独的步骤中进行优化。在任何给定的时间都有两个变量需要优化——代码的性能和开发人员的性能。在许多情况下（如果不是大多数情况的话），更重要的是提高开发人员的效率，只有这样才能提高代码的性能

如果一个样式表依赖于另一个样式表，那么最合理的做法是将它们放在两个单独的文件中，并使用@import。这对下一个查看代码的人来说是最合乎逻辑的

（什么时候会出现这种依赖？在我看来，这是非常罕见的 -通常一个样式表就足够了。但是，在不同的CSS文件中有一些合乎逻辑的位置：）

主题化：如果同一页面有不同的配色方案或主题，它们可能会共享一些组件，但不是所有组件
子组件：一个人为的例子——假设你有一个包含菜单的餐厅页面。如果菜单与其他菜单有很大不同如果页面位于自己的文件中，则更易于维护

通常样式表是独立的，因此使用

将它们全部包括在内是合理的。然而，如果

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>

<link media="screen" rel="stylesheet" type="text/css" href="parent.css" />

@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');

<style>
  @import url('child1.css');
  @import url('child2.css');
  @import url('child3.css');
  @import url('child4.css');
</style>

<link media="screen" rel="stylesheet" type="text/css" href="styles.css" />

body {
  font-size:13px;
}

<link media="screen" rel="stylesheet" type="text/css" href="newerbrowsers.css" />

@import 'imported.css' all;

html body {
  font-size:1em;
}

:root {
   --bg-dark: #ffffff;
}

@import "colors.css";

body: var(--bg-dark)