1.css插入样式的三种方法
A.内联样式表（行内）
B.内部样式表（style中）
C.外部样式表：1.创建一个外部样式表（css后缀名）；2在head中使用link元素插入样式表；
优先级：内联>内部>外部（距离元素越近优先级越高）
强制优先级：！important
2.Css选择器：样式作用的对象
A.通用选择器：“*” 如：*{color：red}；
B.元素选择器：如：标签<p>的选择器： p{color：red}；
C.id选择器（前面加#号）：如： #div1{background: yellow}
<div id = "div1">你好</div>
D.类选择器：前面加符号 .
（1）给一个元素加上多个类名
（2）指定某一个类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* p,h3,div{color: red} */
/* div{padding:15px;border: 2px blue solid;} */
.class1{color:green;}
p.class1{color: red}
#div1{background: yellow}
</style>
</head>
<body>
<h3 class="class1">你好</h3>
<p class = "class1">你好</p>
<div id = "div1">你好</div>
</body>
</html>E.属性选择器
（1）.元素【属性】：选择具有att属性的E元素，需要选择有某个的元素，而不论属性值是什么，可以使用简单属性选择器
可以根据多个属性进行选择，只需将属性选择器链接在一起即可
（2）元素【属性=“属性值”】：选择具有att属性且属性值等于val的E元素；进一步缩小选择范围
（3）元素【属性~=“属性值”】：选择具有att属性且属性值有多个，其中一个的值等于val的E元素
（4）元素【属性|=“属性值”】：选择具有att属性且属性为以val开头并用连接符“-”分隔的字符串E元素
（5）元素【属性^="属性值"】：选择具有att属性且属性值为以属性值名字一部分为开头的字符串的E元素
（6）元素【属性$="属性值"]：选择具有att属性且属性值为以属性值名字一部分为结尾的字符
（7）元素【att*="属性值"】：选择具有att属性且属性值为以属性值名字一部分为包含的字符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input[value]{background: yellow}
input[value][name]{background: red}
input[value = "电话"]{background: blue}
input[style~="12px"]{background: green}
p[lang|="en"]{color: blue;}
input[value^="vip"]{background: green}
input[value$="com"]{background: #CCFF33}
input[value*="html"]{background: #FF6666}
</style>
</head>
<body>
<input type ="text" value = "姓名" style = "padding: 10px 15px 30px">
<input type ="tel" value = "电话" style = "padding: 20px 25px 35px">
<input type ="password" value = "密码" name = ps style = "padding: 10px 15px 32px">
<input type ="email" value = "邮箱" style = "padding: 12px 13px 14px">
<textarea rows="10" cols="10"></textarea>
<p lang="en-us">html5</p>
<input type = "text" value = "vip1" >
<input type = "text" value = "vip2" >
<input type = "text" value = "vip2" >
<input type ="text" value = ".com">百度</a>
<input type ="text" value = ".html">八大</a>
</body>
</html>F.关系选择器
（1）.后代选择器（包含选择器）如ul li{}：后代选择器又称包含选择器，后代选择器可以选择为某元素后代的元素
（2）.子元素选择器ul>li：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，缩小了选择范围
（3）.相邻选择器E+F：选择紧贴在E元素之后F元素
（4）.兄弟选择器E~F：选择E元素所以兄弟元素F（只可以选择到之后的元素）
G.伪元素选择器
a.伪类选择器
（1）.E::first-letter 设置元素内的第一个字符的样式
（2）.E::first-line设置元素内的第一行的样式
（3）.E::before 在每个E元素的内容之前插入内容 用来和content属性一起使用（内容可以为图片文字等）
（4）.E::after 在每个E元素的内容之后插入内容 用来和content属性一起使用（内容可以为图片文字等）
（5）.E::selection设置对象被选择时的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p::first-letter{font-size: 50px}
p::first-line {color: blue}
a::before {
content: "点击"
}
a::after {
content: "您的关键词"
}
p::selection{background: red}
</style>
</head>
<body>
<p>锦瑟--李商隐
锦瑟无端五十弦，一弦一柱思华年。<br><br>
庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br><br>
沧海月明珠有泪，蓝田日暖玉生烟。<br><br>
此情可待成追忆？ 只是当时已惘然。<br><br>
</p>
<a href = "xxx">搜索</a>
</body>
</html>b.结构伪类选择器
（1）E:first-child 父元素的第一个子元素E
（2）：root 选择文档的根元素
（3）E:last-child 最后一个子元素E
（4）E:only-child 仅有的一个子元素E
（5）E:only-of-type 只有一种类型的子元素
（6）E:nth-child(n) 匹配父元素的第n个子元素E
a.可以直接用数值：比如2
b.可以用奇数（odd）偶数（even）
c.可以用公式3n
（7）E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
（8）E:first-of-type 匹配同类型中的第一个同级兄弟元素E
（9）E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
（10）E：nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
（11）E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
（12）E:empty 匹配没有任何子元素（包括text节点）的元素E
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
li:first-child {color: red}
li:last-child {color:blue}
p:only-child{color:#FF9933}
li:nth-of-type(2) {color:#FF666}
div:empty {background: purple;}
tr:nth-child(odd) {color: orange}
tr:nth-child(even) {color:green}
#div3:empty {width: 50px;height: 20px;background: pink}
</style>
</head>
<body>
<ul>
<li>
<ol>
<li>我是ul的孙元素</li>
<li>我是ul的孙元素</li>
<li>我是ul的孙元素</li>
<li>我是ul的孙元素</li>
</ol>
</li>
<li>我是ul的子元素</li>
<li>我是ul的子元素</li>
<li>我是ul的子元素</li>
</ul><hr>
<div id= "div3"></div>
<div id = "div1">
<p>我是段落p1</p>
</div><hr>
<div >
<p>我是段落p1</p>
</div><hr>
<div>
<h3>我是标题</h3>
<p>我是段落p1</p>
</div><hr>
<div>
<p>我是段落p1</p>
<p>我是段落p2</p>
<p>我是段落p3</p>
</div><hr>
<div>
<p>
锦瑟--李商隐
锦瑟无端五十弦，一弦一柱思华年。<br><br>
庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br><br>
沧海月明珠有泪，蓝田日暖玉生烟。<br><br>
此情可待成追忆？ 只是当时已惘然。 <br><br>
</p>
</div>
<table style = "width: 400px;height:80px;padding: 10px" border="3">
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
</body>
</html>H.UI伪类及其他选择器
（1）E：active 向被激活的元素添加样式
（2）E：hover 当鼠标悬浮在元素上方时，向元素添加样式
（3）E：link 向未被访问的链接添加样式 （必须放在E：visited前面）
（4）E：visited 向已被访问的链接添加样式
（5）E：focus 向拥有键盘输入焦点的元素添加样式
（6）E：lang（属性名）向带有指定lang属性的元素添加样式
（7）input：checked 选择每个被选中的input元素
（8）input：disabled 选择每个禁用的input元素
（9）input：enabled 选择每个启用的input元素
（10）#E：target 选择当前活动的锚点元素
（11）：not（E） 选择E元素之外的每个元素
3.文本属性
A. color （设置文本属性）；text-align 规定元素文本的水平对齐方式（left默认、right、center、justify两端对齐、start左对齐、end右对齐）
line-height：设置行高（normal、数字、百分比、px、em）；text-indent：设置文本的首行缩进（常用单位像素、百分比、em）；
text-decoration：向文本添加修饰（none默认值显示标准文本、underline下划线、overline上划线、line-through穿过一条线）
letter-spacing：设置字符间距（normal、像素：允许负值）；word-spacing：设置字、单词间距（normal）
text-transform：设置对象的文本的大小写（none标准、uppercase大写、lowercase小写、capitalize以大写开头）
text-shadow：先文本添加阴影
如：p{text-shadow：x轴阴影 y轴阴影 模糊 颜色，下一组阴影设置}