共计 3055 个字符，预计需要花费 8 分钟才能阅读完成。
一、CSS 简介及引用
1、CSS 概述
CSS 汉译为层叠样式表，是用于控制网页样式。
2、如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
1. 外部样式表
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
内部样式表
<head>
<style type=”text/css”>
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
<p style=”color: red; margin-left: 20px”>
This is a paragraph
</p>
3、css 样式表的优先级
内联样式表的优先级别最高内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
二、CSS 基础语法
1、CSS 语法
h1 {color:red; font-size:14px;}
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器：通常是需要改变样式的 HTML 元素。声明：使用花括号来包围声明。
提示：如果要定义不止一个声明，则需要用分号将每个声明分开。
p {text-align:center; color:red;}
2、记得写引号
提示：如果值为若干单词，则要给值加引号：p {font-family: “sans serif”;}
三、css 选择器
1、标签选择器（h1）
h1 {color:red; font-size:14px;}
2、通配符选择器（*）
语法：*{属性：属性值;} , 含义就是所有元素；表示该样式适用所有网页元素
*{margin:0;color:#ff0;}
3、群组选择器（h1,h2,h3）
h1,h2,h3,h4,h5,h6 {
color: green;
}
4、派生选择器:
依据元素在其位置的上下文关系来定义样式:
后代选择器（空格）
li strong {
color:red;
}
子元素选择器（>）
span > strong {color:blue;}
相邻兄弟选择器（+）
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
div h6 + p {margin-top:50px;}
<div>
<h6>This is a heading.</h6>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</div>
id 选择器（#）
为标有特定 id 的 HTML 元素指定特定的样式 , id 属性只能在每个 HTML 文档中出现一次. 例如：身份证号码。
#redColor{background-color: red;}
#greenColor{background-color: green;}
<div id=”redColor”> 我有一个 id，为 redColor</div>
<div id=”greenColor”> 我有一个 id，为 greenColor</div>
命名规范：
1）只允许出现字母（大小写均可，严格区分）、下划线、数字。也就是说，id=”laoHe”和 id=”laohe”不冲突。
2) 只允许以字母开头。
3) 命名没有长度限制，可以是 1 个字母，也可以是很多个。不过不建议太长。
4) 不允许出现标签名（不是硬性规定，是有工作经验的表现）
6、类选择器（.）
类选择器以一个点号显示：
.goCenter{
text-align: center;
background-color: gray;
}
div, p, h2, 元素都有 goCenter 类。这意味着两者都将遵守 “.goCenter ” 选择器中的规则。
<div class=”goCenter”> 我和兄弟有一个共同的 class，为 goCenter</div>
<p class=”goCenter”> 我和兄弟有一个共同的 class，为 goCenter</p>
<h2 class=”goCenter”> 我和兄弟有一个共同的 class，为 goCenter</h2>
注意：类名的第一个字符不能使用数字！
伪类选择器（:）
CSS 伪类用于向某些选择器添加特殊的效果。伪类，状态是动态变化的，当一个元素达到一个特定状态时，它可能得到一个样式，当状态改变时，又失去这个样式。例如，含羞草。
1）、focus
选择获得焦点的 input 元素。
2）:link，:visited，:hover，:active
链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
注意：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：a:active 必须被置于 a:hover 之后，才是有效的。
伪元素选择器（:）
语法：选择器:: 伪元素 / 选择器: 伪元素
伪元素是控制内容，用于对文档的一部分（伪）元素定义样式
CSS2.1 首次定义了单冒号开头的伪元素, 为了将伪元素与伪类进行严格区分，CSS3 重新定义了双冒号开头的伪元素。
1）:first-line、:first-letter
用于向文本的首行, 首字母设置特殊样式, 该伪元素只能应用于块级元素。
<p id=”article”>
细雨昵喃，打湿几处新裳。最是无奈飞燕，春去冬不归，似人生浮雨，飘飘荡荡，有似那点水浮萍，漂泊无根。曾几何时也有过“细雨湿衣看不见，闲花落地听无声”的悠闲，也有过“竹杖芒鞋轻胜马，一蓑烟雨任平生”的潇洒。人生总是无奈之事太多，牵绊，执念，总会左右着我们凉薄的人生，常常回想，有一天我们是否能如水一般，清澈纯净，方圆随意，如白云一样自由自在。
</p>
/* 伪元素 之:first-line*/
#article:first-line{
color: red;
}
/* 伪元素 之:first-letter*/
#article:first-letter{
color: blue;
}
2）:first-child
选择元素的第一个子元素
p:first-child{
font-size: 30px;
}
li:first-child{
font-size: 30px;
}
<p> 文中第一个 P 标签 </p>
<ul>
<li> 文中第一个 li 标签 </li>
<li> 文中第二个 li 标签 </li>
<li> 文中第三个 li 标签 </li>
</ul>
<p> 文中第二个 P 标签 </p>
3）:before
定义某一个元素第一个（虚构的）子元素的内容，通常会附带 content 属性。
语法：选择器:before {content: value;}
4）:after
定义某一元素最后一个（虚构的）子元素的内容，通常会附带 content 属性。
语法：选择器:after {content: value;}
5）content
说明：content 属性通常与伪元素选择器 :before 或 :after 一并使用，主要用于为该伪元素生成内容。
语法：{content: value;}
四、CSS 的注释
CSS 的注释格式：/ 注释内容 /
