Question

我有2个css文件：

 <link href="css/main.css" rel="stylesheet" type="text/css">
 <link href="css/day/style.css" rel="stylesheet" type="text/css">

的main.css

#MainHeader
        {
            position:absolute; top:0; left:0; right:0;
            width:100%;
            height:300px;

        }

        #ContentContainor
        {
            width: 80%;
            position:absolute;
            top: 350px;
            left: 10%;
        }

的style.css

#MainHeader
{
    background:green;   
}
#ContentContainor
{
    background: yellow;
}

我想要一个人定位网站：main.css，另一个是用户选择的样式style.css。 main.css工作正常，但style.css dosn似乎没有用。

我说实话我不知道这是否可能;我正在尝试。

如果有人有解决方案，请发表评论。

Answer 1

你所说的绝对可能。

假设你有两个样式表，正如你所提到的那样：

<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/day/style.css" rel="stylesheet" type="text/css">

main.css将保存您的结构（位置，尺寸等）CSS，而day / style.css将保存您的设计（颜色，动画等）CSS。

如果您的css/main.css有以下CSS：

#main_header {
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:300px;
}

#content_container{
    width: 80%;
    position:absolute; 
    top: 350px;
    left: 10%;
}

您可以按如下方式添加样式（在css/day/style.css中）：

#main_header {
    background-color: #00F;
}

#content_container{
    color: #F00;
    background-color: #0F0;
}

你也可以覆盖和'锁定'样式（在css/day/style.css中），如下所示：

#main_header {
    height: 200px; /* override */
}

#content_container{
    position: relative !important; /* override and 'lock' */
}

作为最后一点，您需要确保正在加载CSS文件并确保HTML格式正确。使用浏览器Developer Tool / Firebug确保加载CSS。例如，在Chrome中，单击名为Network的Developer Tool（F12）选项卡并重新加载页面将告诉您文件是否正在加载ok（200/304）或是否存在问题（即404,403,500等））

我想使用多个CSS文件

1 个答案: