上查看所有课程
CSS 用于为 HTML 文档的外观和格式设置样式。有三种方法可以在 HTML 中添加 CSS
- 内联 CSS：直接添加到 HTML 元素的样式。
- 内部 CSS：在文档的
head部分定义的样式。 - 外部 CSS：在单独文件中定义的样式。
内联样式
内联样式是使用 style 属性直接将 CSS 规则添加到 HTML 元素的方法。例如，
<pstyle="color: red;">Hello, Good Morning</p>这里，
style- 定义<p>元素的 CSScolor: red- 将<p>元素的文本颜色更改为 红色
style 属性可以添加到任何元素，但样式只会应用于该特定元素。例如，
<html lang="en">
<head>
<title>Browser</title>
</head>
<body>
<h1>This is h1</h1>
<p>This paragraph doesn't have CSS.</p>
<p style="color:red">This paragraph is styled with inline CSS.</p>
</body>
</html>浏览器输出
内部 CSS
内部 CSS 将 CSS 样式应用于特定的 HTML 文档。内部 CSS 使用 HTML 的 head 标签中的 <style> 属性在 HTML 文档中定义。例如，
<head>
<style>
p {
color: red;
}
</style>
</head>这里，
<style>- 定义 CSSp- 选择p标签并对其应用 CSScolor: red;- 将<p>元素内容的文本颜色更改为 红色
现在，我们来看一个如何在 HTML 中使用内部 CSS 的完整示例。
<html lang="en">
<head>
<style>
p {
color: red;
}
</style>
<title>Browser</title>
</head>
<body>
<h1>Internal CSS Example</h1>
<p>This is Paragraph 1</P>
<p>This is paragraph 2</p>
<div>This is a content inside a div</div>
</body>
</html>浏览器输出
注意： 内部样式表中定义的样式只会影响当前 HTML 页面上的元素，而不会在其他 HTML 页面上可用。
外部 CSS
外部 CSS 是一种通过在单独文件中定义 CSS 来将 CSS 样式应用于 HTML 页面的方法。
我们来看一个例子
p {
color: blue;
}在这里，我们将 CSS 放在一个名为 style.css 的单独文件中。外部 CSS 文件应具有 .css 扩展名。
外部 CSS 文件可以使用 HTML 中的 link 元素链接到 HTML 文档。例如，
<head>
<link href="style.css" rel="stylesheet">
</head>我们使用 <link> 标签将 style.css 文件链接到 HTML 文档。在上面的代码中，
href="style.css"- 外部 CSS 文件的 URL 或文件路径。rel="stylesheet"- 指示链接的文档是 CSS 文件
示例：外部 CSS
让我们看一个在 HTML 文档中使用外部 CSS 的完整示例。
style.css
p {
color: blue;
}现在，让我们将其与 html 文件连接起来
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<title>Browser</title>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>浏览器输出
使用多个样式表
我们可以将多个 CSS 文件链接到一个 HTML 文件。假设我们有以下两个 CSS 文件。
style.css
p {
color: red;
}
div {
color: yellow;
}main.css
body {
background: lightgreen;
}现在，让我们将这两个 CSS 文件链接到我们的 HTML 文档。
<html lang="en">
<head>
<link href="main.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Browser</title>
</head>
<body>
<h1>Multiple Stylesheet Example</h1>
<p>This is Paragraph 1</P>
<p>This is paragraph 2</p>
<div>This is a content inside a div</div>
</body>
</html>浏览器输出
在这里，我们将 main.css 和 style.css 链接到我们的 HTML 文件。添加多个 CSS 文件有助于我们将 CSS 文件组织成可管理的部分。
内联样式覆盖内部样式
如果内部 CSS 和内联 CSS 都应用于一个标签，则应用内联标签的样式。让我们看一个例子。
<html lang="en">
<head>
<style>
h1 {
color: blue;
}
p {
background: red;
}
</style>
<title>Browser</title>
</head>
<body>
<h1 style="color: green">Priority Example</h1>
<p>This is Paragraph 1</P>
<p style="background: orange">This is paragraph 2</p>
</body>
</html>浏览器输出
正如您所看到的，内联 CSS 的样式应用于元素。