我的一些 CSS 属性在 .CSS 文件中不起作用，但是当我尝试内联 css 它工作正常我使用 bootstrap 4 一起使用
some of my CSS properties not working from .CSS file but when i try inline css it works fine am using bootstrap 4 along with it
每当我尝试给 h1 或 h3 或任何 img 提供 class 并尝试在我的 style.css 文件中进行编辑时，它不会进行任何更改，但是当我尝试内联 CSS 它工作正常。我正在使用 bootstrap 4.
我在这里添加了 CSS 内联，这就是它起作用的原因，但是当我尝试通过定位 class 在 style.css 中添加 CSS 时，它没有显示效果.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body {
font-family: "Montserrat";
}
#title {
background-color: #ff4c68;
color: #fff;
}
.container {
padding: 3% 15%;
}
p {
color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand {
font-family: "Ubuntu";
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-family: "Ubuntu";
font-size: 1.2rem;
font-weight: bold;
}
/* Download buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title image */
.title-image {
width: 60%;
transform: rotate(25deg);
}
/* feature sectiom */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* testimonial section */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff
}
#testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tindog</title>
<!-- css file link -->
<link rel="stylesheet" href="/css/styles.css">
<!-- font awsome kit -->
<script src="https://kit.fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script>
<!-- bootstrap css link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="padding: 0 0 4.5rem;">
<a class="navbar-brand" href="" style="font-size: 2.5rem">tindog.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1 style="font-family: Montserrat; font-size: 3.5rem; line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Elite Clientele </h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
在 Bootstrap
之后添加您的自定义 CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body {
font-family: "Montserrat";
}
#title {
background-color: #ff4c68;
color: #fff;
}
.container {
padding: 3% 15%;
}
p {
color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand {
font-family: "Ubuntu";
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-family: "Ubuntu";
font-size: 1.2rem;
font-weight: bold;
}
/* Download buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title image */
.title-image {
width: 60%;
transform: rotate(25deg);
}
/* feature sectiom */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* testimonial section */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff
}
#testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tindog</title>
<!-- font awsome kit -->
<script src="https://kit.fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script>
<!-- bootstrap css link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- css file link --> <!-- **Add Here Your Custom CSS** -->
<link rel="stylesheet" href="/css/styles.css">
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="padding: 0 0 4.5rem;">
<a class="navbar-brand" href="" style="font-size: 2.5rem">tindog.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1 style="font-family: Montserrat; font-size: 3.5rem; line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Elite Clientele </h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
这不起作用，因为您在 file.That 文件被忽略的原因之后放置了 bootstrap 文件。
将 bootstrap 文件放在顶部，将您的 css 文件放在 boostrap 的文件下面。
保持以下顺序：
Bootstrap文件
fontawesome 文件
你的 css 文件
就在关闭正文标签之前：
Bootstrap js文件
任何第三方 js 文件
你的js文件
通过这样做，您表示对我的文件有更多的偏好。
每当我尝试给 h1 或 h3 或任何 img 提供 class 并尝试在我的 style.css 文件中进行编辑时，它不会进行任何更改，但是当我尝试内联 CSS 它工作正常。我正在使用 bootstrap 4.
我在这里添加了 CSS 内联，这就是它起作用的原因，但是当我尝试通过定位 class 在 style.css 中添加 CSS 时，它没有显示效果.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body {
font-family: "Montserrat";
}
#title {
background-color: #ff4c68;
color: #fff;
}
.container {
padding: 3% 15%;
}
p {
color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand {
font-family: "Ubuntu";
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-family: "Ubuntu";
font-size: 1.2rem;
font-weight: bold;
}
/* Download buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title image */
.title-image {
width: 60%;
transform: rotate(25deg);
}
/* feature sectiom */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* testimonial section */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff
}
#testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tindog</title>
<!-- css file link -->
<link rel="stylesheet" href="/css/styles.css">
<!-- font awsome kit -->
<script src="https://kit.fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script>
<!-- bootstrap css link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="padding: 0 0 4.5rem;">
<a class="navbar-brand" href="" style="font-size: 2.5rem">tindog.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1 style="font-family: Montserrat; font-size: 3.5rem; line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Elite Clientele </h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
在 Bootstrap
之后添加您的自定义 CSS@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body {
font-family: "Montserrat";
}
#title {
background-color: #ff4c68;
color: #fff;
}
.container {
padding: 3% 15%;
}
p {
color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand {
font-family: "Ubuntu";
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-family: "Ubuntu";
font-size: 1.2rem;
font-weight: bold;
}
/* Download buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title image */
.title-image {
width: 60%;
transform: rotate(25deg);
}
/* feature sectiom */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* testimonial section */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff
}
#testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tindog</title>
<!-- font awsome kit -->
<script src="https://kit.fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script>
<!-- bootstrap css link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- css file link --> <!-- **Add Here Your Custom CSS** -->
<link rel="stylesheet" href="/css/styles.css">
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="padding: 0 0 4.5rem;">
<a class="navbar-brand" href="" style="font-size: 2.5rem">tindog.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1 style="font-family: Montserrat; font-size: 3.5rem; line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Elite Clientele </h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart fa-4x"></i>
<h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
这不起作用，因为您在 file.That 文件被忽略的原因之后放置了 bootstrap 文件。
将 bootstrap 文件放在顶部，将您的 css 文件放在 boostrap 的文件下面。
保持以下顺序：
Bootstrap文件
fontawesome 文件
你的 css 文件
就在关闭正文标签之前：
Bootstrap js文件
任何第三方 js 文件
你的js文件
通过这样做，您表示对我的文件有更多的偏好。