CSS3.0和CSS2.0的区别有哪些
我要评论CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。由于CSS2的大量普及应用，逐渐的从CSS2开始大家就简称为CSS。那么CSS3.0和CSS2.0有什么区别？本文狂人SEO为大家详细介绍。
一、什么是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可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API：filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26- overscroll-behavior是CSS中用于控制元素滚动边界行为的属性,可通过设置为auto、contain或none来指定当元素滚动超出边界时的处理方式,本文给大家介绍CSS 中的overscroll-be2024-09-26
本文介绍了如何通过CSS实现具有四角边框的效果,使用了linear-gradient和background属性来创建边框,并设置了背景尺寸,文章还提供了Vue中图片资源引用的示例代码,适合想要为2024-09-24CSS的:required和:optional伪类：如何增强表单字段的视觉识别
在网页设计中,使用CSS的:required和:optional伪类可以有效增强表单字段的视觉识别,提升用户体验和表单的可访问性,这两个伪类分别用于区分必填和非必填字段,通过添加不同的2024-09-18
本文介绍了CSS中设置边框的几种主要属性,包括边框样式（如实线、虚线等）、边框宽度（可以单独设置每个方向的宽度）、边框颜色（支持单独为每个方向设置颜色）以及圆角边框2024-09-18
通过CSS3和JS,实现前端炫酷的视差滚动和抖动效果,本文详细介绍了相关CSS样式和JS脚本,通过监听滚动条位置并调整元素的top属性来达到视差效果,当到达特定位置时,利用CSS动画2024-09-13CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案(推荐)
在CSS中，可以通过简单的样式设置实现文本超出隐藏并显示省略号的效果,这些方法主要适用于WebKit内核的浏览器，对于其他浏览器，可采用JavaScript或CSS Fallback等方案,文2024-09-11
这篇文章主要介绍了css 自定义变量 var()案例分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，感兴趣的朋友跟随小编一起看看吧2024-08-28
最新评论