Я создаю веб-сайт flask, в котором у меня есть файл base. html и многие другие веб-страницы. В строке css работает отлично, но внутренний css и внешний css нет. Я пытаюсь удалить подчеркивание из ссылок, говоря text-decoration:none;, и это отлично работает через встроенный, но не работает внутри. Я также хотел бы добавить, что некоторые коды css работают, например, я могу изменить размер своих карт с помощью внутреннего css, как указано ниже.
base. html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div>
<style>
{% block style %}
{% endblock %}
</style>
</div>
<title>Sh</title>
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="background-color: #d9d9d9;">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Sh</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="{{url_for('home')}}">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="{{url_for('education')}}">Education</a>
<a class="nav-item nav-link" href="#">Experience</a>
<!-- <a class="nav-item nav-link disabled" href="#">Disabled</a> -->
</div>
</div>
</nav>
{% block body %}
{% endblock %}
</body>
</html>
образование. html
{% extends "base.html" %}
{% block style %}
.card{
height:16.5rem;
}
a {
text-decoration:none;
}
{% endblock %}
{% block body %}
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<table cellpadding="10px" style="width: 18rem; margin-left: 10%; margin-top: 2%;">
<tr>
<td>
<div class="card" style="width: 18rem; margin-left: 10%; margin-top: 2%;">
<div class="card-body">
<center><h5 class="card-title">College: </h5></center>
<p class="card-text"><!-- College --></p><p>Computer Science Engineering</p><p>2014-2018</p>
</div>
<ul class="list-group list-group-flush">
<a href="#"><li class="list-group-item">Activities</li></a>
<a href = "{{url_for('hacks')}}" ><li class="list-group-item">Hackathons</li></a>
</ul>
<!-- <div class="card-body"> -->
<!-- <a href="#" class="card-link">Card link</a> -->
<!-- <a href="#" class="card-link">Another link</a> -->
<!-- </div> -->
</div>
</td>
<td>
<div class="card" style="width: 18rem; margin-left: 10%; margin-top: 2%;">
<div class="card-body">
<center><h5 class="card-title">School: DPS</h5></center>
<p class="card-text"></p><p><b>10+2:</b> PCM + Economics</p><p>2004-2014</p>
</div>
<ul class="list-group list-group-flush">
<a href="#" class = "nounder" data-toggle="popover" data-trigger="focus" title="CGPA" data-content="9.8"><li class="list-group-item">Class 10</li></a>
<a href = "#" data-toggle="popover" data-trigger="focus" title="Percentage" data-content="93%"><li class="list-group-item">Class 12</li></a>
</ul>
</div>
</td>
<td>
<div class="card" style="width: 18rem; margin-left: 10%; margin-top: 2%;">
<div class="card-body">
<center><h5 class="card-title">CFA</h5></center>
<p class="card-text"></p><p>Passed CFA Level 1</p><p>From </p><p>2019</p>
</div>
<ul class="list-group list-group-flush">
<a href="" style="text-decoration:none"><li class="list-group-item">l1</li></a>
</ul>
</div>
</td>
<td>
<div class="card" style="width: 18rem; margin-left: 10%; margin-top: 2%;">
<div class="card-body">
<center><h5 class="card-title">Familiar Languages</h5></center>
<p class="card-text"></p><p>Given blelow is the list of </p><p>languages I'm familiar with</p>
</div>
<ul class="list-group list-group-flush">
<a href="{{url_for('spoken')}}" style="text-decoration:none"><li class="list-group-item">Spoken</li></a>
<a href = "{{url_for('computer')}}"><li class="list-group-item">Computer</li></a>
</ul>
</div>
</td>
</table>
{% endblock %}
Мой обновленный css ... все, кроме a, работает
{% block style %}
.card{
height:16.5rem;
width:18rem;
margin-left:10%;
margin-top:2%;
}
table{
margin-left:auto;
margin-right:auto;
margin-top:2%;
}
a {
text-decoration:none;
}
{% endblock %}