CSS3学习笔记

摘要: CSS3学习笔记

css3学习笔记

1.css3的发展史

HTML的诞生 20世纪90年代初

1996年底 css第一版诞生

1998年5月 css2正式发布

2004年 css2.1发布

css3的发布... (时间段，不是时间点)

2.css3模块介绍

css1中定义了网页的基本属性：

字体，颜色，补白，基本选择器等

css2中在css1的基础上添加了高级功能

浮动和定位，高级选择器等（子选择器，相邻选择器，通用选择器）

css3遵循的是模块化开发，发布时间不是一个时间点，而是一个时间段。

3.css3新特性预览

1.强大的css选择器.

2.新的颜色制式和透明设定.

3.多栏布局的实现.

4.多背景图效果.

5.文字阴影效果.

6.开放的网络字体类型.

7.圆角.

8.边框背景图片.

9.盒子阴影.

10.媒体查询.

CSS的负面因素

1.IE浏览器这个拖油瓶（IE9开始支持css3,但是效果不怎么样）

2.CSS验证问题

3.代码冗余，臃肿

1.元素选择器

* 通配选择符 所有元素对象

E 类型(HTML)选择符 以文档语言对象类型作为选择符。

E#myid id选择符 以唯一标识符id属性等于myid的E对象作为选择符

E.myclass class选择符 以class属性包含myclass的E对象作为选择符

2.关系选择器

E F 包含选择器 选择所有被E元素包含的F元素(子孙都包含)

E>F 子选择器 选择所有作为E元素的子元素的子元素F(只包含子元素)

E+F 相邻选择器 选择紧贴在E元素之后F元素

E~F 兄弟选择器 选择E元素后面的所有兄弟F元素(CSS3新增)

3.伪类选择器

E:link 连接伪类选择器 设置超链接a在未被访问前的样式

E:visited 链接伪类选择器 设置超链接a在其链接地址已被访问过时的样式

E:hover 用户操作伪类选择器 设置元素在其鼠标悬停时的样式

E:active 用户操作伪类选择器 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式

E:focus 用户操作伪类选择器 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。

E:lang() :lang()伪类选择器 匹配使用特殊语言的E元素。

4.属性选择器

E[att] 选择具有att属性的E元素

E[att="val"] 选择具有att属性且属性值等于val的E元素

E[att~="val"] 选择具有att属性且属性值作为一用空格分隔的字词列表，其中一个等于val的E元素

E[att|="val"] 选择具有att属性且属性值以val开头并用连接符“-”分隔的字符串的E元素。

5.伪对象选择器

E:first-letter 设置对象内的第一个字符的样式

E:first-line 设置对象内的第一行的样式

E:before 设置在对象前(依据对象树的逻辑结构)发生的内容，用来和content属性一起使用

E:after 设置在对象后(依据对象树的逻辑结构)发生的内容，用来和content属性一起使用。

6.结构伪类选择器

E:root 匹配E元素在文档的根元素。（CSS3）

E:first-child 匹配父元素的第一个子元素E。（CSS2）（父节点的第一个子元素必须是E类型元素，其他父子类型标签同理）

E:last-child 匹配父元素的最后一个子元素E。（CSS3）

E:only-child 匹配父元素仅有的一个子元素E。（CSS3）

E:nth-child(n) 匹配父元素的第n个子元素E。（CSS3）

E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。（CSS3）

E:first-of-type 匹配同类型中的第一个同级兄弟元素E。（CSS3）（E元素同级元素中第一个E类型元素，不要求父节点的第一个子元素必须是E类型元素）

E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。（CSS3）

E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。（CSS3）

E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。（CSS3）

E:empty 匹配没有任何子元素(包括text节点)的元素E。（CSS3）

注:

1.div 元素 <div> 标签

2.E:nth-of-type(2){color:#f00;} 选中指定序号(正序)

3.E:nth-of-type(even){color:#f00;} 选中奇odd偶even类型(正序)

4.E:nth-of-type(3n+1){color:#f00;} 选中自定义序列类型(正序)

5.在E:root跟踪器中，html页面的根元素永远都是html元素