未应用CSS

时间:2019-01-14 15:36:49

标签: html css twitter-bootstrap

没有应用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>

当我在localhost中重新加载页面时,未应用任何更改。对HTML所做的任何更改都将被应用,仅是CSS。谢谢您的帮助。

2 个答案:

答案 0 :(得分:0)

只需尝试从头文件中请求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>

,然后在网络面板中检查文件是否正在加载

答案 1 :(得分:0)

似乎可以在我的CodePen中使用:

您确定没有关闭</body></html>标签不是原因吗?

也许为style.css文件声明相同的相对目录,例如:

<link href="./style.css" type="text/css" rel="stylesheet">

您检查了style.css文件的权限吗?