CSS3 层叠样式表

CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS和CSS3的区别

大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题,这里把所有的变化整理到一份表格中便于学习和查阅[3]  。不能保证没有遗漏,欢迎大家补充。
新增的 属性 新增的每个属性新值 新增的选择器 其它 新特性
  • 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 3D 行星运转动画 + 浏览器渲染原理
本篇内容主要为大家提供的是CSS3 3D 行星运转动画 + 浏览器渲染原理。感兴趣的同学可以参考学习下,具体内容如下:

发布于 2016-04-30 11:44:29 | 45 次阅读

CSS3进阶:酷炫的3D旋转透视
本篇内容主要为大家提供的是CSS3进阶:酷炫的3D旋转透视。感兴趣的同学可以参考学习下,具体内容如下:

发布于 2016-04-23 12:20:14 | 51 次阅读

简单了解CSS3的all属性
本篇内容主要为大家提供的是简单了解CSS3的all属性。感兴趣的同学可以参考学习下,具体内容如下:

发布于 2016-03-25 17:58:38 | 32 次阅读

理解CSS3中的background-size(对响应性图片等比例缩放)
本篇内容主要为大家提供的是理解CSS3中的background-size(对响应性图片等比例缩放)。感兴趣的同学可以参考学习下,具体内容如下:

发布于 2016-03-11 10:34:50 | 31 次阅读

神通广大的CSS3选择器
本篇内容主要为大家提供的是神通广大的CSS3选择器。感兴趣的同学可以参考学习下,具体内容如下:

发布于 2016-02-04 22:14:40 | 27 次阅读

CSS3原生支持div铺满浏览器的方法
本篇内容为大家讲解的是CSS3原生支持div铺满浏览器的方法,感兴趣的同学参考学习下,本文内容如下:

发布于 2016-01-12 15:46:09 | 53 次阅读

【CSS3】响应式布局的实际应用的小例子
本篇内容为大家讲解的是【CSS3】响应式布局的实际应用的小例子有需要的同学参考学习,全文如下:

发布于 2016-10-12 16:54:42 | 15 次阅读

prefix css3漏斗Loading加载动画
本篇内容为大家讲解的是prefix css3漏斗Loading加载动画有需要的同学参考学习,全文如下:

发布于 2016-10-13 10:54:33 | 16 次阅读

border-radius 样式表CSS3圆角属性
本篇内容为大家讲解的是border-radius 样式表CSS3圆角属性有需要的同学参考学习,全文如下:

发布于 2016-10-12 17:18:27 | 22 次阅读

CSS3新特性简介
本篇内容为大家讲解的是CSS3新特性简介有需要的同学参考学习,全文如下:

发布于 2016-10-15 11:24:49 | 18 次阅读

CSS3新属性:在网站中使用访客电脑里没有安装的字体
本篇内容为大家讲解的是CSS3新属性:在网站中使用访客电脑里没有安装的字体有需要的同学参考学习,全文如下:

发布于 2016-10-17 15:25:15 | 15 次阅读


Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务