你好^^我正在一个小型的HTML / CSS网站上工作但没有得到什么。我有以下html页面：
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
h1 {
font-family: myFirstFont;
font-weight: bold;
font-size: 350%;
text-align: left;
}
.centered {
text-align: left;
}
.container-fluid {
width: 100%;
}
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: gray;
color: white;
text-align: center;} <!DOCTYPE html>
<html lang="de">
<head>
<!-- Latest compiled and minified CSS for using bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript for using bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" rel="main stylesheet" href="css/main.css"/>
<!-- character set -->
<meta charset="utf-8">
<!-- page's author -->
<meta name="author" content="author@mail.xy">
<!-- responsive to mobile devices. width=device-width sets width accordingly to device. initial-scale=1" set initial zoom level when page is first loaded. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Sites title -->
<title>testseite</title>
</head>
<body>
<!-- navigation bar --!>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<img class="navbar-left" src="imgs/le-logo.png" width="15%" alt="Let'Encrypt Logo">
<a class="navbar-brand" href="#"> Testseite</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Start</a></li>
<li><a href="system.php">Aufbau des Systems</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
</ul>
</div>
</nav>
<!-- bootstrap container definition to implement sidebar--!>
<div id="sidebar" class="col-sm-3"></div>
<div class="container-fluid">
<div class="col-sm-9">
<!-- Content -->
<h1>Testseite 2018 </h1>
<p class="centered">Diese Webseite dient als Test zur TLS-Zertifizierung durch Let's Encrypt und wurde mit HTML, CSS, PHP und Bootstrap erstellt.</p>
<div class="row">
<div class="col-sm-3">
<img class="img-rounded" src="imgs/html-logo.png" alt="HTML-Logo" width="75%">
</div>
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img-rounded" src="imgs/css-logo.png" alt="CSS-Logo" width="75%">
</div>
</div>
<br>
<div class="row">
<div class="col-sm-3">
<img class="img-rounded" src="imgs/PHP-Logo.png" alt="PHP-Logo" width="75%">
</div>
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img-rounded" src="imgs/bootstrap.png" alt="Bootstrap-Logo" width="75%">
</div>
</div>
<div id="footer" class="col-sm-12">
<p>Author</p>
<p>Enterprise</p>
<p>2018</p>
<img src="imgs/logo_2.png" alt="img_descp">
</div>
<!-- jQuery library for using bootstrap-->
</body>
</html>
我已经标记了页脚语法，因为您可以看到我已经添加了一个ID，之前在课程中尝试了它并且它已经工作了一段时间，直到我编辑了图像。
html文本以我想要的方式正确显示，但CSS未应用。在h1中我可以看到它正常工作但是当我检查页脚div时，chrome并没有显示应用的主要css。感谢所有有猜测的人，因为我必须使用html，已经有一段时间了。
答案 0 :(得分：4)
您在<link>代码的rel媒体资源中输入了无效值。
变化：
<link type="text/css" rel="main stylesheet" href="css/main.css"/>
要：
<link type="text/css" rel="stylesheet" href="css/main.css"/>