css 不适用于页脚 div

Question

你好^^ 我正在一个小型 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，之前使用 class 尝试过它并且它工作了一段时间，直到我编辑了图像。

html 文本以我想要的方式正确显示，但未应用 CSS。在 h1 中，我可以看到它在工作，但是 chrome 没有显示在我检查页脚 div 时应用的主要 css。感谢任何有猜测的人，自从我不得不与 html 一起工作以来已经有一段时间了。

Answer 1

您在 <link> 标签的 rel 属性中输入了无效值。

变化：

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

收件人：

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

css 不适用于页脚 div

css doesn't apply in footer div

html

css

footer