本博客所讲解 CSS 的版本为 CSS 3 ，并严格遵循该版本规则
一、注释
方法:
/* 注释内容 */
二、选择器
通常，我们将 CSS 选择器分为五类：
- 基本选择器
- 复合选择器
- 伪类选择器
- 伪元素选择器
- 属性选择器
① 基本选择器
基本选择器又分为 通用选择器、类选择器、元素选择器、id选择器
下面演示源代码为例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 2px; /* padding 指一个元素的内容与其外边界之间的空间 */
}
/* 通用选择器，即让所有标签都满足的内容 */
.content {
text-indent: 2em; /* text-indent 规定文本中首行文本的缩进 */
}
/* 类选择器，当标签使用此类（content）时，其内容才能生效 */
span {
margin: 0px;
color: blue;
}
/* 元素选择器，让所有此元素（span）都满足的内容 */
#courserli {
color: red;
}
/* id选择器，当标签使用此id（courserli）时，其内容才能生效 */
</style>
</head>
<body>
<p class="content">这是第一句。<span>这一句话是灰色的。</span>这是第三句。</p>
<p class="content">这是第四句。<span id="courserli">这一句是红色的。</span>这是第六句。</p>
</body>
</html>
网页显示如下：
这是第一句。这一句话是灰色的。这是第三句。
这是第四句。这一句是红色的。这是第六句。
② 复合本选择器
复合选择器又分为 交集选择器、并集选择器、后代选择器、子元素选择器、相邻元素选择器
但由于目前用不到这么多种类的选择器，固我选择只讲解其中几个：
1、交集选择器（仅有两种类型的 交集选择器）
依然演示源代码为例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span.content {
color: blue;
}
/* 元素选择器 和 类选择器 共同组成的 交集选择器 */
/* 作用是当满足选择器条件（span、content）时，其内容才能生效 */
span#courser {
color: red;
}
/* 元素选择器 和 id选择器 共同组成的 交集选择器 */
/* 作用是当满足选择器条件（span、courser）时，其内容才能生效 */
</style>
</head>
<body>
<p>这是第一句。<span class="content">这一句话是蓝色的。</span>这是第三句。</p>
<p>这是第四句。<span id="courser">这一句是红色的。</span>这是第六句。</p>
</body>
</html>
网页显示如下：
这是第一句。这一句话是蓝色的。这是第三句。
这是第四句。这一句是红色的。这是第六句。
2、并集选择器
依然演示源代码为例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span,h1,p {
color: blue;
}
/* 并集选择器，让所有这些元素（span、h1、p）都满足的内容 */
</style>
</head>
<body>
<h1>标题是蓝色的</h1>
<span>此句也是蓝色的</span>
<p>段落也是蓝色的</p>
</body>
</html>
网页显示如下：
标题是蓝色的
此句也是蓝色的
段落也是蓝色的
③ 伪类选择器、伪元素选择器、属性选择器
同理，目前用不到这么多种类的选择器，固我暂时不讲解了
三、颜色
直接举例：
color:#FF0000
color:red
color:rgb(255, 0, 0)
显示的都是红色
rgb 代表 red占255, green占0, blue占0
其他颜色也可以用调色版调出来，参考小甲鱼的调色版
四、字体
① 字体大小
标题
h1 {font-size:200％;} /* 将标题大小设置为相对于普通文本使用的大小的百分比 */
h1 {font-size:2em;} /* 与上面效果相同，因为 % 和 em是等价的，比如:50% = 0.5em */
文本字体
p {font-size:64px;} /* px即像素，文本字体是16px，其实这种方法对于标题也适用 */
② 字体系列
p {font-family:"Times New Roman",Georgia,Serif;} /* 当字体名称非单词时要加双引号 */
p {font-family:Arial,Verdana,Sans-serif;} /* Sans-serif 是一个单词 */
如果浏览器不支持第一种字体，则会尝试下一个，但必须提供一个 Generic family 作为求最后的选择
| 类型 | 说明 |
|---|---|
| Font family | 特定的字体系列（如Times New Roman或Arial） |
| Generic family | 一组具有相似外观的字体族（如Serif或Monospace） |
但网页一般也建议使用等宽字体 Monospace
③ 字体和边距问题
margin 属性设置元素的外边距
padding 属性设置元素的内边距（一般用于表格）
p {margin-top:2px} /* 指定的上外边距为 2px */
p {margin-bottom:2px} /* 指定的下外边距为 2px */
p {margin-left:2px} /* 指定的左外边距为 2px */
p {margin-right:2px} /* 指定的右外边距为 2px */
p {margin:2px} /* 指定的四周外边距为 2px */
padding 与 margin 使用方法同理
五、边框
依然演示源代码为例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.box { border: solid; border-width: thin; width: 100%; padding:0.2em;}
/* 里面是一些边框的属性 */
</style>
</head>
<body>
<div class="box">
<pre>
The content within this DIV element will be enclosed
in a box with a thin line around it.
</pre>
</div>
</body>
</html>
网页显示如下：
备注：目前只说明 CSS 3 存在边框这个方法，具体一些元素和属性等需要时再掌握