1. 首页
  2. 主题
  3. CSS3 层叠样式表

CSS3 层叠样式表

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 技术手把手教你玩转。感兴趣的同学可以参考学习下，具体内容如下：

发布于 2017-07-16 21:36:58 | 161 次阅读

Css3制作变形与动画效果
本篇内容主要为大家讲解的是Css3制作变形与动画效果。感兴趣的同学可以参考学习下，具体内容如下：

发布于 2017-07-17 01:37:44 | 137 次阅读

CSS3实现动态背景登录框的代码
本篇内容主要为大家讲解的是CSS3实现动态背景登录框的代码。感兴趣的同学可以参考学习下，具体内容如下：

发布于 2017-07-11 08:28:00 | 221 次阅读

CSS3 3D 行星运转动画 + 浏览器渲染原理
本篇内容主要为大家提供的是CSS3 3D 行星运转动画 + 浏览器渲染原理。感兴趣的同学可以参考学习下，具体内容如下：

发布于 2016-04-30 03:44:29 | 293 次阅读

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

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

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

发布于 2016-03-25 09:58:38 | 173 次阅读

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

发布于 2016-03-11 02:34:50 | 174 次阅读

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

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

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

发布于 2016-01-12 07:46:09 | 217 次阅读

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

发布于 2016-10-12 08:54:42 | 148 次阅读

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

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

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

发布于 2016-10-12 09:18:27 | 200 次阅读

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

发布于 2016-10-15 03:24:49 | 150 次阅读

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

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

最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 月排行榜
    后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务