1.CSS：层叠样式表 ?? ?【用于设置HTML页面中的文本内容，图片的外形以及版本的布局和外观显示样式】 ?? ?【语法规范：<style>选择器{样式}</style>】 2.基础选择器 ?? ?（1）标签选择器【标签名{属性：属性值；}】 ?? ??? ?【全部选】 ?? ?（2）类选择器【.类名{属性：属性值；}】 ?? ??? ?【单独选一个或几个，多个人使用】 ?? ??? ?【结构需用class属性，<div class="red"></div>】 ?? ??? ?【多类名，<div class="red font20"></div>，多个类名中间必须用空格分开】 ?? ?（3）id选择器【#类名{属性：属性值；}】 ?? ??? ?【只能使用一次】 ?? ??? ?【样式#定义，结构id调用，<div id="pink"></div>】 ?? ?【类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用】 ?? ?（4）通配符选择器【*{属性：属性值；}】 ?? ??? ?【选择所有的标签】 3.字体属性 ?? ?【font-family：文本的字体系列】 ?? ?【font-size：字体大小；单位：px】 ?? ?【font-weight：字体粗细】【属性值：加粗bold==700；正常normal==400】 ?? ?【font-style：字体样式】【属性值：倾斜italic；正常normal】 ?? ?【复合形式：font：font-style font-weight font-size（*）/line-height font-family（*）;】 4.文本属性 ?? ?【color：文本颜色】【属性值：red（预定义的颜色值）/#cc00ff（十六进制）/rgb（red，green，blue）(rgb代码)】 ?? ?【text-align：对齐文本】【属性值：center；left；right】 ?? ?【text-decoration：装饰文本】【属性值：none；underline(下划线)；overline(上划线)；line-through(删除线)】 ?? ?【text-indent：文本缩进；单位：px/em（相对当前元素一个文字的大小）】 ?? ?【line-height：行间距；单位：px】【行间距：上间距+文本高度+下间距】 5.引入方式 ?? ?【内部样式表（嵌入式）：<style>div{属性：属性值；}</style>】 ?? ?【行内样式表（行内式）：<p style="属性：属性值；"></p>】 ?? ?【外部样式表：新建css文件；在HTML页面中，使用<link>标签引入css文件；<link rel="stylesheet" href=""css文件路径>】 6.Emmet语法 ?? ?6.1快速生成HTML标签: ?? ?（1）【生成标签：标签名，按Tab键】 ?? ?（2）【生成多个标签：标签名*数字，例如：p*6】 ?? ?（3）【父子级标签：用>，例如：ul>li】 ?? ?（4）【兄弟关系：用+，例如：div+p】 ?? ?（5）【生成带有类名或者id名字的（默认div标签），直接写.demo或者#two tab键就可以了；可改变标签(p.demo)】 ?? ?（6）【生成的div类名有顺序，用自增符号$，例如：.demo$*5】 ?? ?（7）【生成标签默认显示文字，用{}，例如：div{我是睡}】 ?? ?6.2快速生成CSS样式： ?? ?（1）【采取简写形式：w200按tab可以生成width：200px；】 ?? ?6.3快速格式化代码： ?? ??? ?【右键+格式化文档】 ?? ??? ?【文件->首选项->设置；搜索emmet.include;在settings.json下的用户中添加一下语句： ?? ??? ?"editor.formatOnType":true,?? ?"editor.formatOnSave":true?? ?设置一次，自动保存】 7.复合选择器 ?? ?（1）后代选择器【元素1(父级) 元素2(子级){样式声明}；ol li {color：pink；}】 ?? ?（2）子选择器【元素1(父级)>元素2(子级){样式声明}；div>p{color：pink；}】 ?? ??? ?【选择div里面所有最近一级p标签元素】 ?? ?（3）并集选择器【元素1(父级),元素2(子级){样式声明}；ul,div{color：pink；}】?? ? ?? ??? ?【通常用于集体声明；任何形式的选择器都可以作为并集选择器的一部分】 ?? ?（4）伪类选择器【用冒号（：）表示】 ?? ??? ?1)链接伪类选择器【a:link/选择所有未被访问的链接】 ?? ??? ??? ?【a:visited/选择所有已被访问的链接】 ?? ??? ??? ?【a:hover/选择鼠标指针位于其上的链接】 ?? ??? ??? ?【a:active?? ?/选择活动链接（鼠标按下未弹起的链接）】 ?? ??? ?【为了确保生效，按照LVHA的循顺序声明；love hate】 ?? ??? ?【正常开发：a {color：#333；text-decoration：none；} ?? ??? ??? ?a:hover {color：#369；text-decoration：underline；}】 ?? ??? ?2)focus伪类选择器【用于选取获得焦点的表单元素，焦点即光标】 ?? ??? ??? ?【input:focus {background-color：yellow；}】 8.元素显示模式 ?? ?8.1块元素【独占一行；高度，宽度，外边距和内边距可以控制】 ?? ??? ?【宽度默认是容器（父级宽度）的100%；】 ?? ??? ?【是一个容器，可以放行内或者块级元素】 ?? ??? ?【注：文字类的元素内不能使用块级元素，p和h1-h6】 ?? ?8.2行内元素【相邻行内元素在一行上，一行可以显示多个】 ?? ??? ?【高，宽直接设置是无效的；默认宽度就是它本身内容的宽度】 ?? ??? ?【行内元素只能容纳文本或其他行内元素】 ?? ??? ?【注：链接里面不能再放链接；<a>里面可以放块级元素，但是给<a>转换一下块级模式更安全】 ?? ?8.3行内块元素【和相邻行内块元素在一行，之间会有空白缝隙，一行可以显示多个】 ?? ??? ?【默认宽度就是它本身内容的宽度】 ?? ??? ?【高度，行高，外边距以及内边距都可以控制】 ?? ?8.4单行文字垂直居中 ?? ??? ?【让文字的行高等于盒子的高度】 9.元素显示模式转换 ?? ?【转换为块级元素：display：block；】 ?? ?【转换为行内元素：display：inline；】 ?? ?【转换为行内块元素：display：inline-block；】 10.背景 ?? ?（1）背景颜色【background-color：颜色值；（默认transparent透明）】 ?? ?（2）背景图片【background-image：url(地址)；】 ?? ?（3）背景平铺【background-repeat：（no-repeat不平铺；repeat平铺；repeat-x横向平铺；repeat-y纵向平铺）】 ?? ?（4）背景图片位置【background-position：x y；（参数可以使用方位名词或者精确单位）】 ?? ??? ?【length：百分数|有浮点数字和单位标识符组成的长度值】 ?? ??? ?【position：top|center|bottom|left|right 方位名词】 ?? ??? ?【参数是方位名词，2个值都是方位名词，前后顺序无关； ?? ??? ??? ?只指定一个方位名词，第二个值省略，第二个值默认居中对齐】 ?? ??? ?【参数是精确单位，第一个是x坐标，第二个是y坐标； ?? ??? ??? ?只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中】 ?? ??? ?【参数是混合单位，第一个是x坐标，第二个是y坐标】 ?? ?（5）背景图像固定（背景附着）【background-attachment：scroll | fixed】 ?? ??? ?【参数：默认scroll(背景图像是随对象内容滚动)；fixed(背景图像固定)】 ?? ?（6）背景复合写法【background：背景颜色 背景图片 地址 背景平铺 背景图像滚动 背景图片位置】 ?? ?（7）背景颜色半透明【background：rgba（0,0,0,0.3）】 ?? ??? ?【最后一个参数是alpha透明度，取值范围在0-1之间】 ?? ??? ?【习惯把0.3的0省略掉；背景半透明，内容不受影响】 11.三大特性 ?? ?（1）层叠性【样式冲突，就近原则；样式不冲突，不会层叠】 ?? ?（2）继承性【子标签会继承父标签的某些样式，文字样式】 ?? ??? ?【行高的继承：body{font：12px/1.5 Microsoft YaHei；}】 ?? ??? ?【1.5为当前元素的倍数，子元素会继承父元素的行高；继承的权重为0】 ?? ?（3）优先级【选择器相同，则执行层叠级】 ?? ??? ?【选择器不同，继承 或者 *（0,0,0,0）；元素选择器（0,0,0,1）；类选择器，伪类选择器（0,0,1,0）； ?? ??? ?ID选择器（0,1,0,0）；行内样式 style=""（1,0,0,0）；!important（最大的）】 ?? ??? ?【优先级有4组数字组成，不会有进位；等级判断从左往右，如果某一位数值相同，判断下一位】 ?? ??? ?【复合选择器会有权重叠加，需要计算权重】