拥有单独的CSS文件会影响代码运行吗？
[英]Does having a separate CSS file have an effect on the code running?
问题描述
I am learning CSS and HTML, and I was creating a template locally, first time I had a separate local CSS file, in this file the body will not be styled but a div was, the second time I tried to include the CSS in the HTML body and not in a separate CSS file and everything worked fine. 
我正在学习CSS和HTML，并且是在本地创建模板的，第一次是有一个单独的本地CSS文件，在此文件中，将不对主体进行样式设置，而是对div进行样式化，第二次，我尝试将CSS包括在HTML正文，而不是在单独的CSS文件中，一切正常。
First time, the div was styled but the body was not.when a separate CSS file was created: 第一次设置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;
}
Second time, everything was styled as required when the CSS was inside the HTML file: 第二次，当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 个解决方案
解决方案1
6 已采纳 2016-05-20 14:34:38
You need to include your stylesheet after the bootstrap one for it to override the default bootstrap styling. 您需要在引导程序之一之后包含样式表，以覆盖默认的引导程序样式。
What's happening in your first example is it's loading your stylesheet, then loading the bootstrap stylesheet. 第一个示例中发生的事情是先加载样式表，然后加载引导样式表。
In the second example, it's loading your stylesheet, then the bootstrap stylesheet, then overriding the bootstrap stylesheet with the styling you've declared in the html. 在第二个示例中，它先加载样式表，然后加载引导程序样式表，然后使用您在html中声明的样式覆盖引导程序样式表。
解决方案2
1 2016-05-20 14:37:04
In addition to MP's answer, in your second example, using elements as child tags of tags is not proper html. 除了MP的答案外，在您的第二个示例中，将元素用作标签的子标签不是正确的html。 They elements belong in the section. 它们的元素属于这一部分。
解决方案3
1 2016-05-20 14:43:24
Your style.css is comimg before your bootstrap file . 您的style.css在引导文件之前是comimg 。 This needs to be the other way around . 这需要反过来 。 The reason your style is working internally is because the dom is compiled last and will override any external styles that do not include !important . 您的样式在内部起作用的原因是因为dom是最后编译的，它将覆盖不包含！important的所有外部样式。
Example 例
4rd Priority 第四优先
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
3rd Priority 第三优先
<link href="style.css" rel="stylesheet" type="text/css">
2nd Priority 第二优先
<head>
<style></style>
</head>
1st Priority 第一优先
<div style="color:red;"></div>
All work in this order . 所有工作都按此顺序进行。
Hope this helps 希望这可以帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.