1、当!important用在两个样式的时候，这时他的作遥原理就是解决各个浏览器之间的兼容问题。

2、当!important单独用在一个样式中，那么它则起保护作用，在任何需要保护的属性后面插入它可以避免被基于特性的属性覆盖。例如：#nav a{color:red;} a{color:yelllow !important},通常，一个带有id名#nav的元素里的一个链接会变为红色，因为这个#nav a比标签 a样式具体的多，但因为包含了！important，以为则会这个属性永远胜出。

其实这里也最主要的关于css优先级，一个标签选择器1分，一个类选择器10分，一个id选择器100，一个行内样式1000，！important就当无限分吧，分值相同时按后出现优先的原则算。

而且这个样式在每个浏览器中都能支持!

本来我是不想发一些无用的牢骚在blog上面，因为我觉得这样很不应该，但又控制不住那一点点的小激动，所以别闲我烦呐^_^.回想一下这个月的生活其实也蛮丰富多采的，第一周在为辞职的事情和老板一直冷战;第二周在为找工作的事情一直寝食难安;第三周却在新的公司接受像之前同事说的那种封闭式的工作。在这中间离开了一趟上海虽行程不远，但也可以用焦虑不安来形容，然后又参加了拥抱“HTML5”的一个活动，收获不少却很疲惫。好像一直都是处在失望与绝望中！

这个过程虽然有些辛苦有些复杂，但却更容易让人成长。人生的亮点在于看看走过的路然后去总结下面的路怎么走，而工作的亮点也不过于此,在辞职和找工作的这个过程中发现生活中自己处事方式不太对，在工作中开始对自己太过于自信以至于碰壁到对自己的怀凝，以及对这个工作的了解和热情关系，总之认清形式了解情况去学习去钻研呐，努力去做一个好学生，哈哈！

最后谢谢大家听我啰嗦，也谢谢大家对我的帮助和支持！

看完效果分析一下：这里有三个嵌套的元素：第一个是最外层不做任何的变化，第二个是第二层元素做顺时针旋转，第三个是最里层元素在同一方向作逆时针旋转。如图：

HTML

<div class="box">
	<div class="inner">
		<div class="content"><img src="img.jpg" alt="my bike" /></div>
	</div>
</div>

The CSS

在三个元素中最重要的一个属性是：overflow:hidden.如上所说第一个元素不做任何的旋转，给一个固定的width and height.第二个元素和第三个元素同时旋转，但两者旋转的方向一个是顺时针一个是逆时针，旋转的角度是一样的。设置好后可以做进一步的调整，使其更加美观。

/* angled box styles */
 
.box{
	width:700px;
	height:300px;
	background:#ccc;	
	overflow:hidden;
	margin:1em 0;
	}
.box .inner{
	-moz-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	-o-transform:rotate(20deg);
	width:300px;
	height:450px;
	margin-top:-70px;
	margin-right:100px;
	overflow:hidden;
	background:#aaa;
	float:right;
	border:3px solid #fff;
	}
.box .inner .content{
	-moz-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	-o-transform:rotate(-20deg);
	width:500px;
	height:320px;
	margin-top:60px;
	margin-left:-80px;
	overflow:hidden;
	background:#f1f1f1;	
	}

因为用到的属性是css3中的，所以在ie里的效果没有chrome和firefox以及其他浏览器美观。

另外再写一种我在工作中遇到的关于图片旋转的方案，当然所用的的css属性基本上都是一致的：

HTML

<div class="photo_box">
    <div class="photo photo1"> <img src="image.gif" > <div>
    <div class="photo photo2"> <img src="image.gif" > <div>
    <div class="photo photo3"> <img src="image.gif" > <div>
    <div class="photo photo4"> <img src="image.gif" > <div>
<div>

The CSS

.photo_box {
position:relative;
width:350px;
height:250px;
margin:0px auto; 
float:right; 
margin-right:20px;}
.photo{ 
width:350px; 
height:250px; 
position:absolute;}
.photo img {
background-color:#FFFFFF;
border:1px solid #666; 
width:350px; 
height:250px;}
 
