首页 > 代码库 > css常用或不熟悉的
css常用或不熟悉的
css优先级:
!important 〉 行内样式 > id选择器 > 类选择器|伪类选择器 > 标签选择器 > 通用选择器 > 继承属性
综合优先级(只讨论选择器):
则下列选择器的优先级如何呢?
.a1 div{}
.a1 .a2{}
.a1 div .a2 span{}
#d1 div {}
#d1 .a1 {}
则他们比较优先级的原则是:
1, 比较最高的优先级选择器的多少,多者胜;
2, 最高的数量相等的时候,比较次高,多者胜;
3, 依次类推
css背景:
background-color: 背景颜色
background-image: url(背景图的路径);
background-repeat: 设置背景图的重复特性,有:repeat(默认值),no-repeat,repeat-x, repeat-y
background-position: 需要两个值:水平位置 垂直位置。
è background:综合属性可以设置背景的所有特性,包括上述所有。
一个常见错误:
background-image: url( images/abc.gif ) no-repeat center center;
——background-image是独立属性,只能设置背景图,不能设置其他值了。
列表样式
list-style-type: 设置列表符号,可以是我们之前学的无序列表符或有序列表符。
list-style-image:设置列表的图片(此时list-style-type自动就无效了,被代替了)
list-style-position: 指将列表符放在li的里面还是外面:outside(外面,默认值),inside(里面)
list-style: 这是综合属性,可以设置上述几个。
border样式:
线有3个方面的特性:线型,线宽,线色,每个特性都可以单独控制。边框也有4个方向,每个方向都可以单独控制。
border-top-style: 顶部边框的线型。常见线型:solid , dashed, dotted
border-top-width: 顶部边框的线宽;
border-top-color: 顶部边框的线色;
border-right-style, border-right-width, border-right-color, ......就是12个
除此之外,我们还有3个设置线的某方面特性的综合属性:
border-style: 可以使用1-4个值,用来设置4个方向的线的线型,比如:border-style:solid dashed; 表示上下边框为实线,左右边框为虚线;
border-width: 同理,可以设置1-4个值,表示4个方向的线宽。
border-color:同理。
还有:4个设置每个方向边框的所有特性的综合属性:
border-top: 线型 线宽 线颜色;
border-right: 线型 线宽 线颜色;
border-bottom: 线型 线宽 线颜色;
border-left: 线型 线宽 线颜色;
最后,一个最大的综合属性:一次性设置4个方向的3个特性:
border: 线型 线宽 线颜色;
定位属性:position
1, position:static ——静态定位(默认)
2, position:relative; ——相对定位(相对正常文档流定位,不会脱离文档流,占原来布局空间大小)。
3, position:absolute; ——绝对定位(相对整个网页主体,脱离文档流,不占布局空间)。
4, position:fixed; ——固定定位(相对于浏览器窗口,脱离文档流,不占布局空间)。
块盒子和行内盒子相互转换
块盒子,其display属性的值默认是block
行内盒子,其display属性的值默认是inline;
div{ display: inline;} ——此时div就跟span一样。
span{ display: block;} ——此时span就跟div一样。
display: none 不显示