CSS 3 – 前途一片光明 - SLJ.me

CSS 3 – 前途一片光明

April 17, 2009 by SLJ | Category:HTML/CSS | No Comment Font size: AA AA

今天奇亚在逛的时候又发现了一些好东西，对CSS3早有耳闻，也到W3网站上看过。对CSS3我还是很期待的。
CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：

盒子模型
列表模块
超连结方式
语言模块
背景和边框
文字特效
多栏布局

　　几个模块现已完成，包括的SVG （可扩展矢量图形），媒介资源类型（Media Queries）和命名，而其他的模块开发工作则仍在进行中。如果要给出一个预定的日期的话，非常困难，不管怎样，web浏览器将全面支持CSS3的各种新特点，一些新的探索已经开始了。针对不同浏览器，新的功能是逐渐应用的，仍然需要1-2年的时间，每一个新的模块才有可能被广泛应用。

以下列出CSS3新的特性。

/* Columnas */
DIV {
	width: 400px;
	column-count: 4;
	column-width: 100px;
	column-gap: 10px
	column-rule: none;
}

/* Multi-background */
.multi {
	background: url('http://www.joostdevalk.nl/images/body-top.gif')
	top left no-repeat,
	url('http://www.joostdevalk.nl/images/banner_fresco.jpg')
	top 11px no-repeat,
	url('http://www.joostdevalk.nl/images/body-bottom.gif')
	bottom left no-repeat,
	url('http://www.joostdevalk.nl/images/body-middle.gif')
	left repeat-y;
}

/*Esquinas redondeadas*/

.rounded {
	background-color: #ccc;
    border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;
}

/* Tablas zebra */

tr:nth-child(2n+1) /* represents every odd row of a HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n)   /* represents every even row of a HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; } 

/* Opacidad */

.opac02 { background: rgb(255, 0, 0) ; opacity: 0.2;}
.opac04 { background: rgb(255, 0, 0) ; opacity: 0.4;}
.opac06 { background: rgb(255, 0, 0) ; opacity: 0.6;}
.opac08 { background: rgb(255, 0, 0) ; opacity: 0.8;}
.opac10 { background: rgb(255, 0, 0) ; opacity: 1;}

/* Resize */

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
  overflow:auto;
  resize:both;
}

/* Media paramétrizados  */

@media all and (min-width: 640px) {
	div.example#min-width {
		background-color: #0f0;
	}
}
@media screen and (max-width: 1100px) {
	div.example#max-width {
		background-color: #0f0;
	}
}

首先，我们希望，这是个正确的方式，CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许你实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。

参考Reinhold Weber：CSS 3 - The future shines bright 

转载请注明来源：奇亚 - Kiya's Blog  http://kiya.cn

SLJ.me