.photo1 {
top:10px;
left:60px;
transform:rotate(5deg) scale(0.5);
-o-transform:rotate(5deg) scale(0.5);
-webkit-transform:rotate(5deg) scale(0.5);
-moz-transform:rotate(5deg) scale(0.5);
}
.photo2 {
top:30px;
left:80px;
transform:rotate(8deg) scale(0.5);
-o-transform:rotate(8deg) scale(0.5);
-webkit-transform:rotate(8deg) scale(0.5);
-moz-transform:rotate(8deg) scale(0.5);
}
.photo3 {
top:35px;
left:-10px;
transform:rotate(-10deg) scale(0.5);
-o-transform:rotate(-10deg) scale(0.5);
-webkit-transform:rotate(-10deg) scale(0.5);
-moz-transform:rotate(-10deg) scale(0.5);}
.photo4 {
top:15px;
left:50px;
transform:rotate(-5deg) scale(0.5);
-o-transform:rotate(-5deg) scale(0.5);
-webkit-transform:rotate(-5deg) scale(0.5);
-moz-transform:rotate(-5deg) scale(0.5);
}
.photo:hover {
transform:rotate(0) scale(0.5);
-o-transform:rotate(0) scale(0.5);
-webkit-transform:rotate(0) scale(0.5);
-moz-transform:rotate(0) scale(0.5);
z-index:2;
cursor:pointer;
}

当然这里的top和left的值可以随便设置，只要看着美观就OK。当然这种旋转的方法在IE里面是不兼容的，不过我可能过改变位置的方法使它在层次上面变得美观一些。当然这个例子是基于上面例子之上的。

既然图片可以旋转，那么文字必然也可以做旋转了，方法和图片差不多。但在网上查了一下，发现用的最多的就是writing-mode : lr-tb、tb-rl属性，但是这个属性并不是所有的浏览器都支持，为此困扰了一阵子。现在介绍一种兼容ie firefox chrome的文字旋转90度的方法：只要我们在sytle中加上以下style就OK了

.text{
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
/* for IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}

文字的旋转相对于图片来说更容易一些也更易于兼容浏览器。

选项1：目前，用户使用旧的和默认的错误页面，其中显示没有错误信息的其他。

选项2：第二个解决方案是目前习惯设计一个错误页的页面来解决这个问题或是提示他们可以看一些其他的东西。

你认为哪一种更好呢？显然，第二个选项。

这收集了30个集漂亮和创意的404未找到错误页面：

A: 某小白MM，B: 后端程序员，C: 美工，D: 前端

A: 哎～D，你是做什么的呀？

D: 前端啊。

A: 前端是干什么的？

D: 前端… 前端就是做网站的。

A: 唉？我看网站不是 B 写出来的嘛，也没见你整天写代码呀？

D: 额… 我是做网站外观…

A: 唉？外观不是 C 画出来的吗？也没见你整天开 PS 呀？

D: （汗）我的工作就是把他俩的活儿结合起来…

A: [斜视] 唔，就这么轻松的工作嘛，什么都不用你干。

D: [内牛成河]

1.灵活的圆角

为了能让圆角更加灵活，我们可以把容器里的每个圆角都做成一个独立的元素，通过CSS强行定位到父容器的四个角上。在这个方法里，我们只需要用到下边这个图片。

HTML:

<div class="box">
        <span class="crnr tl"></span>
        <span class="crnr tr"></span>
        <h3>This is a heading</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius
enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p>
       <span class="crnr bl"></span>
       <span class="crnr br"></span>
</div>

CSS

.box {
        position:relative;
        width:200px;
        height:300px;
}
.crnr {
        position:absolute;
        background:url("http://uecss.com/wp-content/uploads/2010/04/crnr-sprite.jpg") no-repeat;
        width:20px;
        height:20px;
}
.tl {
     left:0;
     top:0;
     background-position: 0 0 ;
 }
.tr {
     right:0;
     top:0;
     background-position: -20px 0 ;
 }
.bl {
     left:0;
     bottom:0;
     background-position: 0 -20px ;
 }
.br {
     right:0;
     bottom:0;
     background-position: -20px -20px ;
}

优点：能自动适应父容器的大小，浏览器兼容性非常强。

缺点：为了实现圆角，添加了一些没有意义的标记。

2.Border radius（边界半径）

css3中为boder增加的一个属性border-radius，目前这个属性已经被Firefox和Safari 3(Chrome)支持，比较遗憾的是IE不支持此属性。

HTML:

<div class="box">
    <h3>This is a heading</h3>
    <p>Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius
    enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p>
</div>

CSS:

.box {
    width:200px;
    height:200px;
    background-color:#EE2E24;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

优点：这种方法不需要添加任何多余的标记，而且可以非常方便睇修改圆角的半径，是最易上手的方法。

缺点：虽然符合W3C的标准，但缺乏浏览器支持。

3.多个背景图片

CSS3对background属性做出了一些重大改进，在CSS3标准里，我们可以把多个背景图片应用到同一个元素里。我们利用这个特性为容器加 上圆角效果。HTML代码与上例保持一致，在CSS中需要先把四个圆角的图片分别做好

CSS:

.box {
    background: url(top-left.gif) top left no-repeat,
    url(top-right.jpg)  top right no-repeat,
    url(bottom-left.gif) bottom left no-repeat,
    url(bottom-right.gif) bottom right repeat-y;
}

优点：没有多余的标记，可以分别设置每个圆角的半径。

缺点：使用了W3C未明确定义的方法，浏览器兼容性很差，目前只有Safari和Chrome对此方法支持良好。

4.结合CSS3和JavaScript,兼容所有浏览器

这是一种很不错的实现跨浏览器圆角的解决方案，结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费J该脚本的最大优势是可以在Safari/Chrome/Firefox中
使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在页面中引入curvycorners.js:avaScript库。

下载这个js

然后引用

<script type="text/javascript" src="curvycorners.js"></script>

然后定义以下样式：

.box{
    width: 220px;
    padding: 10px;
    background-color: #DDEEF6;
    border:1px solid #DDEEF6;
     /* Do rounding (native in Safari, Firefox and Chrome) */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
 }

