css3代码和css有不同吗

不同: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(标准通用标记语言下的一个应用)中,根元素永远是HTMLE:nth-child(n)匹配父元素中的第n个子元素EE:nth-last-child(n)匹配父元素中的倒数第n个结构子元素EE:nth-of-type(n)匹配同类型中的第n个同级兄弟元素EE:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素EE:last-child匹配父元素中最后一个E元素E:first-of-type匹配同级兄弟元素中的第一个E元素E:only-child匹配属于父元素中唯一子元素的EE:only-of-type匹配属于同类型中唯一兄弟元素的EE:empty匹配没有任何子元素(包括text节点)的元素E目标伪类E:target匹配相关URL指向的E元素UI元素状态伪类E:enabled匹配所有用户界面(form表单)中处于可用状态的E元素E:disabled匹配所有用户界面(form表单)中处于不可用状态的E元素E:checked匹配所有用户界面(form表单)中处于选中状态的元素EE::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浏览器兼容情况:

1.gif

1.jpg

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

以上就是css3代码和css有不同吗的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2881029.html

(0)
上一篇 2025年3月10日 19:59:10
下一篇 2025年3月10日 19:59:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css设置背景颜色

    css设置背景颜色的方法:首先创建一个HTML示例文件;然后在head头部中添加style标签;接着在body中定义一个p标签和h1标签;最后通过background-color属性设置相应的背景颜色即可。 本文操作环境:宏基s40-51、…

    2025年3月10日
    200
  • 谈谈CSS中的混合模式

    什么是混合? 根据维基百科: ❝数字图像编辑和计算机图形中的混合模式(或混合模式)用于确定两个图层如何相互混合。在大多数应用程序中,默认的混合模式只是通过用顶层的内容覆盖底层来隐藏底层。❞ 在CSS中,有两个属性负责混合。mix-blend…

    2025年3月10日 编程技术
    200
  • css规则定义怎么设置行间距

    在css规则中,可以使用Line-height属性来设置行间距,语法格式“line-height:值”。line-height属性可以设置行使用的空间量,即行间的距离;line-height属性的值越大,那么行间距就越高。 本教程操作环境:…

    2025年3月10日
    200
  • css 9pt等于多少px

    CSS 9pt等于12px。pt和px的计算公式为“pt=px*dpi/72”,而以Windows下的96dpi(默认)来计算,“9pt = 9 * 1/72 * 96 = 12px”。 本教程操作环境:windows7系统、css3版、D…

    2025年3月10日
    200
  • css怎么控制按钮不可用

    方法:给按钮元素添加“pointer-events:none;”样式来让按钮元素永远不会成为鼠标事件的target,让其点击事件失效,即可控制按钮不可用。 本教程操作环境:windows7系统、css3&&html5版、De…

    2025年3月10日
    200
  • css如何设置一行字显示不完隐藏

    css中可利用overflow属性来设置一行字显示不完就隐藏;只需给文字的盒子元素添加“overflow:hidden;”样式,设置当内容溢出元素框时,将文字内容修剪,且溢出部分不可见即可。 本教程操作环境:windows7系统、css3&…

    2025年3月10日
    200
  • CSS外链式与内联式的区别是什么

    区别:CSS外链式是将css代码单独写一个以“.css”为扩展名的文件中,然后使用link标签链接到html中。CSS内联式是直接使用style属性将css代码写在HTML标签中。内联式的权重高于内联式。 本教程操作环境:windows7系…

    2025年3月10日
    200
  • css有继承关系吗

    css有继承关系。CSS继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代;也就是说:设置了上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此样式。 本教程操作环境:windows7系统、css3…

    2025年3月10日
    200
  • css3给背景图层加颜色遮罩的方法

    (学习视频分享:css视频教程) 在开发中,有时遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法。 方法一:通过定位叠加(注意层级)       .wrap1 {    position: relative;  …

    2025年3月10日
    200
  • 浅谈使用CSS实现半透明边框和多重边框效果的方法

    本篇文章分两种场景给大家介绍一下css实现半透明边框与多重边框效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 (学习视频分享:css视频教程) 场景一: 实现半透明边框: 立即学习“前端免费学习笔记(深入)”; 由于…

    2025年3月10日 编程技术
    200

发表回复

登录后才能评论