搜索
首页web前端css教程css3代码和css有不同吗

css3代码和css有不同吗

Jan 18, 2021 am 10:57 AM
csscss3

不同:css3是css技术的升级版本,css3中添加了一些新属性和选择器,可以更好更方便的进行网站的开发,例如圆角、阴影、渐变、媒体查询、“:root”选择器等。css3有兼容问题,有些属性需要添加针对浏览器的前缀以便支持,例“-ms-”。

css3代码和css有不同吗

本教程操作环境: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有不同吗

css3代码和css有不同吗

更多编程相关知识,请访问:编程视频!!

以上是css3代码和css有不同吗的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
我们如何标记Google字体并创建Goofonts.com我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由开发人员和设计师丈夫签名的附带项目,它们都是版式的忠实拥护者。我们一直在标记Google

永恒的Web开发文章永恒的Web开发文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人们询问了他们认为是关于网络开发的一些最永恒的文章的建议

与部分元素的交易与部分元素的交易Apr 12, 2025 am 11:39 AM

同一天发表了两篇文章:

使用JavaScript API的状态练习GraphQl查询使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API!碰巧的是,我得到了完美的

组件级CMS组件级CMSApr 12, 2025 am 11:09 AM

当一个组件生活在数据查询居住在附近的数据查询的环境中时,视觉组件与

将类型设置在圆上...带偏移路径将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM

这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时,它被称为Motion-Path,然后被更名。我

'恢复”在CSS中有什么作用?'恢复”在CSS中有什么作用?Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla开发人员的视频中解释了该主题。

现代恋人现代恋人Apr 12, 2025 am 10:58 AM

我喜欢这样的东西。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。