本教程操作环境:windows7系统、css3版、dell g3电脑。
(学习视频分享:css视频教程)
css3是css(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日w3c完成了css3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
css演进的一个主要变化就是w3c决定将css3分成一系列模块。浏览器厂商按css节奏快速创新,因此通过采用模块方法,css3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂。
css3的语法
css3的语法是建立在css原先版本基础上的,它允许使用者在标签中指定特定的html元素而不必使用多余的class、id或javascript。css选择器中的大部分并不是在css3中新添加的,只是在之前的版本中没有得到广泛的应用。如果想尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离,高级选择器是非常有用的,它们可以减少在标签中的class和id的数量并让设计师更方便地维护样式表。
新增的选择器如下表所示:
选择符类型
表达式
描述
子串匹配的属性选择符
e[att^=val]
匹配具有att属性、且值以val开头的e元素
e[att$=val]
匹配具有att属性、且值以val结尾的e元素
e[att*=val]
匹配具有att属性、且值中含有val的e元素
结构性伪类
e:root
匹配文档的根元素。在html(标准通用标记语言下的一个应用)中,根元素永远是html
e:nth-child(n)
匹配父元素中的第n个子元素e
e:nth-last-child(n)
匹配父元素中的倒数第n个结构子元素e
e:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素e
e:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素e
e:last-child
匹配父元素中最后一个e元素
e:first-of-type
匹配同级兄弟元素中的第一个e元素
e:only-child
匹配属于父元素中唯一子元素的e
e:only-of-type
匹配属于同类型中唯一兄弟元素的e
e:empty
匹配没有任何子元素(包括text节点)的元素e
目标伪类
e:target
匹配相关url指向的e元素
ui元素状态伪类
e:enabled
匹配所有用户界面(form表单)中处于可用状态的e元素
e:disabled
匹配所有用户界面(form表单)中处于不可用状态的e元素
e:checked
匹配所有用户界面(form表单)中处于选中状态的元素e
e::selection
匹配e元素中被用户选中或处于高亮状态的部分
否定伪类
e:not(s)
匹配所有不匹配简单选择符s的元素e
通用兄弟元素选择器
e ~ f
匹配e元素之后的f元素
css3新增特性
css3新增了很多特性,例如圆角效果、图形化边界、块阴影与文字阴影、使用rgba实现透明效果、渐变效果、使用@font-face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。
兼容问题
浏览器厂商以前就一直在实施css3,虽然它还未成为真正的标准,但却提供了针对浏览器的前缀:
chrome(谷歌浏览器):-webkit-
safari(苹果浏览器):-webkit-
firefox(火狐浏览器):-moz-
le(ie浏览器):-ms-
opera(欧朋浏览器):-0-
例如,css3渐变样式在firefox和safari中是不同的。firefox使用-moz-linear-gradient,而safari使用-webkit-gradient,这两种语法都使用了厂商类型的前缀。
需要注意的是,在使用有厂商前缀的样式时,也应该使用无前缀的。这样可以保证当浏览器移除了前缀,使用标准css3规范时,样式仍然有效。例如:
#example{ -webkit-box-shadow:0 3px 5px#fff; -moz-box-shadow:0 3px 5px#fff; -o-box-shadow:0 3px 5px#fff; box-shadow:0 3px 5px#fff;/*无前缀的样式*/}
css3浏览器兼容情况:
更多编程相关知识,请访问:编程视频!!
以上就是css3代码和css有不同吗的详细内容。