标签:
一 css的三种使用方式
1 内嵌式
<style>
css代码
</style>
特点:
结构和样式有一定的分离
可维护性较高
可以影响当前页面
2 外联式
<link rel=”stylesheet” href=”css文件的路径” >
特点:
结构和样式完全分离
可维护性最高
可以影响所有引用它的页面
3 行内式(内联式)
特点:
结构和样式混合在一起
可维护性最差
只能影响当前标签
二 HTML元素的显示方式
1 块级元素
典型代表:
div,li,ul,p,h
特点:
1 会独自占据一行
2 可以设置有效宽高
3 当发生嵌套,子元素没有设置宽度,子元素会跟父元素长得一样宽
2 行内元素
典型代表:
span,em,strong,a
特点:
1 多个行内元素在一行上显示
2 不能设置有效宽高
3 宽高取决于内容
3 行内块级元素
典型代表:
img,input
特点:
1 多个行内块元素在一行上显示
2 可以设置有效的宽高
4 显示模式转换
display
block 块级
inline 行内
inline-block 行内块
display:inline-block 把非行内块元素转换为行内块元素
三 background
1 与background相关的属性
background-color 控制背景的颜色
颜色的三种表示方式都可以
background-image 背景图片
background-repeat 背景图片平铺方式
repeat 平铺
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺
background-position 控制背景图片的位置
水平和垂直的大体位置
水平: left 图片左对齐
center 图片居中对齐
right 图片右对齐
垂直:
top 图片上对齐
center 图片居中对齐
bottom 图片下对齐
用长度赋值
水平
垂直
注意一定: 总是把水平方向的位移写在最前面
background-attachment 控制背景图片是否随着滚动条滚动
fixed 固定,不滚动
scroll 滚动
2 background连写
背景的连写: 顺序不论,都可以省略。
四 伪类
1 a:link
作用:控制a标签所指向的地址,被浏览器访问前的样式
2 :hover
控制标签当鼠标移动到它的范围内时的样式
3 a:active
控制标签被激活(鼠标按下,没有松开)时的样式
4 a:visited
控制a标签被访问过后的样式
使用的顺序:
love hate
link,visited,hover,active
否则可能会不起效果
5 :focus
控制input获得焦点时的样式
五 CSS三大特性
1 层叠性
属性冲突:多个选择器都设置了这个属性
当多个选择器修饰同一个标签,并且发生属性冲突的时候,某个选择器的属性最终会作用在这个标签上 --- 层叠性
2 继承性
发生嵌套关系的时候,子元素会从父元素那里得到一部分属性 ---- 继承性
color,text-系列,font-系列,line-系列
a不继承color,text-decoration:none
h系列,不继承font-weight
3 优先级
当选择器作用在标签上的时候,是存在优先级的
继承 < 标签 < class选择器 < id选择器 < 行内样式 < !important
0 1 10 100 1000 10000
1 存在优先级
2 权重可以叠加
3 继承的权重总是为0
4 权重计算
就是把选择器的权重相加到一起,最终权重最大的选择器可以层叠权重低的选择器
标签:
原文地址:http://www.cnblogs.com/pengzijun/p/5699777.html