css的概念:(CascadingStyleSheet级联样式表)
优点：1.内容与表现分离。(用网页的内容xhtml就可以与表象分开)
2.表象统一
3.丰富的样式
4.减少网页代码
5.运用独立于网页的css
CSS三大特性—— 继承、 优先级和层叠。
继承：即子类元素继承父类的样式;
优先级：是指不同类别样式的权重比较;
层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
css选择符分类
首先来看一下css选择符(css选择器)有哪些?
1.标签选择器(如：body,div,p,ul,li)
2.类选择器(如：class="head",class="head_logo")
3.ID选择器(如：id="name",id="name_txt")
4.全局选择器(如：*号)
5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如：div p,注意两选择器用空格键分开)
9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11.子选择器 (如：div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
css优先级
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
不同级别
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别
同一级别中后写的会覆盖先写的样式
上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css"> div.test{ background-COLOR:#a00; width:100px; height: 100px;} .test.test2{ background-COLOR:#0e0; width:100px; height: 100px;}</style></head><body><div class="test test2"></div></body></html>
到底div是应用那条规则呢，有个简单的计算方法（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高）
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2变成绿色
另外一种理解方式：
CSS优先级：是由四个级别和各级别的出现次数决定的。
四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是 行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
若是 元素选择符/伪元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
需注意的：
①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;
②、优先级相同时，则采用就近原则，选择最后出现的样式;
③、继承得来的属性，其优先级最低;
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
*css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。
CSS选择器的解析原则
以前一直认为选择器的定位DOM元素是从左向右的方向，查看了网上的相关资料之后才发现原来自己一直都是错的。郑重的声明选择器定位DOM元素是从右往左的方向，这样的好处是尽早的过滤掉一些无关的样式规则和元素 。为什么CSS选择器是从右往左解析 ？？？
简洁、高效的css
所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。
1.不要再ID选择器前使用标签名
解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。
2.不要在类选择器前使用标签名
解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.尽量少使用层级关系；
#divclass p.colclass{color:red;}改为 .colclass{color:red;}
4.使用类选择器代替层级关系（如上）
选择器：
1.标签选择器
标签名｛属性:属性值;｝
2.类选择器
.类名｛属性:属性值;｝
<标签名 class=”类名”>标签内容</标签名>
3、id选择器
#ID名称｛属性:属性值;｝
4.并集选择器
标签名,.类名，#ID名称｛属性:属性值;｝
5.后代选择器
后代选择器的写法是把外层的标签写在前面，内层的标签写在后面，之间用空格分开。当标签发生嵌套时，内层的标签就成为外层标签的后代。
P span{ 属性:属性值;}
<p>标签内嵌套<span>标签。
<span标签是><p>标签的后代，两者之间用空格隔开
6.交集选择器(注意:交集选择器之间没有空格)这种可以确定是某一个标签
标签名.类名｛｝
7.全局选择器
*｛样式；｝
Css中的注释只能是 /* 注释 */形式；
3.在HTML中引入css样式的方法
1.行内式，
<h1 style=”font-size:18px”></h1>
2.嵌入式，
将样式写在head中
<style type=”text/css”>
H1{font-size:18px；}
</style>
3.导入式与链接式，(外部css样式)
链接式:
<link href=”style.css” rel=”stylelensheet” type=”text/css”/>
导入式:
<style type=”text/css”> @import”style.css”;</style>
两者的区别是:链接是先加载样式后加载页面，导入是反之
4.样式的优先级
基本选择器之间：ID选择器>类选择器>标签选择器
样式表之间:行内样式>内嵌样式>外部样式
Css样式之间:在同一个选择器中，两条相同的声明，后一条声明会覆盖前一条声明，
5、盒子模型
盒子模型总尺寸=border-width-padding+margin+内容尺寸(宽度或高度)
6、浮动属性
Float:值(left,right,none,inherit(IE不支持不推荐使用))
与float属性结合使用的另一个属性clear，用于确定元素的那一侧不允许其他浮动元素，clear属性的值有5个，如下所示:
Left在左侧不允许浮动元素
Right:在右侧不允许浮动元素
Both:在左右侧均不允许浮动元素
None默认值，允许浮动元素出现在两侧
Inherit:规定应该从父元素继承clear属性的值，IE浏览器不支持，不推推荐使用。一般用于清除浮动时，使用both属性值的情况较多,即：
Clear:both;
7、定位属性:
1.绝对定位
position:absolute; z-index:2;(堆叠次序)
background-color：背景色。Transparent表示透明的背景色
background-attachment：确定背景图片是否跟随类容滚动，设置为fixed为固定的，scroll为滚动；
2.相对定位：position:relative;
8、控制元素显示方式
1.显示方式 display:值
2.处理盒子中的溢出：overflow：值
3.设置光标的形状:cursor:pointer(小手)
4．超链接样式:
a:link{color:#ff0000;} //未访问的链接
a：visited{color:#00CC00}//已访问的链接
a：hover{color:#000FF}//鼠标指针移动到链接上
a:active{color:#FF00FF}//选定的链接
定义样式必须是：linkàvisitedàhoveràactive
经验：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。
display:block；转换为块级元素；
网友评论