嵌入式 CSS 在外部运行时无法运行

Question

所以我试图让我的页脚始终位于底部，但只是针对一个特定页面，而不是整个网站。为此，我使用了嵌入式 CSS （在 head 标签内），但没有用。我在我的主 css 中粘贴了相同的代码并且它起作用了。请帮我解决这个问题。这是代码：

/*this works*/
body{
 margin: 0 auto;
 margin-top: -19vh;
 padding: 0;
 font-family: Caviar, "Times New Roman", sans-serif;
 float: clear;
 width: auto;
}
footer {
  font-style: italic;
  font-size: 0.9em;
  z-index: 10;
  text-align: center;
  background-color: #FFFF3D;
}
footer a{
 color: #000000;
}
footer a:hover{
 text-decoration: none;
}

<!doctype html>
<html lang="en">

<head>
  <title>About.</title>
  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet" type="text/css">

   
  <style>
  <!--very specific small CSS for this document-->
 footer{
  position: fixed;
  bottom: 0;
  width: 100%;
 }
  </style>
</head>
<!--big header-->
    <header>
      <h1 id="mainHeading">Check</h1>
    </header>
<!--close Big header-->

<!--Small Header-->
    <div id="headerSmall">
      <div id="hOneSmall">Check</div>
    </div>
<!--close small header-->

      <div id="background_one">
        <div class="small_head">About.</div>
  <br><br> <span style="font-size: 1.2em;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in laoreet orci. Vestibulum tortor justo, fringilla quis ante vitae, finibus efficitur neque. Duis semper dui nec ornare accumsan. Vestibulum vel cursus neque, sed viverra magna. Praesent vel velit nec velit rhoncus varius eu in nunc. Suspendisse convallis ante sit amet nulla hendrerit condimentum. Etiam placerat a turpis a dignissim. Praesent pretium dolor sit amet condimentum mattis. Quisque condimentum id neque dapibus hendrerit. Vivamus et metus nulla. Donec interdum velit in tellus gravida lobortis. Morbi lacinia venenatis elementum.<br></span><br>
  
  <span style="font-size: 0.8em; text-decoration: italic;">Got a suggest that we could add to our website? Or found any information that is incorrect? Please feel free to contact us at <a href="check.gmail.com">Check</a></span>
      </div>      <!--bg 1-->
    <footer>
      <div>
        <a href="validation/citation.pdf" target= "_blank">Citations</a>
        <br>Copyright &copy; owned by Student of College
      </div>
    </footer>
</body>
</html>

Answer 1

CSS中的注释会这样写

/* very specific small CSS for this document */

不是：

更正版本：

/*this works*/
body{
  margin: 0 auto;
  margin-top: -19vh;
  padding: 0;
  font-family: Caviar, "Times New Roman", sans-serif;
  float: clear;
  width: auto;
}
footer {
  font-style: italic;
  font-size: 0.9em;
  z-index: 10;
  text-align: center;
  background-color: #FFFF3D;
}
footer a{
  color: #000000;
}
footer a:hover{
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>About.</title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">


    <style>
      /*very specific small CSS for this document*/
      footer{
        position: fixed;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <!--big header-->
  <header>
    <h1 id="mainHeading">Check</h1>
  </header>
  <!--close Big header-->

  <!--Small Header-->
  <div id="headerSmall">
    <div id="hOneSmall">Check</div>
  </div>
  <!--close small header-->

  <div id="background_one">
    <div class="small_head">About.</div>
    <br><br> <span style="font-size: 1.2em;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in laoreet orci. Vestibulum tortor justo, fringilla quis ante vitae, finibus efficitur neque. Duis semper dui nec ornare accumsan. Vestibulum vel cursus neque, sed viverra magna. Praesent vel velit nec velit rhoncus varius eu in nunc. Suspendisse convallis ante sit amet nulla hendrerit condimentum. Etiam placerat a turpis a dignissim. Praesent pretium dolor sit amet condimentum mattis. Quisque condimentum id neque dapibus hendrerit. Vivamus et metus nulla. Donec interdum velit in tellus gravida lobortis. Morbi lacinia venenatis elementum.<br></span><br>

    <span style="font-size: 0.8em; text-decoration: italic;">Got a suggest that we could add to our website? Or found any information that is incorrect? Please feel free to contact us at <a href="check.gmail.com">Check</a></span>
  </div>      <!--bg 1-->
  <footer>
    <div>
      <a href="validation/citation.pdf" target= "_blank">Citations</a>
      <br>Copyright &copy; owned by Student College
    </div>
  </footer>
  </body>
</html>

嵌入式 CSS 在外部运行时无法运行

Embedded CSS not working while it does in external

html

css

position

footer