Question

body{
  background-color: black;
  margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;
}
   
.text {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode:multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin:0;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
}
    
ul li {
  float: left;
  list-style: none;
  margin-right: 1em; 
}
 
li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 10px;
  padding-top: 30px;
  margin-left: 155px;
}
 
li a:hover {
  color: #740001;
}

<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>


<body>  
    
<h1>About me</h1>
   
    
</body>


</html>

----------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    
<h1>Major</h1>
    
    </body>




</html>

--------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body class="gallery">
    
<h1>Gallery</h1>
    
</body>




</html>
-------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body class="contact">
    
<h1>contact</h1>
    
</body>




</html>

我正在创建一个用于学校的网站...但是我无法将不同的HTML页面链接到CSS（用于更改背景颜色等...）我有4个HTML页面，但我没有知道如果我必须添加div或类似的东西，可以请我将这些html与主要的CSS链接起来吗？ ..我要发布CSS页面和三个html页面。非常感谢，如果您能帮助我，我将非常高兴。

Answer 1

您需要将CSS样式表链接到每个页面，在这种情况下，您需要将CSS文件上传到服务器并引用它们。

公约规定将它们添加到<head>中，即：

<head>

    <link href="PATH_TO_CSS_FILE.css" rel="stylesheet">

</head>


<body>

    ... page HTML ...

</body>

您提供的代码片段应该可以正常工作，演示HTML中唯一的CSS样式（我想是一个压缩的示例）是body标签。

如果未将CSS样式应用于您的工作HTML页面，则可能是您未正确链接CSS样式表。您可以在浏览器中检查控制台以查看是否存在任何错误（即是否未加载样式表）。

如果您希望标题（h1使用您在.text中指定的效果，则需要将类添加到元素，即：

<h1 class="text">About Me</h1>

我在下面显示了一个有效的代码段。

body{
  background-color: black;
  margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;
}
   
.text {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode:multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin:0;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
}
    
ul li {
  float: left;
  list-style: none;
  margin-right: 1em; 
}
 
li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 10px;
  padding-top: 30px;
  margin-left: 155px;
}
 
li a:hover {
  color: #740001;
}

<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>


<body>  
    
<h1 class="text">About me</h1>
   
    
</body>


</html>

必须对每个元素应用类，以使样式生效。如果您希望所有标题都具有您所编码的发光效果等，那么您可能需要考虑在样式表中将.text更改为h1，这样您就不必每个都应用该类创建标题时。例如：

body{
  background-color: black;
  margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;
}
   
h1 {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode:multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin:0;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
}
    
ul li {
  float: left;
  list-style: none;
  margin-right: 1em; 
}
 
li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 10px;
  padding-top: 30px;
  margin-left: 155px;
}
 
li a:hover {
  color: #740001;
}

<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>


<body>  
    
<h1>About me</h1>
   
    
</body>


</html>

Answer 2

您的CSS正在工作，但是您已将主体背景颜色设置为黑色，并且文本也为黑色

尝试将您的第一个CSS规则替换为

body{
background-color: white;
margin-top: 45px;
}

我无法将html页面与外部工作表CSS链接

2 个答案: