拥有单独的CSS文件会影响代码运行吗？

Question

我正在学习CSS和HTML，并且是在本地创建模板的，第一次是有一个单独的本地CSS文件，在此文件中，将不对主体进行样式设置，而是对div进行样式化，第二次，我尝试将CSS包括在HTML正文，而不是在单独的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>

Answer 1

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

第一个示例中发生的事情是先加载样式表，然后加载引导样式表。

在第二个示例中，它先加载样式表，然后加载引导程序样式表，然后使用您在html中声明的样式覆盖引导程序样式表。

Answer 2

除了MP的答案外，在您的第二个示例中，将元素用作标签的子标签不是正确的html。 它们的元素属于这一部分。

Answer 3

您的style.css在引导文件之前是comimg 。 这需要反过来 。 您的样式在内部起作用的原因是因为dom是最后编译的，它将覆盖不包含！important的所有外部样式。

例

第四优先

<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>

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

希望这可以帮助

拥有单独的CSS文件会影响代码运行吗？

问题描述

3 个解决方案

解决方案1
6 已采纳 2016-05-20 14:34:38

解决方案2
1 2016-05-20 14:37:04

解决方案3
1 2016-05-20 14:43:24

拥有单独的CSS文件会影响代码运行吗？

问题描述

3 个解决方案

解决方案1 6 已采纳 2016-05-20 14:34:38

解决方案2 1 2016-05-20 14:37:04

解决方案3 1 2016-05-20 14:43:24

解决方案1
6 已采纳 2016-05-20 14:34:38

解决方案2
1 2016-05-20 14:37:04

解决方案3
1 2016-05-20 14:43:24