未应用 CSS，无法弄清楚原因。试图改变字体。这以前有效，所以不知道为什么现在不行了。 CSS 和 html 文件在同一个文件夹中。在 python/bootstrap/flask/VSC 中工作。这是我的 CSS:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Staatliches');
.container-fluid {
color: red;
font-family:'Staatliches', cursive;
}
body {
font-family: 'Staatliches', cursive;
}
这是我的 html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('hello_world')}}"><img src="{{url_for('static', filename='img/logo.png')}}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crap</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Crud</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cheesey Potato</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Scorpion</a>
</li>
</ul>
</div>
</div>
</nav>
<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{url_for('static', filename='img/background.png')}}">
<div class="carousel-caption">
<h1 class="display-2">HELLO!</h1>
<h3>WELCOME</h3>
<button type="button" class="btn btn-outline-light btn-lg">click here</button>
<button type="button" class="btn btn-primary btn-lg">no click here actually</button>
</div>
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background2.png')}}">
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='img/background3.png')}}">
</div>
</div>
</div>
<!--- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">This is an example site.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></a>
</div>
</div>
</div>
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Morning!</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Welcome to my website</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-fish fa-5x text-danger"></i>
<h3>Fish</h3>
<p>Browse freshwater and exotic fish</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fas fa-dog fa-5x"></i>
<h3 class="text-danger">Dogs</h3>
<p>Browse our pedigrees</p>
</div>
<div class="col-sm-12 col-md-4">
<i class="fas fas fa-otter fa-5x"></i>
<h3>Otters</h3>
<p>Check out our new range of otters</p>
</div>
</div>
<hr class="my-4">
</div>
<!--- Two Column Section -->
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-12 col-lg-6">
<h2>If you build it...</h2>
<p>According to Platts estimates and to thermal coal traders who spoke to Platts,
Russian producers continue to seek domination on the European market and have been
putting in a lot of effort to grab more market shares on the Asian markets such as South
Korea and Taiwan.</p>
<p>Last year, the average free on board (FOB) coal prices for the Atlantic and Pacific markets were
both higher compared to 2017, which could be a big incentive for Russia to continue producing and
exporting more coal to seaborne destinations, according to Platts.</p>
<p>Russia’s Energy Minister Alexander Novak briefed on Thursday President Vladimir Putin on the Russian
energy sector production in 2018, saying that the coal production of around 433 million tons was
planned to be reached in 2020. Russia plans to invest around $22.4 billion
(1.5 trillion Russian rubles) in its coal industry and port infrastructure, Novak told Putin.</p>
</div>
</div>
</div>
当我在本地主机中重新加载页面时，没有应用任何更改。应用对 HTML 所做的任何更改，它只是 css。感谢任何帮助，谢谢。
最佳答案
只是尝试从标题请求字体的 css 文件，而不是通过导入它们
<head>
...
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
然后在网络面板中检查正在加载文件
关于html - 未应用 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54184553/