1、css概念--层叠样式表
2、css语法
选择器{
声明块;
}
3、css三种表达方式
- 行内样式
<标签名 style="属性名:属性值;"></标签名>
- 内部样式表
<style type="text/css">
选择器{
声明块;
}
</style>
- 外联样式表
<link ref="stylesheet" type="text/css" href="...."/>
4、css三大特性
层叠性、继承性、优先级
5、css选择器
元素选择器--元素名称{}
id选择器--#id名{}
类选择器--.类名{}
并集元素选择器--选择器1,选择器2{}
交集元素选择器--选择器1选择器2{}
通配符--*{}
后代元素选择器--祖先元素 后代元素{}
子代元素选择器--父元素>子元素{}
兄弟元素选择器
兄弟元素后面的第一个兄弟元素:兄弟元素1+兄弟元素2{}
兄弟元素后面的所有兄弟元素:兄弟元素1~兄弟元素2{}
属性选择器
选择器[属性名]
选择器[属性名=属性值]
选择器[属性名^=属性值开头]
选择器[属性值$=属性值结尾]
选择器[属性值*=属性值含有的字母]
伪类选择器
a的伪类
a:link普通链接
a:visited被访问过的链接,为了用户隐私,只能设置颜色
a:hover鼠标移入时
a:active鼠标点击时
注意:hover和active可以给a元素以外的元素设置样式,但是ie6不能识别这个a以外的元素的hover和active的样式
:focus获取焦点
::selection
不支持ie8及以下浏览器,
不支持火狐浏览器,但是可以通过::-moz-selection来设置
:before
:after
:first-letter
:first-line
:first-child选中所有元素中的第一个子元素
:last-child
:nth-child(数字/even/odd)
:first-of-type选中指定类型中的第一个子元素
:last-of-type
:nth-of-type(数字/even/odd)
6、css选择器优先级
!important 最高
行内样式 1000
id选择器 100
类选择器 10
元素选择器 1
通配符 0
继承样式 没有优先级