一、CSS样式
1、什么是CSS：
CSS是指层叠样式表（Cascading Style Sheels），CSS通常为CSS样式表或层叠样式表，主要用于设置HTML文本内容，以及版本面的布局等
2、HTML和CSS的关系：
html结构层 负责从语义的角度搭建页面结构，CSS样式层 负责从审美的角度美化页面，JavaScript行为层 负责从交互的角度提升用户体验
3、编写CSS
缺省样式（浏览器样式），可以通过设置修改浏览器的样式，所有的标签都有默认的样式
内联样式表：
<span style="clolor:red"></span>
内嵌样式表：
<head> <style>p{color:red}</style> </head>
外部样式，外联样式：新建一个文件，后缀名以.css命名（css文件）,在html页面中通过
<link rel=”stylesheet” href=””> 标签将css文件引入
书写方式的区别
内嵌式写法：
◆代码可维护性较差，没有实现css代码与html结构的完全分离
◆影响的范围只有当前页面
行内式写法：
◆代码可维护性极差，css代码和html结构没有实现分离
◆影响的范围只有当前标签
外联式写法：
◆代码可维护性高，css与html结构完全分离
◆影响范围广，当前整个网页站点。
4、CSS特性
层叠性：
样式的覆盖。 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。层叠性发生的前提： 样式冲突
<style> .one{ color: red; } .two{ color:yellow; } </style> </head> <body> <div> <p class="two one ">文字的颜色</p> 答案：黄色 </div> </body>
继承性
继承性发生的前提是标签之间属于一种嵌套关系
☞文字颜色可以实现继承
☞文字大小可以实现继承
☞字体可以实现继承
☞行高可以实现继承
与文字有关的属性都可以 实现继承
特殊性：
<a href=”#”></a> 不能继承父元素中的文字颜色（层叠掉了）
<h1></h1> 标题标签不能继承父元素中的文字大小
优先级
优先级的特点：
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
5、常见CSS属性
属性 解释 书写规范
width 宽度 300px;
height 高度 height:300px;
color 文本颜色（前景色） color:red;
Background-color 背景颜色 background-color:green;
font-size 文字大小 font-size:34px;
Text-align 内容的水平对齐方式 text-align:left|center|right
Text-indent 首行缩进 Text-indent:2em;
6、CSS注释
/*需要注释的文本*/
可以单行注释也可多行注释
7、样式表的分类
标签选择器：
a{ color:red; text-decoration:none; /*超链接去掉下划线*/ }
作用：给指定的标签添加样式
写法：标签名{属性：值；属性：值}
类选择器：
.classname{ color:red; }
写法：.自定义类名{属性：值} /* 类名前面的点很重要*/
特点：类样式表必须在相应的标签调用才生效，谁调用，谁改变。可以多个标签调用同一个类样式。同一个标签可以调用多个类样式，中间需要空格隔开。
类的命名规范：
◎不能使用纯数字或者数字加英文来命名类名称。
◎不推荐使用汉字来给类命名。
◎不能以特殊符号给命名（_除外）。
◎不推荐使用标签代码或者样式的属性来命名类名称。
Id选择器：
#IDname{ color:red; }
写法：#自定义名称{属性：值}
特点：一个页面只能被调用一次，ID选择器配合JS的使用，一个标签只能调用一个ID选择器
ID选择器命名规范
只允许出现字母、下划线、数字，只允许以字母开头，命名没有长度的限制，但是不能出现标签名
注意：ID选择器的优先级非常高，所以确定整个页面唯一出现时，才可以使用ID选择器，不然优先级问题在后续的维护中不能很好修改更新
通配符选择器
*{ padding: 0px; margin: 0px; }
写法：*{属性名：值}
*代表所有标签，会给所有的标签加上样式，会增加服务器和浏览器压力，不推荐使用
颜色的表达式
◎直接写颜色的名称
◎十六进制：0-ff,一共16个数值。#ff0000,前边2个数值对应的是红色，#00ff00,中间2个对应的是绿色，#0000ff,后边2个对应的是蓝色。
◎rgba:R:红色。 G:绿色； B:蓝色。最后一共a代表的是透明度，alpha,值是0-1.
二、文字的属性
文字的属性：
font-size: 文字大小
Font-family: 设置文字字体
文字的连写：
{font: font-style font-weight font-size/line-height font-family;}/*自定义样式名称*/
设置字体的三种方法
1、直接写字体的中文名称
p{ color: pink; font-size: 20px; font-family：“微软雅黑”； }
2、直接写字体的英文名称
div{ color: green; font-family：“songti”; font-size: 24px; width: 300px; height: 200px; background-color:orange; text-align: center; }
3、写文字的unicode编码。
.p{ font-family:"5FAE\8F6E\96C5\9ED1" }
三、复合选择器
1、交集选择器（标签指定选择器）
标签.自定义名称{属性:值;}
2、后代选择器
选择器+空格+选择器+空格+....选择器{属性:值;}
3、并集选择器
选择器+，+选择器+，+选择器{属性:值;}
4、子元素选择器：子代选择器，是让CSS选择器智能选择儿子辈的元素
例如：h1>strong{color:red;}
5、层次选择器
6、分组选择器
7、属性选择器
a、简单属性选择：h1[class]{color:red;}//选择所有拥有Class属性的h1标签
b、根据属性值选择：p[id="aside"]{color:red;}//根据属性名相等选择
c、属性名全包含：p[class~="a"]{color:red;}//只要包含属性就被选择
d、属性模糊选择
E[att^="val"]{sRules}//选择具有att属性属性值以val开头的字符串的E元素
E[att$="val"]{sRules}//选择具有att属性属性值以val结尾的字符串的E元素
e、属性模糊匹配包含
E[att*="val"]{sRules}//选择具有att属性且属性值为包含val的字符串的E元素
8、子元素选择器
9、相邻兄弟选择器
10、伪类选择器
11、伪元素选择器
通配符选择器：通配符选择器用“*”表示。他是所有选择器中作用范围最广泛的，能匹配页面中所有元素，通配符的穿透力很强，优先级会高于继承的样式会覆盖继承的样式
语法：*{属性1：属性值1；属性2：属性值2}
四、伪类
超链接默认状态下的样式a{}与a:link{}实现的效果是一样的
a:link{ 属性:值; } 超链接访问过后的样式 a:visited{ 属性:值; } 鼠标放到超链接上的样式 a:hover{ } 超链接激活状态下的样式 a:active{ } 获取焦点（光标）的时候的样式 :focus{ }