Question

这似乎很简单，但我现在无法掌握正在发生的事情。
这是我的代码。

<!DOCTYPE html>
<html>

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

<body>
  <h1><a href="Cover.html">Welcome!</a></h1>
  <p>Hi!
  </p>
  <div id="split">
      <img src="MyPhoto.jpg" height=300px>
  <dl>
    <dt><a href="About.html">About</a></dt>
    <dt><a href="Education.html">Education</a></dt>
    <dt><a href="Projects.html">Projects</a></dt>
    <dt><a href="Interests.html">Interests</a></dt>
    <dt><a href="Contacts.html">Contacts</a></dt>
  </dl>
</div>
</body>
</html>

这是链接的'style.css'文件

<style>
h1 {
  text-align: center;
  font-size: 430%;
  margin-top: 20px;
  margin-bottom: 10px;
  color: black;
  font-family: Impact, Charcoal, sans-serif;
  text-decoration-line:none;
}

p {
  margin-left: 20px;
  font-size: 95%;
  font-family: "verdana";
}

dt {
  margin: 25px 0;
}

#split {
  display: grid;
  grid-template-columns: 300px 1fr;
}

#split a {
  text-decoration-line: none;
  font-size: 105%;
  color: salmon;
  font-family: "verdana";
    }

img {
  margin-left: 30px;
}

</style>

我的问题是style.css文件中的第一个标签选择器似乎无法正常工作。因此，如果我弄乱了style.css文件中的顺序，那么首先出现的选择器在Web浏览器中不起作用，而style.css文件中的某些选择器正在工作。而且我不认为链接标记是错误的，因为style.css文件与原始html文件位于同一文件夹中。我真的想知道为什么我的style.css文件部分工作。提前谢谢！

Answer 1

只需从css文件中删除样式标记并检查即可。它似乎有效。

Answer 2

试试这段代码。无需在css文件中使用 样式标记 。

h1 {
  text-align: center;
  font-size: 430%;
  margin-top: 20px;
  margin-bottom: 10px;
  color: black;
  font-family: Impact, Charcoal, sans-serif;
  text-decoration-line:none;
}

p {
  margin-left: 20px;
  font-size: 95%;
  font-family: "verdana";
}

dt {
  margin: 25px 0;
}

#split {
  display: grid;
  grid-template-columns: 300px 1fr;
}

#split a {
  text-decoration-line: none;
  font-size: 105%;
  color: salmon;
  font-family: "verdana";
    }

img {
  margin-left: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Welcome!</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1><a href="Cover.html">Welcome!</a></h1>
  <p>Hi!
  </p>
  <div id="split">
      <img src="MyPhoto.jpg" height=300px>
  <dl>
    <dt><a href="About.html">About</a></dt>
    <dt><a href="Education.html">Education</a></dt>
    <dt><a href="Projects.html">Projects</a></dt>
    <dt><a href="Interests.html">Interests</a></dt>
    <dt><a href="Contacts.html">Contacts</a></dt>
  </dl>
</div>
</body>
</html>

为什么我的链接标记在html中无法正常工作？

2 个答案: