我的 CSS 文件已连接并且可以正常使用除 h1 和 class container-fluid 之外的所有元素，我也在使用 bootstrap
My CSS file connected and working fine with all elements except h1 and a class container-fluid and I am using bootstrap too
当我为 class 'container-fluid' 声明内联样式时，它工作正常，但是当我将该样式转换为 CSS 时，它不起作用，我也无法修改我的 h1 标签但我的标题 ID 工作正常，这意味着我的 CSS 已正确连接。其实我是在修改bootstrap classes。
这是我的主HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
<!-- FONT-AWESOME -->
<script src="https://kit.fontawesome.com/78e50f3289.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">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 col-md-12 col-sm-12">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-app-store"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg">
<i class="fab fa-google-play"></i> Download</button>
</div>
<div class = "col-lg-6 col-md-12 col-sm-12">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
** 我的 Css**
#title{
background-color:#ff4c68;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
color: #fff;
}
.container-fluid{
padding:3% 15%;
}
.navbar-brand{
font-family: 'Ubuntu';
font-size: 2.3rem;
line-height-bottom: 5;
}
希望CSS在<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
样式表会覆盖您在 styles.css
中包含的 h1 标签的样式
要解决此问题：
1)您可以使用 !important 来应用您的特定样式。它给予 属性 高权重并忽略其他后续规则。
#title{
background-color:#ff4c68;
}
h1 {
font-family: 'Montserrat', sans-serif !important;
font-size: 3rem !important;
line-height: 1.5 !important;
color: #fff !important;
}
.container-fluid{
padding:3% 15%;
}
.navbar-brand{
font-family: 'Ubuntu';
font-size: 2.3rem;
line-height-bottom: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
<!-- FONT-AWESOME -->
<script src="https://kit.fontawesome.com/78e50f3289.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">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 col-md-12 col-sm-12">
<h1 >Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-app-store"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg">
<i class="fab fa-google-play"></i> Download</button>
</div>
<div class = "col-lg-6 col-md-12 col-sm-12">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
2)您还可以在单独的 class 的帮助下应用您的样式。 Class 中的属性比标签中的属性获得更高的优先级。
#title{
background-color:#ff4c68;
}
.headerclass {
font-family: 'Montserrat', sans-serif ;
font-size: 3rem ;
line-height: 1.5 ;
color: #fff ;
}
.container-fluid{
padding:3% 15%;
}
.navbar-brand{
font-family: 'Ubuntu';
font-size: 2.3rem;
line-height-bottom: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
<!-- FONT-AWESOME -->
<script src="https://kit.fontawesome.com/78e50f3289.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">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 col-md-12 col-sm-12">
<h1 class="headerclass">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-app-store"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg">
<i class="fab fa-google-play"></i> Download</button>
</div>
<div class = "col-lg-6 col-md-12 col-sm-12">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
我通过阅读一些文档自己纠正了它，如果你想玩 bootstrap [，你必须将你的 bootstrap link 放在你的自定义 CSS 之上=12=] 或编辑它。
当我为 class 'container-fluid' 声明内联样式时，它工作正常，但是当我将该样式转换为 CSS 时，它不起作用，我也无法修改我的 h1 标签但我的标题 ID 工作正常，这意味着我的 CSS 已正确连接。其实我是在修改bootstrap classes。 这是我的主HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
<!-- FONT-AWESOME -->
<script src="https://kit.fontawesome.com/78e50f3289.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">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 col-md-12 col-sm-12">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-app-store"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg">
<i class="fab fa-google-play"></i> Download</button>
</div>
<div class = "col-lg-6 col-md-12 col-sm-12">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
** 我的 Css**
#title{
background-color:#ff4c68;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
color: #fff;
}
.container-fluid{
padding:3% 15%;
}
.navbar-brand{
font-family: 'Ubuntu';
font-size: 2.3rem;
line-height-bottom: 5;
}
希望CSS在<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
样式表会覆盖您在 styles.css
要解决此问题：
1)您可以使用 !important 来应用您的特定样式。它给予 属性 高权重并忽略其他后续规则。
#title{
background-color:#ff4c68;
}
h1 {
font-family: 'Montserrat', sans-serif !important;
font-size: 3rem !important;
line-height: 1.5 !important;
color: #fff !important;
}
.container-fluid{
padding:3% 15%;
}
.navbar-brand{
font-family: 'Ubuntu';
font-size: 2.3rem;
line-height-bottom: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
<!-- FONT-AWESOME -->
<script src="https://kit.fontawesome.com/78e50f3289.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">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 col-md-12 col-sm-12">
<h1 >Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-app-store"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg">
<i class="fab fa-google-play"></i> Download</button>
</div>
<div class = "col-lg-6 col-md-12 col-sm-12">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
2)您还可以在单独的 class 的帮助下应用您的样式。 Class 中的属性比标签中的属性获得更高的优先级。
#title{
background-color:#ff4c68;
}
.headerclass {
font-family: 'Montserrat', sans-serif ;
font-size: 3rem ;
line-height: 1.5 ;
color: #fff ;
}
.container-fluid{
padding:3% 15%;
}
.navbar-brand{
font-family: 'Ubuntu';
font-size: 2.3rem;
line-height-bottom: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
<!-- FONT-AWESOME -->
<script src="https://kit.fontawesome.com/78e50f3289.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">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 col-md-12 col-sm-12">
<h1 class="headerclass">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-app-store"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg">
<i class="fab fa-google-play"></i> Download</button>
</div>
<div class = "col-lg-6 col-md-12 col-sm-12">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
我通过阅读一些文档自己纠正了它，如果你想玩 bootstrap [，你必须将你的 bootstrap link 放在你的自定义 CSS 之上=12=] 或编辑它。