最好的方法包括CSS?为什么使用@import?

基本上，我想知道使用@import将样式表导入到现有的样式表中，而不是仅仅添加另一个样式表的优势/目的是什么…

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

文件的开头?

当前回答

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

@import 'stylesheetB.css';

所以，就像Nitram提到的那样，我发现在硬编码设计时，拥有一个好的心理地图是很有用的。祝成功。如果有语法错误的话，我原谅你。

2013-09-10 22:46:47

其他回答

从页面速度的角度来看，几乎不应该使用CSS文件中的@import，因为它会阻止样式表被并发下载。例如，如果样式表A包含以下文本:

@import url("stylesheetB.css");

然后，第二个样式表的下载可能要等到第一个样式表下载完成后才开始。另一方面，如果在主HTML页面的<link>元素中引用了这两个样式表，则可以同时下载这两个样式表。如果两个样式表总是一起加载，那么将它们合并到一个文件中也会很有帮助。

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

2012-04-05 22:47:12

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

2013-10-31 14:09:45

@Nebo在伊兹纳德米索格古尔

下面是使用@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);

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/@import

2013-10-31 14:12:42

现代浏览器可以使用css文件定义全局变量。该文件可以导入到其他可以使用该变量的css文件中。

例如，要在站点中使用一致的颜色:

colors.css :根{ ——bg-dark: # ffffff; ｝ home.css @ import“colors.css”; 身体:var(——bg-dark)

2021-05-05 08:52:18

这可能会帮助PHP开发人员。下面的函数将删除空白，删除注释，并连接所有CSS文件。然后在页面加载前将其插入到头部的<style>标签中。

下面的函数将剥离注释并缩小在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>";
}
?>

在文档头中包含concatenateCSS()函数。传入一个数组，其中包含样式表的名称及其路径IE: css/styles.css。您不需要添加扩展名.css，因为它是在上面的函数中自动添加的。

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

2016-03-29 22:18:58

最好的方法包括CSS?为什么使用@import?

推荐文章

最新文章

标签