Question

它是HTML的一段代码。问题是我无法弄清楚这条线的用途和工作方式。

<head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>

Answer 1

从http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css

链接的第一个http://s3.amazonaws.com样式代码

第二个，main.css从您的本地文件夹链接，它包含您自己的自定义样式。

页面样式的两个文件。

您必须详细了解css HERE

Answer 2

它将两个CSS样式表链接到HTML文档中。

第一个是远程服务器，从服务器s3.amazinaws.com放置并链接第二个是本地的，它放在与HTML文档相同的目录中。

例：
如果您的HTML文档位于域根目录中，main.css也在root用户中如果您的HTML文档是例如。 /contact/career.php，CSS文件也必须在/contact/目录中。

更多信息，例如。在这里，http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import

Answer 3

为了将CSS规则应用于HTML元素，main.css将覆盖和/或扩展从s3.amazonaws.com加载的shift.css中的现有规则。

e.g：

如果你有这样的DOM结构：

<ul class="list">
    <li>Element</li>
</ul>

和shift.css包含以下规则：

.list li {
  background-color: red;
  color: yellow;
}

和main.css包含以下规则：

.list li {
  background-color: green;
  font-weight: bold;
}

这将是＆＃34;结果＆＃34;规则：

.list li {
  background-color: green; /* main css override shift.css */
  color: yellow; /* from shift.css */
  font-weight: bold;  /* extendion of the rule made by from main.css */
}

Answer 4

它们都是您网页的样式表。当浏览器读取样式表时，它将根据样式表中设置的规则格式化网页。

您会看到.css这两端的结尾如何代表层叠样式表。

由Codecademy设置的样式表：

http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css

特定于网站的样式表：

“的main.css”

确保main.css与index.html位于同一文件夹中，否则，请将文件路径更改为main.css所在的文件夹。例如："css/main.css"。

插入样式表有三种方法

外部样式表
内部样式表
内联样式表

您链接的两个样式表是外部，因为它们不直接保存在html文件中。

链接到外部样式表时href=""告诉浏览器存储样式表的位置，rel=""告诉浏览器当前文档与链接的文档之间的关系;在这种情况下，样式表。

如果您对Web开发还不熟悉，可能习惯使用内联样式。

内联样式示例：

<h1 style="color:red;margin-left:10px;">This is using inline style.</h1>

有人请解释我在HTML程序中使用此代码

4 个答案: