Question

我正在研究这个例子：

<!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修改网页样式时，“链接”元素是否必要？

Answer 1

不，不需要它。您可以通过以下方式替换“link”标签：

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

但是如果你想使用分离的html和css文件（这可以被认为是一种好习惯），那么你需要“link”标签

Answer 2

如果您希望CSS工作，您可以通过两种主要方式完成：

使用<style>标记。

您可以将CSS代码包含在<style></style>内的head或body内，如下所示：

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

使用<link>代码。

您的示例中已经有这行代码：

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

假设您有 css 文件夹，其中包含 example.css 文件，您可以将样式放在那里，它也可以正常使用。

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

当我想用CSS修改网页样式时，是否需要“链接”元素？

2 个答案: