CSS3 簡介LOGIN

CSS3 簡介

简介

CSS 即层叠样式表(Cascading Stylesheet)。Web 开发中采用 CSS 技术,可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改,就可以改变网页的外观和格式。CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等,目前有很多浏览器已经相继支持这项升级的规范,如:Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序,提高用户体验,同时也能极大的提高程序的性能。

CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。

一些最重要CSS3模块如下:

选择器

盒模型

背景和边框

文字特效

2D/3D转换

动画

多列布局

用户界面


列举一些新的特性:

边框

border-color 属性
boder-image 属性
border-radius 属性
box-shadow 属性

背景

background-origin 属性和 background-clip 属性
background-size 属性
多重背景

颜色

HSL 颜色值
HSLA 颜色值
opacity 属性
RGBA 颜色值

文字效果

text-shadow 属性
text-overflow 属性
word-wrap 属性

用户界面

box-sizing 属性
resize 属性
outline 属性
nav-top、nav-right、nav-bottom、nav-left 属性

选择器

属性(attribute)选择器

基本盒模型

overflow-x 属性和 overflow-y 属性

生成的内容

content 属性

其它模块

media queries 模块
multi-column layout 模块
Web 字体模块
Speech 模块



下一節
<meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:75px; background-color:blue; border:1px solid black; } div{ -webkit-text-fill-color: red; -webkit-text-stroke-color: yellow; -webkit-text-stroke-width: 1.75px; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(60deg); /* Safari and Chrome */ } </style> </head> <body> <div>请看文字特效</div> <div id="div2">请看图形特效</div> </body> </html>
章節課件