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

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

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

文件的开头?

当前回答

@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样式表与使用导入功能并没有太大区别。使用@import通常用于链接样式表，这样可以轻松地扩展样式表。它可以用来轻松地交换不同的颜色布局，例如结合一些一般的css定义。我认为主要的优势/目的是可扩展性。

我也同意xbonez的评论，因为可移植性和可维护性是额外的好处。

2012-04-05 22:45:34

它们非常相似。有些人可能认为@import更易于维护。但是，每个@import都将花费您一个新的HTTP请求，其方式与使用“link”方法相同。所以在速度的背景下，它并不更快。正如“duskwuff”所说，它不能同时加载，这是一个缺点。

2012-04-05 22:54:07

这可能会帮助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 RESET，比如Eric Meyer的RESET CSS v2.0，在你的CSS中使用@import，这样它就能在应用你的CSS之前完成它的工作，从而防止冲突。

2013-12-17 17:34:15

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

You write multiple sheets because the different pages of your website require different CSS definitions. Or at least not all of them require all the CSS definitions one other pages require. So you split up the CSS files in order to optimize what sheets are load on the different pages and avoid loading too many CSS definitions. The second reason that comes to mind is that your CSS is getting that large that is becomes clumsy to handle and in order to make it easier to maintain the large CSS file you split them up into multiple CSS files.

第一个原因是附加的<link>标记将应用，因为这允许您为不同的页面加载不同的CSS文件集。

对于第二个原因，@import语句似乎是最方便的，因为您可以获得多个CSS文件，但加载的文件总是相同的。

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

2012-04-05 22:47:03

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

推荐文章

最新文章

标签