前言：CSS全称Cascading Style Sheets，也就是层叠样式表。我认为CSS是一个较为繁琐，入门简单精通较难的语言。

CSS一般开头由元素、id、类等组成，样式使用花括号{ }包含。

一、CSS选择器

1.元素选择器

h1 {
  color:red
}

2.id选择器

#id {
    color: red;
    ......
}

3.类选择器

.center {
color: red;
......
}

4.通用选择器

text-align: center;
color: blue;
}

5.分组选择器

h1, h2, p {
color: red;
text-family: ...;
}

二、CSS选用

样式有三种

1.外部CSS

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

2.内部CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3.行内CSS

/* 该种方法被不推荐使用 */
<p style="color: red">这是内容</p>

另外，如果以上三种方法同时使用，也就是“层叠样式表”，优先采取最后使用的样式。

三、CSS注释

内容较简单，通过以下代码实现，中间空格处插入注释文本

/* 文本 */
最后修改：2026 年 02 月 23 日
© 允许规范转载