CSS3.0和CSS2.0的区别有哪些

  发布时间:2023-04-18 10:43:30   作者:佚名   我要评论
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式,由于CSS2的大量普及应用,逐渐的从CSS2开始大家就简称为CSS,那么CSS3.0和CSS2.0有什么区别
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。由于CSS2的大量普及应用,逐渐的从CSS2开始大家就简称为CSS。那么CSS3.0和CSS2.0有什么区别?本文狂人SEO为大家详细介绍。

CSS3.0和CSS2.0的区别

一、什么是CSS

CSS,英文全称为“Cascading Style Sheets”,即“层叠样式表”,是一种用于设置网页样式的标记语言,它可以为网页添加颜色、字体、背景、布局等外观样式。CSS 的设计是为了展示与内容的分离,从而使网页的结构与呈现分离出来,使得网页制作更加易于维护和升级。

在Web设计中,CSS一般应用于HTML、XHTML以及XML等Markup语言。在网页制作中,使用CSS可以实现以下功能:

1、网页布局:利用CSS中的box模型(盒子模型)来进行布局设置,可以实现简单的网页布局。
2、网页样式:CSS中定义的样式包括文字样式、背景样式、列表样式、表格样式等,使得网页更加美观。
3、响应式布局:CSS可以根据不同设备和屏幕尺寸,为网站设置不同的样式,从而实现网页响应式布局。
4、动态效果:CSS中支持多种动态效果,如渐变、动画、过渡等,使得网页更加生动、艺术化。

二、CSS3.0和CSS2.0的区别

CSS2.0是一套全新的样式表结构,是由W3C推行的,同以往的CSS1.0或CSS1.2完全不一样,CSS2.0推荐的是一套内容和表现效果分离的方式,HTML元素可以通过CSS2.0的样式控制显示效果。
可完全不使用以往HTML中的table和td来定位表单的外观和样式,只需使用div和Li此类HTML标签来分割元素,之后即可通过CSS2.0样式来定义表单界面的外观。
CSS3语言开发是朝着模块化发展,以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。
简单来说CSS2有的属性CSS3都有,但CSS3有的属性CSS2不一定有。 CSS3是最新的版本,效果上CSS2是无法相比的,CSS3可以说是CSS2的进阶,因为CSS3是在CSS2的基础上增加了一些新的属性。
比如定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等很多,这个是CSS2上没有的效果,现在新版本的浏览器基本都支持CSS3,比如IE9、FF4+、chrome11+,但是要用CSS3开发网站的话,要考虑的是还在用低版本浏览器的用户。

css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属性)。在效果方面加入了更多的效果(圆角之类的),还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好,只有一些高级版本的浏览器支持。

三、CSS3.0新增的属性

animation (and eight associated longhand properties)
background-clip
background-origin
background-size
border-radius (and four associated longhand properties)
border-image (and six associated longhand properties)
box-decoration-break
box-shadow
box-sizing
columns (and thirteen associated multi-column properties)
clear-after
flex (and eleven associated flexbox properties)
font-stretch
font-size-adjust
font-synthesis
font-kerning
font-variant-caps
hanging-punctuation
hyphens
icon
image-resolution
image-orientation
line-break
object-fit
object-position
opacity
outline-offset
overflow-wrap / word-wrap
backface-visibility
perspective
perspective-origin
pointer-events (for HTML)
resize
tab-size
text-align-last
text-decoration-line
text-decoration-skip
text-decoration-position
text-decoration-style
text-emphasis (and three associated properties)
text-justify
text-orientation
text-overflow
transform
transform-style
text-shadow
transition (and four associated longhand properties)
word-break
word-spacing
writing-mode

总的来说,CSS3.0提供了更多的新特性和功能,可以更加精细和灵活地控制网页样式和布局,如圆角、阴影、伪类。但CSS3中90%以上CSS样式单词是CSS2的,只是在CSS上新增和重用小部分CSS单词样式。所以要学习CSS3必须的掌握CSS2常用样式和语法、灵活应用布局技巧,才能灵活使用CSS3样式。

 

相关文章

  • 使用CSS+HTML实现简单的魔幻霓虹灯文字特效

    这篇文章主要介绍了使用CSS+HTML实现简单的魔幻霓虹灯文字特效,CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样
    2023-05-08
  • css实现电梯导航的项目实践

    CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小,本文主要介绍了css实现电梯导航,具有一定的参考价值,感兴趣的可以了解
    2023-05-06
  • CSS中calc(100%-100px)不加空格不生效

    本文主要介绍了CSS中calc(100%-100px)不加空格不生效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2023-05-05
  • css弧边选项卡的项目实践

    本文主要介绍了css弧边选项卡的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • CSS实现鼠标悬浮动画特效

    Css(层叠样式表)是种格式化网页的标准方式,用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,
    2023-05-04
  • CSS link与@import的区别和用法解析

    CSS的link和@import都是用于引入外部CSS文件的方法,但它们有一些区别和不同的用法,本文通过一个简单的代码演示,展示了link和@import的用法,感兴趣的朋友跟随小编一起看
    2023-05-04
  • 使用CSS实现百叶窗效果示例代码

    这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的,做出来的百叶窗效果也是很丝滑,文中提供了详细的代码,需要的朋友可以参考
    2023-04-28
  • 使用CSS实现按钮边缘跑马灯动画

    这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的,文中提供了详细的代码,需要的朋友可以参考下
    2023-04-28
  • css旋转导航的示例代码

    本文主要介绍了css旋转导航的示例代码,文中通过示例代码介绍的非常详细,该导航可用在一些网站首页导航栏中,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-27
  • css实现交融文字效果的项目实践

    这篇文章将介绍如何使用CSS实现交融文字效果,这是一种独特的标题设计,可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性,我们可以创建出字母之间交
    2023-04-27

最新评论

?


http://www.vxiaotou.com