有一个单独的CSS文件对运行的代码有影响吗?

时间:2016-05-20 14:30:40

标签: html css

我正在学习CSS和HTML,我在本地创建了一个模板,第一次我有一个单独的本地CSS文件,在这个文件中,主体不会被设置样式但是div是,第二次我试图包含HTML主体中的CSS,而不是单独的CSS文件,一切正常。

第一次,div被设计了样式但是身体没有。当创建一个单独的CSS文件时:

<!DOCTYPE html>
<html>
<head>
    <title>Quote Machine</title>
    <script src="scripting.js"></script> 
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script   src="https://code.jquery.com/jquery-2.2.3.js"   integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="   crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
</style>
</body>
</html>

<!-- separate CSS file-->
    body {
        background-color:black;
    }   


div {
    background-color:yellow;
}

第二次,当CSS在HTML文件中时,所有内容都按照要求设置样式:

<!DOCTYPE html>
<html>
<head>
    <title>Quote Machine</title>        
    <script src="scripting.js"></script> 
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script   src="https://code.jquery.com/jquery-2.2.3.js"   integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="   crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

<body>
<div>hello</div>

<style>

body {
    background-color:black;
}   

div {
    background-color:yellow;
}

</style>

</body>
</html>

3 个答案:

答案 0 :(得分:6)

您需要在引导程序之后包含样式表,以覆盖默认的引导样式。

在您的第一个示例中发生的是它正在加载样式表,然后加载引导程序样式表。

在第二个示例中,它会加载样式表,然后是引导样式表,然后使用您在html中声明的样式覆盖引导样式表。

答案 1 :(得分:1)

除了M P的答案,在你的第二个例子中,使用元素作为标签的子标签是不正确的html。它们属于该部分。

答案 2 :(得分:1)

您的 style.css在您的引导程序文件之前是comimg。 这需要反过来。你的风格在内部工作的原因是因为dom是最后编译的,并且会覆盖任何不包含!important的外部样式。

示例

第4个优先级

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

第三优先

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

第二优先级

<head>
<style></style>
</head>

第一优先级

<div style="color:red;"></div>

所有工作都按此顺序进行。

希望这有帮助