什么是 CSS？-模板佳源

使用 CSS

CSS 可以通过 3 种方式添加到 HTML 文档中：

内联– 通过使用styleHTML 元素中的属性
内部– 通过使用部分<style>中的元素<head>
外部– 通过使用<link> 元素链接到外部 CSS 文件

添加 CSS 的最常见方法是将样式保存在外部 CSS 文件中。但是，在本教程中，我们将使用内联样式和内部样式，因为这更容易演示，也更容易让您自己尝试。

内联 CSS

内联 CSS 用于将独特的样式应用于单个 HTML 元素。

内联 CSS 使用styleHTML 元素的属性。

以下示例将元素的文本颜色设置<h1>为蓝色，将元素的文本颜色设置<p>为红色：

例子

<h1 style=”color:blue;”>A Blue Heading</h1>

<p style=”color:red;”>A red paragraph.</p>

内部 CSS

内部 CSS 用于定义单个 HTML 页面的样式。

内部 CSS 定义在<head>HTML 页面的部分中，在<style>元素内。

以下示例将所有<h1>元素（在该页面上）的文本颜色设置为蓝色，并将所有<p>元素的文本颜色设置为红色。此外，页面将显示为“粉蓝色”背景色：

例子

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>

外部 CSS

外部样式表用于定义许多 HTML 页面的样式。

要使用外部样式表，请在<head>每个 HTML 页面的部分中添加指向它的链接：

例子

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>

外部样式表可以用任何文本编辑器编写。该文件不得包含任何 HTML 代码，并且必须以 .css 扩展名保存。

这是“styles.css”文件的样子：

“样式.css”：

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

提示：使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！

CSS 颜色、字体和大小

在这里，我们将演示一些常用的 CSS 属性。稍后您将了解更多关于它们的信息。

CSScolor属性定义要使用的文本颜色。

CSSfont-family属性定义要使用的字体。

CSSfont-size属性定义要使用的文本大小。

例子

使用 CSS color、font-family 和 font-size 属性：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>