通过vss背景样式可以给页面元素添加背景样式（背景颜色background-color，背景图片background-image，背景位置background-position，背景固定background-a ttachment）
background-color:transparent(背景透明（默认）)|color
（便于控制位置）background-image:none（无图片）|url=（xxxxxx）
背景图片平铺：利用background-repeat属性
background-repeat:repeat;(平铺（默认）)
background-repeat:no-repeat（不平铺）;
background-repeat:repeat-x（按照x轴（横向））;
background-repeat:repeat-y（按照y轴（纵向））;
背景图片位置：
background-position:x y;(x,y是坐标，方位名词，精确单位)（百分数，top,center,bottom,left,right）
background-position:center top;(水平居中)
background-position:right center;
如果只有一个方位名词，则第二个为默认居中
background-attachment：背景图像固定（视差滚动）
background-attachment:scroll(背景图片随对象内容滚动（默认）)
background-attachment：fixed（背景图像固定）
背景复合写法：
background:背景颜色 背景图片地址 背景平铺 背景图像滚定 背景图片位置；
<!-- background:black url(./image/title_sprite.png) no-repeat fixed -->
背景颜色半透明：
background:rgba(0,0,0,0.3);(alpha是透明度，取值在0~1之间)
一：：Emmet语法（用来缩写，提高html编写速度）
1：快速生成html结构语法
<div></div>----(div*3)生成相同标签
<div></div>
<div></div>
<div></div>
<ul> -----(父子级标签（内嵌）)
<li></li>-----（ul>li）
</ul>
<div><span></span></div>----（div>span）
<span></span>-----(兄弟关系)（div+p）
<p></p>
<div class="nav"></div>----.class
<div id="banner"></div>----#banner
<p class="one"></p>-----p.one
自增符号$
<div class="demo1"></div>----.demo$*5
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
标签中默认显示文字：
<div>xxxxxx</div>
<div>yyyyy</div>
<div>yyyyy</div>
<div>yyyyy</div>
<div>yyyyy</div>
<div>yyyyy</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
2：快速生成css样式（使用简写形式）
3：快速格式化代码（vscode----shift+alt+f）
二：：css复合选择器
由多个基础选择器组合成
包括：
后代选择器（包含选择器）
元素1 元素2｛样式声明｝：
<style>
ol li{
color: pink;
}
</style>
<ol>
<li>xxx</li>
</ol>
<ul>
<li>yyy</li>
</ul>
子选择器（子元素选择器）：
元素1>元素2｛样式声明｝，只会选择元素2
<style>
.nav ul li a{
color: red;
}
</style>
<div class="nav">
<ul>
<li><a href="#"></a>百度</li>
<li><a href="#"></a>百度</li>
<li><a href="#"></a>百度</li>
</div>
并集选择器（选择多组标签，并定义相同的样式，集体声明）：
元素1，元素2｛样式｝
伪类选择器（给某些选择器添加特殊效果，或者选择第一个，第n个元素）：
:hover :first-child
链接伪类：
a:link--选择没有被访问过的链接
a:visited--选择所有被访问的链接
a:hover--选择鼠标指针位于其上的链接
a:active--选择活动链接（鼠标按下没有弹起的链接）
按照顺序声明：link》visited》bover》active
结构伪类：
:focus,用于选取获得焦点（光标）的表单元素
<style>
input:focus{
background-color:yellow;
}
</style>
三：：css元素显示模式
元素（标签）以什么方式显示
块元素：占一行（div），高度宽度，边距都可以调，宽度默认是容器（父级元素）的100%，是一个容器里面可以方行内元素/块级元素，文字类元素中不能放会块级元素
行内元素（内联元素）：一行多个（span），高度宽度设置无效，默认宽度是本身内容的高度，只能容纳行内元素或者文字
行内块元素（img，input，td，同时具有行内，块级元素特点）：一行可以放多个，本省宽度是内容的宽度，可以设置宽高
元素显示模式的转换：
转换为块级元素：display：block；
转换为行内元素：display：inline;
转换为行内块：display：inline-block;
四：：css三大特性（继承性，层叠性，优先级）
层叠性：给相同选择器，设置了相同的样式，解决样式冲突的问题，遵循就近原则，呢个样式距离结构近就先执行那个，如果样式不冲突，就不会层叠。
继承性：子标签会继承父标签的某些样式。inherit from
行高的继承：
优先级:当同一个元素指定多个选择器，会产生优先级问题
五：：css注释
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