然后在上面的样式后面定义以下代码：

<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
	var setting = {
	tl: { radius: 6 },
	tr: { radius: 6 },
	bl: { radius: 6 },
	br: { radius: 6 },
	antiAlias: true
	}
	curvyCorners(setting, ".roundedCorners");
}
</script>

tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等) 你可以像这样在前面的代码中定义:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

HTML代码如下：

<div class="box"> </div>

这样圆角的效果就出现了！

1、21TORR GmbH

2、afterlab

3、Anumeric

4、Audi Deutschland

5、BCBG Maxazria

6、burton

7、closed

8、evian

9、gigya

10、igloo360

11、tracking-time

Blueprint: 一款 CSS 框架

Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间,同时包含了 CSS reset以消除不同浏览器之间的它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布差异局和一个打印样式。

YUI Grid CSS

YUI Grids CSS 支持像固定宽度布局那样的流宽度布局。这是基于YUI Grids CSS 高级应用，区别于其它 CSS 框架。您可以通过从官方网站中下载快速参考表和YUI Grids生成来开始 YUI Grids CSS 应用。YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:

• 负Margin技术
• 使用度量单位em
• 清除布局的浮动

960 Grid System

一款很值得查看的非常出色的CSS框架。该下载包含有Firework，Photoshop，Inkscape等等的模板。所以您可以马上设计网页模板。PSD的文件，已经准备好的配备指南也为设计师们节省了不少时间

YAML CSS Framework

YAML 是一个有着良好文档，经得起考验的CSS框架。您可以从官方网站上轻松地下载到PDF文档及示例项目。这里有一些工具会帮助您开发。YAML 的使用者可以视觉上创建基于 YAML CSS 布局。Dirk Jesse的能够对(X)HTML/CSS 框架扩展，支持复杂web项目。YAML基于web标准和支持各种流行浏览器，尤其支持所有IE版本包括从 5.x/Win 到 7.0.

Elastic CSS Framework

Elastic 提供说明性的语言来定义布局的结构和行为。这个框架很年轻，它演示的非常好的范例都来自官方网站本身。

【第一步】

获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。

·TTF或.OTF，适用于Firefox 3.5、Safari、Opera
·EOT，适用于Internet Explorer 4.0+
·SVG，适用于Chrome、IPhone

下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel提供的在线字体转换服务获取。它允许我们选择需要的字符生成字体文件（在服务的最后一个选项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。

【第二步】

获取到三种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。

字体声明如下：

@font-face {
font-family: ‘fontNameRegular’;
src: url(‘fontName.eot’);
src: local(‘fontName Regular’),
local(‘fontName’),
url(‘fontName.woff’) format(‘woff’),
url(‘fontName.ttf’) format(‘truetype’)
,
url(‘fontName.svg#fontName’) format(‘svg’);
}
/*其中fontName替换为你的字体名称*/

在页面中需要的地方使用该字体：

p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}

这样就成功了，大家可以试一试。

这里我们需要用到一个JS文件,点击下载这个JS:

http://cid-8127d59343265667.skydrive.live.com/self.aspx/NamipanPublic/2010-01-25/jquery.js

还有必须前面申明 :

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dt-->&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" > </html>

不然在ie下面就是没用的 。这些都准备好之后，在img的下面加上这样一段代码：

<script type=”text/javascript”>
$(“#banner”).width(document.documentElement.clientWidth);
</script>

在图片上引用ID:

img src="" id="banner" alt="" 注：这个ID要一至，不然会没有效果。

这时我们会看到图片会自适应分辨率的大小图片会被自动缩放，但是可能会和Design有一些出入。我们可以采用第二种方法： 图片的变化只限于分辨率小于1300或是1024的情况下变化，那么我们的那段代码就要这样去写:

<script type="text/javascript">
if(window.screen.width <= 1024) { $("#banner").width(document.documentElement.clientWidth); }
</script>

这样我们就只会看到当分辨率小于1024的时候才会看到图片自动缩放了。