Почему мой тег ссылки не работает должным образом в HTML?

Это кажется простой вещью, но я не могу понять, что происходит сейчас.
Это мой код

<!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, то какой бы селектор ни был первым, он не будет работать в веб-браузере, тогда как некоторые селекторы в файле style.css работают. И я не думаю, что тег ссылки неверен, так как файл style.css находится в той же папке, что и исходный HTML-файл. Я действительно хочу знать, почему мой файл style.css работает частично. Заранее спасибо!

Источник

3 ответа

Решение

Просто удалите тег стиля из файла CSS и проверьте. Вроде работает.

Источник

Попробуйте этот код. Нет необходимости использовать тег стиля в файле 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>

Источник

Удалите тег стиля из файла css, он будет работать.

Источник
Другие вопросы по тегам