Question

我有以下问题：
无论我在CSS文件中做了什么修改，它都不会影响我的目标HTML文件它之前被命名为“index.html”（Brackets以某种方式创建了一个副本 - 我是HTML / CSS的新手）并且修改仅发生在该页面上。我应该把样式表链接放在HTML代码中？头？身体？这是HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <Title>Acasa</Title>
  </head>
  <body background=".\images\colaj.jpg">
      <link rel="stylesheet" href=".\acasa\acasa.css">
      <embed src=".\music\fundal gloante.mp3" loop="true" autostart="true"                       hidden="true" > 
      <br/>
      <center>
         <img src=".\images\Presentation1.png"text-align: center; border="10" >
      </center>
    
<br/><br/>
     <center><ul>
       <li><a href="cuvant.html" >Cuvant inainte</a></li>
       <li><a href="\site\preview\neutralitate.html">Anii de neutralitate</a></li>
       <li><a href="galerie.html">Intrarea in razboi</a></li>
	   <li><a href="galerie.html">Razboiul</a></li>
	   <li><a href="colaj.html">Dambovita in razboi</a></li>
        <li<a href="C:\Users\Andrei\Documents\scoala\istorie\site\preview\T.html">Galerie Video</a></li>
       <li><a href="C:\Users\Andrei\Documents\scoala\istorie\site\preview\T.html">Galerie Foto</a></li>
       <li><a href="C:\Users\Andrei\Documents\scoala\istorie\site\preview\T.html">Bibliografie</a></li>
     </ul>
    </center> 
    <br/><br/><br/>
  </body>
</html>

而CSS：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: rgb(200,30,30);
    border: 1px solid #555;
}

li a {
    display: block;
    color: rgb(255,255,255);
    padding: 8px 16px;
    text-decoration: none;
}

li { margin: auto;font-family: "Arial Black", Gadget, sans-serif;
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: rgb(128,128,128);
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

有什么问题？对不起长码。请告诉我我犯的是什么错误，我对此完全不了解。

Answer 1

始终将CSS放在页面的头部

Answer 2

如下所示在head标签内：

<head>
<style type="text/css">
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: rgb(200,30,30);
    border: 1px solid #555;
}

li a {
    display: block;
    color: rgb(255,255,255);
    padding: 8px 16px;
    text-decoration: none;
}

li { margin: auto;font-family: "Arial Black", Gadget, sans-serif;
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: rgb(128,128,128);
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
  </style>
  </head>

Answer 3

将其放入header部分：

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

以下是我的某个网页的完整标题示例：

<head>
    <title>My Page</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

Answer 4

这可能不是编码问题。也许你的网页浏览器并不总是重新加载css。

在Opera中遇到很多，通常用ctrl+f5重新加载。

Answer 5

如果您想使用内部样式，那么您可以将css置于头部内的<style></style>块中。请参阅附件代码。

我建议您浏览MDN How CSS works页面并了解基础知识。还要检查如何通过内部样式表，外部样式表和外部样式表导入css。内联样式表。

<!DOCTYPE html>
<html>

  <head>

    <Title>Acasa</Title>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: rgb(200, 30, 30);
        border: 1px solid #555;
      }

      li a {
        display: block;
        color: rgb(255, 255, 255);
        padding: 8px 16px;
        text-decoration: none;
      }

      li {
        margin: auto;
        font-family: "Arial Black", Gadget, sans-serif;
        text-align: center;
        border-bottom: 1px solid #555;
      }

      li:last-child {
        border-bottom: none;
      }

      li a.active {
        background-color: rgb(128, 128, 128);
        color: white;
      }

      li a:hover:not(.active) {
        background-color: #555;
        color: white;
      }

    </style>
  </head>

  <body background=".\images\colaj.jpg">
    <link rel="stylesheet" href=".\acasa\acasa.css">
    <embed src=".\music\fundal gloante.mp3" loop="true" autostart="true" hidden="true">
    <br>
    <br>
    <center>
      <img src=".\images\Presentation1.png" text-align: center; border="10">
    </center>

    <br>
    <br>
    <br>
    <br>

    <center>
      <ul>
        <li><a href="cuvant.html">Cuvant inainte</a></li>
        <li><a href="\site\preview\neutralitate.html">Anii de neutralitate</a></li>
        <li><a href="galerie.html">Intrarea in razboi</a></li>
        <li><a href="galerie.html">Razboiul</a></li>
        <li><a href="colaj.html">Dambovita in razboi</a></li>
        <li><a href="C:\Users\Andrei\Documents\scoala\istorie\site\preview\T.html">Galerie Video</a></li>
        <li><a href="C:\Users\Andrei\Documents\scoala\istorie\site\preview\T.html">Galerie Foto</a></li>
        <li><a href="C:\Users\Andrei\Documents\scoala\istorie\site\preview\T.html">Bibliografie</a></li>
      </ul>
    </center>
    <br>
    <br>
    <br>
    <br>
    <br>
  </body>

</html>

Answer 6

由于您使用的是外部CSS文件，因此它应始终位于HTML页面的部分中。有关详细信息，请参阅https://www.w3schools.com/css/css_howto.asp。

Answer 7

对于您的具体问题，我同意其他答案。在<head>...</head>中加入CSS。

但是，根据您的浏览器，您的潜在问题可能是您在路径中使用反斜杠。使用正斜杠。尝试将样式表引用为./acasa/acasa.css（假设CSS文件实际上位于相对于html文件所在位置的子目录acasa中）。

Answer 8

{{1}}

您可以查看此网站for learn about first html and css notes

我应该在哪里将样式表链接放在html代码中？

8 个答案: