Вот краткий пример клона веб-сайта, который я пытался сделать во время обучения. Это моя веб-страница .
Мне нужно Bootstrap на моей странице и включить его из CDN. Кроме того, я заметил предыдущий вопрос, и мой пользовательский файл CSS был поверх файла Bootstrap. Однако я должен предоставить !important каждому CSS свойству, которое я хочу применить к моему файлу.
Вот мой HTML Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog - Online Dog Meeting Site</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<section id="title">
<div class="topcontainer">
<div class="container-fluid ">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark topbar ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">tinDog</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Sign up</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="home-container">
<div class="row">
<div class="col-lg-6 ">
<h1 class="dog-header">Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-btn"><i class="fab fa-google-play"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-btn"><i class="fab fa-apple"></i> Download</button>
</div>
<div class="col-lg-6 ">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
, ниже мой CSS код:
.topcontainer
{
padding: 3% 15%;
}
#title
{
background-color: #ff4c68;
}
.home-container{
margin-top: 50px;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem !important;
line-height: 1.5 !important;
color:white;
}
/* Navabar Styling*/
.navbar
{
padding: 0 0 4.5rem !important;
}
.navbar-brand
{
font-family: 'Ubuntu', sans-serif;
font-size: 2.5rem !important;
font-weight: bold;
}
.nav-item
{
padding: 0 18px;
font-weight: 200;
font-size: 1.2rem; 0
}
.nav-link:hover{
border-bottom: 1px solid white;
opacity: 100%;
}
/* Download Buttons */
.download-btn
{
margin: 5% 3% 5% 0;
}
.title-image{
width: 60% ;
transform: rotate(25deg);
}
Как вы можете видеть, если я удаляю !important для CSS - свойства, такие как font-size и line-height, CSS не применяется. Что происходит?