css - "link"这个元素在CSS修改网页样式的时候需要吗?

标签 css hyperlink

我正在研究这个例子:

<!DOCTYPE html>
<html>
<head>
<title>Introducing to CSS</title>
<link href="css/example.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h1>From Garden to Plate</h1>
<p> A <i>potager</i> or kitchen garden...</p>
<h2>What to plant</h2>
<p>Plant are chosen as...</p>
</body>
</html>

body {
font-family: Arial, Verdana, sans-serif;}
h1, h2 {
color: #ee3e80;}
p {
color: #665544;}

结果是我无法在我的网页上进行任何更改。 CSS 规则不起作用。我不知道为什么。我的第二个问题是:当我想用CSS修改网页的样式时,是否需要“link”元素?

最佳答案

如果你想让你的 CSS 正常工作,你可以通过两种主要方式来实现:

  1. 使用<style>标签。

您可以将 CSS 代码附在 <style></style> 中在head里面或 body像这样:

<style>
body {
   font-family: Arial, Verdana, sans-serif;
}
h1, h2 {
   color: #ee3e80;
}
p {
   color: #665544;
}
</style>
  1. 使用 <link>标签。

您的示例中已有这行代码:

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

假设您有一个包含 example.css 文件的 css 文件夹,您可以将您的样式放在那里,它也能正常工作。

通常使用第二个变体更可取,因为它将您的 CSS 保存在单独的文件中并且您的 HTML 保持干净。

关于css - "link"这个元素在CSS修改网页样式的时候需要吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47293100/

相关文章:

html - 如何在一行中垂直显示文本框

javascript - 制作我自己的 jquery 分页

javascript - jQuery 事件未触发

html - 是什么导致这些 html 超链接的高度与文本的其余部分不同?

jquery - fancybox - 如何添加打开图像的链接?

javascript - 动态更改关键帧 CSS Firefox

javascript - 当鼠标悬停在按钮上时禁用按钮颜色更改

javascript - 禁止点击 anchor 标签下的 img 标签

html - CSS 中的地址应该是什么(用于链接和图像)

asp.net - 如何使div可点击