CSS3和CSS2.1的区别

CSS3和CSS2.1的区别

大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题,这里把所有的变化整理到一份表格中便于学习和查阅  。不能保证没有遗漏,欢迎大家补充。

新增的 属性 新增的每个属性新值 新增的选择器 其它 新特性
  • 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
  • Value “local” for the background-attachment property
  • Value "rgba()" for any property that accepts a color value
  • Value "hsl()" for any property that accepts a color value
  • Value "hsla()" for any property that accepts a color value
  • Value "currentColor" for any property that accepts a color value
  • Value "inset()" for the clip property
  • Value "linear-gradient()" for any property that accepts an image value
  • Value "radial-gradient()" for any property that accepts an image value
  • Value "repeating-linear-gradient()" for any property that accepts an image value
  • Value "repeating-radial-gradient()" for any property that accepts an image value
  • Value "image()" for any property that accepts an image value
  • Multiple comma-separated images for any property that accepts an image value
  • Multiple comma-separated background-related values to match multiple background image declarations
  • Value "center" for the position property
  • Value "page" for the position property
  • Value "space" for the background-repeat property
  • Value "round" for the background-repeat property
  • 15 new values for the cursor property
  • Values "flex" and "inline-flex" for the display property
  • Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property
  • Multiple, space-separated values for the letter-spacing property
  • New values for the text-align property, including "<string>", "match-parent", "start", "end", and "start end"
  • text-decoration is now a shorthand property
  • Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property
  • Value "full-width" for the text-transform property
  • rem units for lengths
  • calc() units for lengths
  • toggle() units
  • Angle units (deg, grad, rad, turn)
  • Time units (s, ms)
  • Substring matching attribute selectors ([att^=val], [att$=val], [att*=val])
  • :target pseudo-class
  • New pseudo-classes: :enabled, :disabled, :checked, and :indeterminate
  • :root pseudo-class
  • New expression-based structural pseudo-classes: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
  • Other new structural pseudo-classes: :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty
  • The negation pseudo-class :not()
  • Four pseudo-elements with double-colon syntax (::first-line, ::first-letter,::before, ::after)
  • The following-sibling combinator (p ~ img)
  • ::selection pseudo-class (removed from the spec, but everyone uses it)
  • @font-face
  • Media Queries
  • Keyframe animations using @keyframes
  • Conditional styles using @supports
  • Namespacing using @namespace
  • Regions
  • Filters

注:仍在变化中的特性


  

  • Counter Styles Level 3
  • Device Adaptation
  • Display Module Level 3
  • Line Grid
  • Mobile Text Size Adjustment
  • CSS Variables
  • Box Alignment
  • The "all" property
  • Exclusions and Shapes
  • Generated Content for Paged Media
  • Grid Layout
  • Grid Template Layout
  • Line Layout Module
  • New features in Lists and Counters
  • Overflow Module
  • New features in Paged Media
  • New features in CSS Sizing
  • Media Queries Level 4
  • Selectors Level 4
  • ch units
  • Viewport relative lengths
  • New resolution units
  • Compositing and Blending
  • New features in CSS speech
  • The unicode-range descriptor for @font-face
  • New features in CSS Images and Replaced Content
  • CSS Masking

  

CSS3 模块编辑

CSS3被拆分为"模块"。

旧规范已拆分成小块,还增加了新的。

一些最重要CSS3模块如下:

    • 选择器
    • 盒模型
    • 背景和边框
    • 文字特效
    • 2D/3D转换
    • 动画
    • 多列布局
    • 用户界面
时间: 2024-10-05 23:25:06

CSS3和CSS2.1的区别的相关文章

css3 翻转和旋转的区别

我以前一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明白,只能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是:rotate,scale,skew,translate 旋转:(rotate) -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg); /* 何问起 hovertree.com

css3 nth-child 与 nth-of-type 的区别

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器. 先看一个简单的实例,首先是HTML部分: <section> <p>我是第1个p标

2018年1月17日总结 css3里transition 和animation 区别

transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>>  a. 在做项目中经常会遇见这样的情景,比如一个按钮,当鼠标移入进去的时候改版按钮背景颜色以及字体颜色.此时外面一般会这样做: .btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} .b

CSS3选择器:nth-child与:nth-of-type区别

一.:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型.n可以是数字.关键词或公式. 注意:如果第N个子元素与选择的元素类型不同则样式无效! 1.2 示例 <style> div>p:nth-child(2){ color:red; } </style> <div> <p>我是第1个段落</p> <p>我是第2个段落</p><!--符合条件:1.是

CSS3::nth-child与:nth-of-type区别

一.:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型.n可以是数字.关键词或公式. 注意:如果第N个子元素与选择的元素类型不同则样式无效! 1.2 示例 <style> div>p:nth-child(2){ color:red; } </style> <div> <p>我是第1个段落</p> <p>我是第2个段落</p><!--符合条件:1.是

CSS3的笔记总结

css3  就是css2 的一个升级版本.css2 是用来做效果渲染的,而css3 可以使做出来的效果更佳丰富. C3有兼容性问题,移动端支持稍微要好些. 坚持以下原则: (1)渐进增强 (2)添加私有前缀 (3)考虑用户群体 [ 选择器 ]css3 在之前的基础上面扩展了三种类型的选择器 (获取到一个元素有多重方式,我们要控制页面上面的元素,必须先得到页面上面的元素,假设你的页面的层级结构比较复杂的时候) (1)属性选择器 a[href] 所有的a 标签,这个a需要有 href 属性 a[hr

CSS3 的一些新特性以及效果

深入了解 CSS3 新特性 来源: ibmdeveloperworks  发布时间: 2012-02-06 15:34  阅读: 5114 次  推荐: 3   原文链接   [收藏] 摘要:现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

前端CSS3笔记

第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1   CSS3的现状 1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 1.2   如何对待 1.坚持渐进增强原则 2.考虑用户群体 3.遵照产品的方案 4.听Boss的 第2章准备工作 2.1   统一环境 由于CSS3兼容性问题的普遍存在,为了避