作为装点网页的工具，CSS自然是必不可少的，也是与HTML密不可分的。
对于CSS的学习主要分为两大部分，第一部分是“CSS的引入”，第二部分是“CSS的使用”，这也非常符合工具的使用逻辑，只有我们先把工具拿到手，接下来才能使用它来进行工作。
1 CSS的引入
“CSS的引入”较为简单，一共有三种方法------内嵌式、外联式、行内式。
1.1 内嵌式
将CSS代码写在.html的文件里，与HTML代码写在一起，通常写在<head></head>标签内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内嵌式</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>1.2 外联式
将css代码和html代码分开，在<head></head>标签中通过<link></link>标签引入外部的.css文件。
<link href="./xxx.css" rel="stylesheet" type="text/css"/>1.3 行内式
这种方式就是在标签里直接写上style属性，属性值为具体样式代码，格式为style="xxx:xxx; xxx:xxx; ..."
<div style="color: green ; font-size:30px ;">这是行内式div标签</div>2 CSS的使用
在引入标签之后，接下来考虑的就是如何去使用它。由于CSS仅作为网页的修饰工具，并不能单独地存在，因此第一步应该考虑的是如何将CSS和HTML结合起来，然后再考虑如何修饰HTML。
2.1 将CSS与HTML结合起来
将二者结合起来的东西有个非常通俗易懂的名字------选择器。
1.基础选择器
基础选择器一共有三种，分别是标签选择器、类选择器和id选择器。
标签选择器是直接选中html代码中的标签，标签和选择器同名。类选择器和id选择器在使用前需要向标签内添加“类”属性和“id”属性，类选择器写作 .xxx（点加类名），id选择器写作 #xxx（井号加id名）。
<p>标签选择器示例，标签就是指html里的各种标签</p>
<p class="class_selector">类选择器示例，类名自定义</p>
<p id="id_selector">id选择器示例，id名自定义</p>
/* 标签选择器 */
p {
color: red;
font-size: 30px;
font-weight: none;
}
/* 类选择器 */
.class_selector{
color: blue;
font-size: 30px;
}
/* id选择器 */
#id_selector{
color: orange;
font-size: 30px;
}2.组合类型选择器
在此基础上还有一些组合类型的选择器，例如复合选择器、并集选择器、交集选择器等。
复合选择器又可以分为后代选择器和子代选择器。 后代选择器选择的是满足条件的所有标签，而子代选择器则需要严格满足父子关系，例如div>p意思是说只能选择作为div孩子的p，不能选择作为div孙子的p。
<div>
<p>这是div的子标签</p>
<div>
<p>这是div的孙子标签</p>
</div>
</div>
/* 后代选择器 */
div p{
font: italic 400 30px/1.5 宋体，微软雅黑, 黑体, sans-serif;
}
/* 子选择器 */
div>div>p{
font: 30px 宋体
}并集选择器是将多个选择器用逗号（，）连接起来，目的是将有相同样式的选择器写在一起，减少代码的重复。例如下面 div，p 的意思就是说div标签和p标签的选择器有着相同的文字大小（font-size）。
<div>
这是div里的文字
<p>这是div的子标签</p>
<div>
<p>这是div的孙子标签</p>
</div>
</div>
/* 并集选择器 */
div, p{
font-size: 20px;
}交集选择器有点类似于逻辑运算符“且&”，只有当列举出来的所有条件都满足时才能被它选中。需要注意的是，两个选择器之间不能用空格，必须紧连在一起。
<p>交集选择器</p>
<p>标签选择器.类选择器</p>
<p class="box">p_box</p>
<p>pppppppppp</p>
<div class="box">div_box</div>
/* 交集选择器 */
p.box{
font-size: 30px;
color: aqua;
}3.结构伪类选择器
首先，我们应该明确什么叫做“伪”。“伪”就是不存在的意思，“伪类”就是不存在于标签中的“类”。那么，为什么会存在这样一种“虚无缥缈”的类呢？我们不妨看看下面的代码。
<ul>
<li>
<span>这是第1个a1</span>
<span>这是第1个a2</span>
<span>这是第1个a3</span>
<span>这是第1个a4</span>
<span>这是第1个a5</span>
</li>
<li><span>这是第2个a</span></li>
<li><span>这是第3个a</span></li>
<li><span>这是第4个a</span></li>
<li><span>这是第5个a</span></li>
<li><span>这是第6个a</span></li>
<li><span>这是第7个a</span></li>
<li><span>这是第8个a</span></li>
</ul>当我们碰到这样的代码时，是不是会为了选择其中某些标签进行修饰而苦恼？如果我们仅仅是想修饰其中的一个标签，我们可以为它添加上一个类名，但如果这样的情况反复出现，又或者是我们相同时选中多个标签进行修饰，那通过给每个待修饰标签添加类名的方式就会显得极其复杂，不仅给我们带来取名的苦恼，也会让代码变得非常凌乱。
如果有一种类可以不写在标签内，并且能够精准地选择某些标签，那将大大提高代码的简洁性，同时也不用我们绞尽脑汁地去想类名。为了满足这些需求，人们创造出了结构伪类选择器，常用的伪类选择器如下所示。
<ul>
<li>
<span>这是第1个a1</span>
<span>这是第1个a2</span>
<span>这是第1个a3</span>
<span>这是第1个a4</span>
<span>这是第1个a5</span>
</li>
<li><span>这是第2个a</span></li>
<li><span>这是第3个a</span></li>
<li><span>这是第4个a</span></li>
<li><span>这是第5个a</span></li>
<li><span>这是第6个a</span></li>
<li><span>这是第7个a</span></li>
<li><span>这是第8个a</span></li>
</ul>
/* 结构伪类选择器 */
li:first-child{
color: aqua;
}我们先找到包含li的父标签，若在这个父标签里的第一个元素是li元素，那么就对这个li元素进行修饰，若第一个元素不是li元素，则此代码无效。下图就是最终的效果图。
若把li改成span，则是先找到包含span标签的父元素，若父元素里的第一个元素是span，则把span标签里的字变成青色（aqua）。需要注意的是，从第二个li开始的li只包含一个span标签，那么这个span标签肯定是第一个，因此同样被渲染成青色。
/* 结构伪类选择器 */
span:first-child{
color: aqua;
}下图是最终的效果图。
但若在第一个li下面的span标签前面添加一个i标签，那么第一个span标签将不会被选中，这是因为li作为父级，“<span>这是第1个a1</span>” 只是第一个span标签，并不是li的第一个孩子（first-child），所以浏览器并不会去渲染这个span标签。
<ul>
<li>
<i>这是第一个i标签</i>
<span>这是第1个a1</span>
<span>这是第1个a2</span>
<span>这是第1个a3</span>
<span>这是第1个a4</span>
<span>这是第1个a5</span>
</li>
<li><span>这是第2个a</span></li>
<li><span>这是第3个a</span></li>
<li><span>这是第4个a</span></li>
<li><span>这是第5个a</span></li>
<li><span>这是第6个a</span></li>
<li><span>这是第7个a</span></li>
<li><span>这是第8个a</span></li>
</ul>/* 结构伪类选择器 */
span:first-child{
color: aqua;
} 
如果想要去渲染第一个span标签，那就要用到E::nth-of-type(n){}，它是先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数，也就是说它会先在父类li的孩子里选出所有的span标签，然后在选中所有span标签里的第n个进行渲染。然后将n设置成1，就能渲染“<span>这是第1个a1</span>”标签了。
<ul>
<li>
<i>这是第一个i标签</i>
<span>这是第1个a1</span>
<span>这是第1个a2</span>
<span>这是第1个a3</span>
<span>这是第1个a4</span>
<span>这是第1个a5</span>
</li>
<li><span>这是第2个a</span></li>
<li><span>这是第3个a</span></li>
<li><span>这是第4个a</span></li>
<li><span>这是第5个a</span></li>
<li><span>这是第6个a</span></li>
<li><span>这是第7个a</span></li>
<li><span>这是第8个a</span></li>
</ul>
/* 结构伪类选择器 */
span:nth-of-type(1){
color: aqua;
}
4.伪元素
伪元素虽然称不上是选择器，但它和选择器之间有着非常紧密的联系，也算是选择器的一种补充，因此把它和选择器放在一起说。既然是“伪元素”，那就是说这种元素并不存在于HTM代码中，而是由CSS模拟出来的标签，它的代码如下所示，::before是在父元素内容的最前面添加一个伪元素，::after是在父元素的最后面添加一个伪元素。
<div class="father">father</div> /* 伪元素 */
.father{
width: 300px;
height: 300px;
background-color: pink;
}
/* 伪元素是行内元素，设置宽高不生效 content属性必须添加*/
.father::before{
content: "This is your ";
}
.father::after{
content: "!";
}需要注意的是，
（1）伪元素内必须设置content属性才能生效，若不想显示文字内容，可以赋给content空值
（2）伪元素默认是行内元素，若想要添加宽高，需要改变其显示模式。
2.2 CSS特性
如果仅仅只是知道了上述选择器是如何选择标签的，是不足以在实践中使用的，我们还需要了解CSS的三大特性------继承性、优先级、层叠性。
1.继承性
继承性是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素，绝大多数的文字控制属性都可以继承，比如说我给body加上文字样式，那么在body里的所有标签都会继承该样式。
body {
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}不过，继承性也有失效的时候，比如a标签无法继承父元素的color样式，h标签无法继承父元素的font-size样式，因为浏览器里的默认样式会覆盖掉继承样式。
2.层叠性
div{
color:green;
color:red;
font-size:18px;
font-size:20px;
}3.优先级
不同的选择器具有不同的优先级，优先级高的选择器中的样式会覆盖掉优先级低的选择器中的样式，在CSS中的优先级公式为：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important，需要注意的是！important并不能提高继承的优先级，也就是说如果把！important写在父元素的选择器里，并不会影响到子元素里的样式。
对于优先级的判断，有一个公式作为参考。在下图中，从第一级到第四级权重一次递减，在比较权重时，若有高位权重，则低位权重的值无论有多大，最终的权重都不会高于具有高位权重的样式；若两个权重的级别一样，就比较数值，数值大的权重大。举两个例子，若A（1,0,0,0），B（0,10,10,10），则A的权重高于B，因为A拥有第一级权重（也就是高位权重），而B没有；若A（0,2,2,0），B（0,2,1,10），则A的权重高于B，因为A的第三级权重大于B的第三级权重，即使B的第四级权重再高也没有用。
2.3 CSS具体样式
在说完CSS的选择器是如何选中HTML网页的某个部分之后，接下来就要说说CSS的具体内容了。
2.3.1 字体/文本样式
1.字体样式
（1）字体大小：font-size：数字+px，某些浏览器默认大小为16px
（2）字体粗细：font-weight：normal--正常，bold--加粗；纯数字 100~900，400--正常，700--加粗
（3）字体样式：font-style：字体是否加粗，normal--正常，italic--倾斜
（4）字体类型：font-family：字体名称，可以是具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等，也可以是字体系列：sans-serif、serif、monospace等
（5）字体类型：font属性连写：严格按照 font-style font-weight font-size font-family 来写
2.文本样式
（1）文本缩进：text-indent：数字 + px； 数字 + em（相对单位，1em = 当前标签的font-size大小）
（2）文本水平对齐方式：text-align：left--左对齐，center--居中对齐，right--右对齐
（3）文本修饰：text-decoration：underline--下划线（常用）， line-through--删除线（不常用），overline--上划线（几乎不用），none--无装饰线（常用，例如a标签去掉下划线）
3.line-height 行高
行高包括上间距、文本高度、下间距三个部分，行高可以是 数字 + px，也可以是 倍数（当前标签font-sizede倍数）。如果想要把单行文本居中，只需要把行高设置成和父元素高度一致即可,这一点非常重要。除此之外，我们还可以把line-height写进font属性连写里，和size写在一起，font : style weight size/line-height family。
4.color 文本颜色
文本颜色的格式为 color:xxx; xxx的写法有四种：①颜色的英文单词，比如red、green、yellow、pink等等；②rgb表示法，写作rgb(xxx,xxx,xxx)，其中xxx的范围为0~255；③rgba表示法，写作rgba(xxx,xxx,xxx,x)，其中xxx的范围为0~255，x的范围为0~1（代表了不透明度，0为完全透明，1为完全不透明）；④十六进制表示法，写作#xxxxxx，直接拿测量工具测得即可。
2.3.2 背景样式
1.背景颜色：background-color:xxx; xxx可为关键字、rgb/rgba表示法、十六进制表示法
2. 背景图片：background-image:url(xxx); xxx为图片的绝对/相对路径（可用引号括起来，也可以省略引号），但要注意的是背景图默认在水平和垂直方向平铺且不会撑开盒子（意思就是说需要提前定好标签的尺寸）
3. 背景平铺：background-repeat:xxx; 由于背景图片默认水平和垂直方向平铺且会沾满整个标签的范围，为了更好地控制背景图的平铺效果，xxx可写为no-repeat--不平铺、repeat-x--沿水平方向平铺、repeat-y--沿垂直方向平铺以及repeat--默认值（写不写无所谓）
4. 背景位置：background-position:xxx,xxx; 该命令就是指定了图片应该放在何处，但要搞清楚图片所放置的位置，就需要知道网页的默认坐标系以及xxx的具体取值，具体如下图所示。
5. 背景相关属性连写：background：color image repeat position
6.img和背景图的区别：img是一个标签，可以不设置尺寸，若不设置尺寸，图片会以原尺寸显示；但background-image只是修饰元素的CSS样式，若元素不设置尺寸，background-image是不会撑开元素的。
2.3.3垂直对齐方式
浏览器文字类型元素排版有着自己的规则，它并不是让每个文字的最底部/最顶部/中心对齐，而是用一条基线来对齐文字。
这样就会带来一个麻烦，当行内元素或行内块元素放在一起时就会出现垂直对齐的问题 ，要想解决这个问题也很简单，就是修改基线对齐方式，除开默认的基线（baseline）对齐外，还有顶部（top）对齐、中部（middle）对齐以及底部（bottom）对齐。
2.3.4 光标类型
如果你想要光标移动到某块区域上时变成更具有指示性的标识，那么只需要在相应的元素里加上cursor属性名即可。
div {
width: 200px;
height: 200px;
background-color: red;
/* 手型 */
cursor: pointer;
/* 工字型, 表示可以复制 */
cursor: text;
/* 十字型, 表示可以移动 */
cursor: move;
}2.3.5 边框圆角
在网页中HTML元素默认是“四角尖尖”，如果想让元素的四个角变得圆润，增加视觉体验，就可以使用border-radius属性，它的常见取值是“数字+px”和百分比（%）。
.box {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50% 40% 30% 20%;
/* border-radius: 10px 20px 30px 50px; */
}border-radius后接一个值，表示四个角的圆角值相等；后接两个值表示左上角及其对角的圆角相等，右上角及其对角的圆角相等；后接三个值表示右上角和左下角的圆角值相等；后接四个值，表示元素的左上角、右上角、右下角、左下角，即从左上角开始赋值，然后顺时针赋值，没有赋值的看对角。
.box {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值: 表示4个角是相同的 */
border-radius: 10px;
/* 4值: 左上 右上 右下 左下 -- 从左上顺时针转一圈 */
/* border-radius: 10px 20px 40px 80px; */
/* border-radius: 10px 40px 80px; */
/* border-radius: 10px 80px; */
}
如果想要画一个圆的话，元素必须是正方形，且border-radius的值为元素高度的一半；如果想要画一个胶囊按钮的话，元素必须是个矩形，且border-radius的值为元素高度的一半（不能写50%）。
.box {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px;
border-radius: 50%;
}
.box {
width: 400px;
height: 200px;
background-color: skyblue;
border-radius: 100px;
/* 50%不能展现出胶囊的形状 */
/* border-radius: 50%; */
}
2.3.6 溢出部分显示效果
当元素里的内容超出了元素范围的区域时，可以使用overflow属性对溢出部分做处理。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
