出于某种原因，并非所有的CSS都应用于我的网页。链接不是问题，因为某些风格正在发挥作用。
具体而言，div ID banner的文字和背景颜色已应用，main-body类的元素具有背景颜色和圆角，其他内容正在运行。但是body没有背景颜色，main-body元素没有边距，还有其他奇怪的东西。
我知道有很多代码需要查看，但现在是：
body {
background-color: #c0c0c0;
position: relative;
}
#banner {
width: 100%;
background-color: #900000;
color: white;
text-align: center;
padding: 10px;
}
.navbar {
border-radius: 0px;
margin-bottom: 0px;
}
.anchor {
padding-top: 50px;
}
.header {
color: #900000;
}
.main-body {
margin: 20px 50px;
padding: 10px;
background-color: #ddd;
border-radius: 20px;
font-size: 1.25em;
}
.portfolio {
width: 50%;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
}
.port-img {
width: 100%;
border-radius: 12px;
}
.fa {
color: #900000;
}<!DOCTYPE html>
<html>
<head>
<title>Collin Baker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootsrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target="#navbar">
<div id="banner">
<h1>Collin Baker</h1>
</div>
<nav class="navbar navbar-inverse" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Collin Baker</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#home"><span class="fa fa-home"></span> Home</a></li>
<li><a href="#resume"><span class="fa fa-file-text"></span> Résumé</a></li>
<li><a href="#portfolio"><span class="fa fa-folder"></span> Portfolio</a></li>
<li><a href="#news"><span class="fa fa-newspaper-o"></span> News</a></li>
<li><a href="#contact"><span class="fa fa-phone"></span> Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="anchor" id="home">
<div class="container-fluid header">
<h1>Home</h1>
<h2>"Our self image, strongly held, essentially determines what we become."<br/> - Maxwell Maltz</h2>
</div>
<div class="container-fluid main-body">
<p>Collin Baker. Average name, above average quality. As of now, there is no hard evidence proving that statement, but that's what I'm hoping this website will obtain. I may only be a sophomore in high school, but if you give me a chance to show you what I can do, you'll be giving yourself a chance to show your customers what you can do. Read on if you're interested.</p>
</div>
<div class="container-fluid main-body">
<p>I work with web development, as this page shows. I've also been working on learning app and video game development. I use Android Studio for the former, and Unity 5 for the latter. I learned graphic design, and know how to use Adobe Illustrator. I have experience with various programming languages, including Java and C#. I am capable of learning more as well, and have the ability to pick things up very quickly if need be.</p>
<p>Communication is a vitally important part of any industry, and is another skill I have. This can be attributed to Speech & Debate, in which I was a Varsity Policy Debater. My communicative abilities also come from my time in Model Arab League, which also gave me the oppurtunity to gain experience with the affairs of other countries, and quickly making decisions under stress.</p>
<p>Intelligence is also a useful quality no matter the situation. That being the case, I have a 4.0 GPA, and obtained an Academic All-State Selection. I am well able to learn and grow, and apply myself to my work in order to create the best possible outcome.</p>
</div>
</div>
<div class="anchor" id="resume">
<div class="container-fluid header">
<h1>Résumé</h1>
<h2>“Life without knowledge is death in disguise.”<br/> - Talib Kweli</h2>
</div>
<div class="container-fluid main-body">
<p>Donec suscipit ac metus vitae feugiat. In et tincidunt felis, quis rhoncus dui. Aenean sagittis, felis ut pharetra imperdiet, ligula sapien consectetur elit, vel dignissim turpis magna nec massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ac euismod metus. Donec non aliquam nulla. Sed pulvinar tortor sit amet ipsum tristique, eget mattis magna dignissim. Curabitur id nisi in tellus imperdiet porttitor ut et purus. Nam ornare metus a elit vestibulum tempus.</p>
</div>
</div>
<div class="anchor" id="portfolio">
<div class="container-fluid header">
<h1>Portfolio</h1>
<h2>"A gem cannot be polished without friction, nor a man perfected without trials."<br/> - Lucius Annaeus Seneca</h2>
</div>
<div>
<div class="container-fluid main-body text-center portfolio">
<img src="TestImages/dubai1.jpg" class="port-img">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sem lectus. Curabitur lobortis turpis id pulvinar porta. Phasellus condimentum purus sapien, sit amet volutpat lectus convallis quis.</div>
</div>
<div class="container-fluid main-body text-center portfolio">
<img src="TestImages/norway1.jpg" class="port-img">
<div>Vestibulum bibendum ipsum mi, at ultricies elit ullamcorper sit amet. Nullam ut lobortis eros, eu fringilla diam. Duis eget ullamcorper lectus.</div>
</div>
<div class="container-fluid main-body text-center portfolio">
<img src="TestImages/dubai2.jpg" class="port-img">
<div>Duis vel nibh eget sapien rutrum volutpat eu et felis. Proin blandit est diam, sed ultrices erat ultrices ut. Curabitur id nunc egestas, rutrum velit id, finibus ligula. Morbi ex ipsum, finibus a facilisis ut, ultrices id nisl. Aliquam lacus felis, sodales ut mi ac, facilisis tempus libero. Nunc mattis viverra venenatis.</div>
</div>
<div class="container-fluid main-body text-center portfolio">
<img src="TestImages/independenceday1.jpg" class="port-img">
<div>Maecenas egestas enim sit amet sapien mollis bibendum. Aliquam faucibus, mauris ut ultricies tempor, mauris nisl laoreet nulla, in scelerisque quam odio nec libero. Mauris dapibus molestie vulputate.</div>
</div>
</div>
</div>
<div class="anchor" id="news">
<div class="container-fluid header">
<h1>News</h1>
<h2>"Develop a passion for learning. If you do, you will never cease to grow."<br/> - Anthony J. D'Angelo</h2>
</div>
<div class="container-fluid main-body">
<p>Praesent non nisi molestie arcu cursus ultricies. Nulla et erat dignissim, egestas leo quis, venenatis urna. Curabitur pulvinar, neque sit amet ultrices accumsan, quam massa vulputate massa, tempor ultrices lorem ligula sit amet magna. Donec et tellus euismod, maximus ipsum a, elementum ipsum. Praesent venenatis elit sed libero suscipit fermentum. Phasellus facilisis quam a hendrerit pulvinar. In ut enim tempus lorem sollicitudin sollicitudin. Ut ullamcorper semper libero, eget maximus tortor faucibus sit amet. Suspendisse convallis nunc suscipit ultrices pellentesque. Phasellus ante nulla, auctor non consectetur id, efficitur eu nulla. Donec at ex malesuada, pellentesque leo sed, molestie justo. Aliquam sagittis euismod justo, sit amet volutpat sapien fringilla sed. Donec condimentum semper volutpat. Pellentesque id consequat elit. Nam iaculis sagittis porttitor.</p>
</div>
<div class="container-fluid main-body">
<p>Sed sodales leo id sem lobortis, non tincidunt neque sagittis. Vestibulum aliquam tortor vel justo imperdiet pretium. Aenean consectetur tempus consectetur. Phasellus ac suscipit ligula. Vivamus suscipit interdum lorem non porta. Praesent pretium neque et lacus iaculis rutrum. Aliquam enim augue, dapibus in arcu at, consectetur euismod ante. Praesent quis nulla vel justo ullamcorper tincidunt non et nisi. Quisque at tellus interdum, egestas massa sit amet, bibendum libero. Integer et vulputate leo, vulputate vestibulum metus. Aliquam aliquam nunc vel suscipit luctus. Donec placerat maximus interdum. Donec magna urna, malesuada ac euismod vitae, tincidunt pulvinar nisl. Ut elit massa, porttitor id pulvinar sed, eleifend eget libero. Nam volutpat mi luctus, faucibus nibh faucibus, fringilla sem.</p>
</div>
</div>
<div class="anchor" id="contact">
<div class="container-fluid header">
<h1>Contact</h1>
<h2>"The most important things in life are the connections you make with others."<br/> - Tom Ford</h2>
</div>
<div class="container-fluid main-body">
<p>Aenean iaculis risus rutrum, finibus diam eu, bibendum nulla. Suspendisse est orci, rutrum eget aliquam quis, fringilla aliquet purus. Sed dapibus justo id interdum tempor. Aliquam quis neque tortor. Donec ullamcorper dolor vel lacinia placerat. Donec lobortis elit et odio maximus dictum. Donec mauris magna, dictum vel ligula non, auctor dictum mi.</p>
</div>
</div>
</body>
</html>
答案 0 :(得分：2)
（1）似乎你的样式被覆盖了因为style.css被称为BEFORE bootstrap.css，所以如果bootstrap样式具有相同的特异性，它们将覆盖它们。
一个简单的解决方案是在bootstrap.css之后调用你的style.css。
（2）另一种选择是在你的css属性值之后使用！important。
例如......
body {
background-color: #c0c0c0 !important;
}
希望这可以帮助你。
答案 1 :(得分：1)
您的自举样式表将在您的自定义CSS之后应用。因此，他们可以（并且我认为）用他们应用的样式覆盖你的风格。只需切换链接的顺序，就可以按照自己的意愿使用。
答案 2 :(得分：0)
如果您想覆盖现有的样式，可以!important覆盖样式。
例如：
h1 {
color: blue;
}
h1 {
color: red
}
/* Or if you placed that before the color blue, that color will override color red. Place the desired color after or do: */
h1 {
color: red !important;
}<!DOOCTYPE html>
<html>
<head>
<title>?</title>
</head>
<body>
<h1>Color Red</h1>
</body>
</html>