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

【问题标题】：I can not link my html pages with the external sheet CSS我无法将我的 html 页面与外部工作表 CSS 链接
【发布时间】：2018-12-06 22:29:59
【问题描述】：

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页面。非常感谢你，如果你能帮助我，我会很高兴。

【问题讨论】：

检查我更新的答案。我认为您还没有将课程添加到您的标题中。

标签： html css hyperlink

【解决方案1】：

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

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

<head>

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

</head>


<body>

    ... page HTML ...

</body>

您提供的 sn-p 可以正常工作，您在演示 HTML 中拥有的唯一 CSS 样式（我想这是一个精简的示例）是 body 标记。

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

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

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

我在下面展示了一个有效的 sn-p。

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>

【讨论】：

不知道为什么你投了反对票，但我同意点符号表示你指的是一个元素类。看到他在他的元素中没有一个类，我放弃了投票，即使他的身体背景颜色应该是黑色，上边距为 45px。

【解决方案2】：

您的 css 正在运行，但您已将正文背景颜色设置为黑色，并且您的文本也是黑色

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

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

【讨论】：