目录
1.基础选择器（标签、类、id、通配符）
1、标签选择器（选择全部同类型标签）
标签名 {
属性1：属性值1;
属性2：属性值2；
...
}
2、类选择器（样式点定义，结构类（cLass），调用一个或多个，开发最常用）
.类名 {
属性1：属性值1;
属性2：属性值2；
...
}
多类名使用方式（在标签class属性中写多个类名，多个类名中间必须用空格分开）
3、id选择器（样式#定义，结构d调用，只能调用一次，别人切勿使用）
#id名 {
属性1：属性值1;
属性2：属性值2；
...
}
4、通配符选择器（选取页面所有元素标签）
* {
属性1：属性值1;
属性2：属性值2；
...
}2.字体属性（字体、字号、粗细、风格）
font-family字体、
font-size字号大小、
font-weight字体粗细、
font-style文本风格（italic倾斜）
示例:
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei';
字体复合属性：简写的方式节约代码，顺序不能改变
模版：font: font-style font-weight font-size/line-height font-family（可省略，必须保留font-size和font-family属性）;
示例：font: italic 700 16px 'Microsoft yahei';3.文本属性（颜色、对齐方式、修饰、首行缩进、行高）
color颜色、
text-align水平对齐方式、
text-decoration文本修饰、
text-indent首行缩进（em相对单位）、
text-height行高（行间距=上间距+文字高度+下间距）4.引入方式（内部、行内、外部）
1．内部样式表（嵌入式）【<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中】
<style>
div {
color: red;
font-size: 12px;
}
</style>
2.行内样式表（行内式）【在元素标签内部的style属性中设定CSS样式】
<div style="color：red；font-size：12px;">青春不常在，抓紧谈恋爱</div>
3．外部样式表（链接式）【样式单独写到CSS文件中，之后把CSS文件引I入】
引入外部样式表分为两步：
①新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
②在HTML页面中，使用<link>标签引入这个文件（<link rel="stylesheet" href="css文件路径">）5.Emmet语法
快速生成HTML结构语法：
1．生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<div></div>
2.如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div
3．如果有父子级关系的标签，可以用＞比如ul>li就可以了
4．如果有兄弟关系的标签，用+就可以了比如 div+p
5．如果生成带有类名或者id名字的，直接写.demo或者#two tab 键就可以了
6．如果生成的div类名是有顺序的，可以用自增符号$
7．如果想要在生成的标签内部写内容可以用{}表示
快速生成CSS样式语法：
1.比如w200 按tab 可以生成width:200px; 2.比如lh26 按tab可以生成line-height:26px;6.复合选择器（后代、子、并集、伪类）
1、后代选择器（选择父元素里的子元素）
元素1 元素2 { 样式声明 }
2、子选择器（选择作为某元素的最近一级子元素）
元素1>元素2 { 样式声明 }
3、并集选择器（选择多组标签，同时为他们定义相同的样式）
元素1,元素2 { 样式声明 }
4、伪类选择器（用于向某些选择器添加特殊效果）
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
注意事项（为了确保生效，请按照LVHA的循顺序声明：:link-:visited-:hover-:active）
focus伪类选择器（选取获得焦点的表单元素，一般是<input>类表单元素才能获取）7.元素显示模式（块、行内、行内块）
1、HTML元素一般分为块元素和行内元素两种类型
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等；
①比较霸道，自己独占一行。
②高度，宽度、外边距以及内边距都可以控制。
③宽度默认是容器（父级宽度）的100%。
④是一个容器及盒子，里面可以放行内或者块级元素。
注：文字类元素（如<p>、<h1>~<h6>）不能放块级元素
常见的行内（也称内联元素）元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
①相邻行内元素在一行上，一行可以显示多个。
②高、宽直接设置是无效的。
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素。
注：链接里面不能再放链接；特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
行内块元素（在行内元素中有几个特殊的标签<img />、<input/>、<td>，它们同时具有块元素和行内元素的特点）
①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
②默认宽度就是它本身内容的宽度（行内元素特点）
③高度，行高、外边距以及内边距都可以控制（块级元素特点）
2、元素显示模式转换：
特殊情况下，元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围
转换为块元素：display：block;
转换为行内元素：display:inline;
转换为行内块：display:inline-block;
单行文字垂直居中设置：行高=盒子高度8.CSS背景（颜色、图片、平铺、图片位置、图像附着方式）
背景颜色：background-color
背景图片：background-image:none|url(url),常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
背景平铺：background-repeat:repeat|no-repeat|repeat-x|repeat-y
背景图片位置：background-position:x y
1.参数是方位名词：如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致；如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精确单位：如果参数值是精确坐标，那么第一个肯定是×坐标，第二个一定是y坐标；如果只指定一个数值，那该数值一定是×坐标，另一个默认垂直居中
3.参数是混合单位：如果指定的两个值是精确单位和方位名词混合使用，则第一个值是×坐标，第二个值是y坐标
背景图像固定（背景附着）：background-attachment:scroll|fixed，属性设置背景图像是否固定或者随着页面的其余部分滚动
背景复合写法【background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;】
背景色半透明：background:rgba(0，0，0，0.3);
注：最后一个参数a值是 alpha透明度，取值范围0~19.CSS三大特性（层叠性、继承性、优先级）
1.层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：①样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；②样式不冲突，不会层叠
2.继承性
子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
①恰当地使用继承可以简化代码，降低CSS样式的复杂性；
②子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
特：行高的继承性
body {
font:12px/1.5 Microsoft YaHei;
}
①行高可以跟单位也可以不跟单位;
②如果子元素没有设置行高，则会继承父元素的行高为1.5;
③此时子元素的行高是：当前子元素的文字大小*1.5;
④body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。
3.优先级
当同一个元素指定多个选择器，就会有优先级的产生。
①选择器相同，则执行层叠性；②选择器不同，则根据选择器权重执行
权重：继承或者*<元素选择器<类选择器，伪类选择器<ID选择器<行内样式 style=""<!important重要的
简单记忆法：通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式表为1000,!important无穷大。【继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0】
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
