目录
一、Emmet
1.快速生成HTML
2.快速生成CSS样式
3.快速格式化代码
二、复合选择器
1.后代选择器（重要）
2.子选择器
3.并集选择器
4.伪类选择器
5.:focus伪类选择器
6.复合选择器总结
三、CSS元素显示模式
1.块元素
2.行内元素
3.行内块元素
4.元素显示模式总结
5元素显示模式转换
6工具-snipaste
7.实例:小米简单侧边栏
四、CSS背景
1.背景色background-color
2.背景图片background-image
3.背景平铺background-repeat
4.背景位置background-position
5.背景图像固定（附着）backgroumd-attachment
6.背景复合写法
7.背景色半透明
8.背景总结
目标
Emmet语法
CSS符合选择器
CSS元素显示模式
CSS背景
CSS三大特性
CSS注释
一、Emmet
使用缩写，提高html和css编写速度
1.快速生成HTML
7.如果想要在生产的标签内部写内容可以用{}表示
(1)div+tab
(2)div*3+tab
(3) ul>li+tab
(4)div+p
(5).demo+tab ul>li#div+tab
(6).demo$*5
(7)div{我不喜欢}*5 自增div{$}*5
2.快速生成CSS样式
缩写首字母
3.快速格式化代码
二、复合选择器
复合选择器：是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器
1.后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面的子元素其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就称为外层标签的后代元素1 元素2 {样式声明}
表示选择元素1里面的所有元素2（后代元素）
如ul li { 样式声明 }
元素1和元素2空格隔开元素1是父级 元素2是子级。最终选择的是元素2元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可(中间标签可省)元素1和元素2可以是任意基础选择器
2.子选择器
子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。语法
元素1 > 元素2{样式声明}
.navy>a {
color: red
}
元素1 和 元素2 中间用大于号隔开元素1 是父级，元素2 是子级，最终选择的是元素2元素2必须是亲儿子，其孙子、重孙之类都不归他管
3.并集选择器
并集选择器可以选择多组标签，同时为它们定义相同的样式。
并集选择器是各选择器通过英文逗号连接而成任何形式的选择器都可以作为并集选择器的一部分
元素1,元素2 {样式声明}
div,
span {
color: pink;
}
约定的语法规范，我们并集选择器喜欢竖着写
一定要注意，最后一个选择器不要加逗号
4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素伪类选择器书写最大的特点是**用冒号(比如:hover、:first-child伪类选择器很多，比如有链接伪类、结构伪类，这里先记录常用的链接伪类选择器a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标制作位于其上的链接
a:active 选择活动链接
(1)为了确保生效，安装LVHA循环顺序声明
（2）因为a链接在浏览器有默认样式，所以实际工作需要给链接单独指定样式
开发中常用的
a {color: #333;text-decoration: none;}/* 鼠标经过筛选出来*/a:hover {color: green;text-decoration: underline;}
<!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>Document</title><style>/* 未访问链接 a:link 把没有点击过的链接筛选出来*/a:link {color: #333;}/* 访问过链接 链接筛选出来*/a:visited {color: orange;}/* 鼠标经过筛选出来*/a:hover {color: skyblue;}/* 鼠标正按下还未弹起筛选出来*/a:active {color: green;}</style></head><body><a href="#">小猪佩奇</a><a href="">小猪佩奇</a></body></html>
5.:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说<!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>Document</title><style>input:focus {background-color: pink;}</style></head><body><input type="text"><input type="text"><input type="text"></body></html>
6.复合选择器总结
三、CSS元素显示模式
HTML元素一般分为块元素和行内元素
1.块元素
块元素特点
h1-h6 p div ul ol li
自己独占一行宽度、高度、外部边距以及内边距控制宽度默认是容器（父级宽度）的100%上一个容器及盒子，里面可以放行内或者会计元素
注意点
文字类元素不能使用块级元素<p>标签注意用语存放文字，因此里面不能放块级元素，特别是不能放div<h1>-<h6>都是文字类块级元素标签，里面也不能放其他块级元素
2.行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个高，宽直接设置是无效的默认宽度就是它本身内容的宽度行内元素只能容纳文本或其他行内元素
注意：
链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
3.行内块元素
在行内元素中有几个特殊的标签 <img />、<input />、<td>，它们同时具有块元素和行内元素的特点
有些资料称它们为行内块元素
特点
和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)默认宽度就是它本身内容的宽度(行内元素特点)高度，行高，外边距以及内边距都可以控制(块级元素特点)
4.元素显示模式总结
5元素显示模式转换
特殊情况下，需元素模式转换
比如想要增加链接<a>的触发范围
转换为块元素：display:block转换为行内元素：display:inline转换为行内块元素:display:inline-block
<!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>Document</title><style>a {width: 150px;height: 50px;background-color: pink;display: block;}div {width: 300px;height: 100px;background-color: purple;display: inline;}span {width: 300px;height: 100px;background-color: purple;display: inline-block;}</style></head><body><a href="#">转换</a><div>我是块级元素</div><div>我是块级元素</div><span>行内元素转行内块元素</span><span>行内元素转行内块元素</span></body></html>
6工具-snipaste
实例:按下F1截图可以看到框的width和height
提取颜色时按住alt不动，按C即可取到色
7.实例:小米简单侧边栏
<!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>Document</title><style>a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;}a:hover {background-color: orange;}</style></head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a></body></html>
一个小技巧：单行文垂直居中
让文字的行高等于盒子的行高
简单理解：行高的上下空隙把文字挤到中间了，是如果行高小于盒子高度文字会偏上。如果行高大于盒子高度文字偏下
四、CSS背景
通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1.背景色background-color
background-color属性定义了元素的背景颜色background-color: transparent;
一般情况下默认颜色是transparent（透明），我们也可以手动指定背景颜色为透明色
2.背景图片background-image
实际开发常见于一些装饰性的小图片或者超大背景图，优点是便于控制位置
background-image : none | url(url)
注意：背景图片后面的地址，千万不要忘记加URL，同时里面的路径不要加引号
background-image:url(image/log)
3.背景平铺background-repeat
background-repeat: repeat| no-repeat| repeat-x| repeat-y
默认是平铺的
页面元素既可添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色
4.背景位置background-position
background-position: x y;
参数：X坐标 Y坐标可以使用 方位名词 或者 精确单位
参数是方位名词
①：如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left
②：如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
水平居中只写right 垂直居中只写top
案例小图标
<!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>Document</title><style>h3 {width: 160px;height: 40px;font-size: 14px;font-weight: 400;line-height: 40px;background-image: url(../html/images/title_sprite.png);background-repeat: no-repeat;background-position: left;text-indent: 4em;}</style></head><body><h3>成长守护平台</h3></body></html>
超大背景图片
body {
background-image: url(../html/images/bg.png);
background-repeat: no-repeat;
background-position: top;
}
参数是精准单位
①：如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
②：如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
参数是混合单位
①：如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
5.背景图像固定（附着）backgroumd-attachment
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动6.背景复合写法
没有像font必须按顺序，我们习惯下面顺序
background： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: #000 url(../html/images/bg.png) no-repeat fixed center top;
7.背景色半透明
background : rgba(0,0,0,0.3);
最后一个参数是alpha透明度 ，取值范围在0~1之间
我们习惯把0.3的 0省略掉，写为background(0,0,0,.3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
8.背景总结
背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置.
鼠标经过时，a:hover 如果a有class名字，也可以.nav:hover
