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

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

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

In addition to M P's answer, in your second example, using elements as child tags of tags is not proper html. They elements belong in the section.

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

#3

Your style.css is comimg before your bootstrap file . 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 .

你的style.css在你的bootstrap文件之前是comimg。这需要反过来。你的风格在内部工作的原因是因为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

希望这可以帮助

#1