document.getElementById("someDom").style.color="#f00";

但对于已经设置了“important”属性样式的元素，这一句就起不了作用了，就必须用到另一个属性：cssText，代码如下：

document.getElementById("someDom").style.cssText="color:#f00 !important";

// 用jQuery更方便
$("#someDom").css("cssText","color:#f00 !important");

但cssText也有个缺点，它会覆盖掉以前的inline样式，可以用累加的方式得以保留原有样式。代码如下：

var elem = document.getElementById("someDom");
elem.style.cssText +=";color:#f00 !important";

注意上面的累加语句等号右侧的“;”千万不能少，因为IE的cssText属性会默认去掉最后一个“;”，所以如果累加的话一定要重新加上。

<?xml version="1.0" encoding="utf-8"?>
<s:Application
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";

		s|Button {
			color: #0000FF;
		}

		mx|Button {
			color: #FF0000;
		}

		.myStyle{
			font-style: italic;
		}
		#myId{
			font-size: 18;
		}
	</fx:Style>

	<s:Panel title="JuLabs.me Flex4 CSS Demo" styleName="myStyle" width="100%" height="100%">

		<s:layout>
			<s:VerticalLayout />
		</s:layout>

		<s:Button label="蓝色 spark 18号" id="myId" />

		<mx:Button label="红色 halo 斜体" styleName="myStyle" />

	</s:Panel>

</s:Application>

在此例中CSS代码写在fx:Style标签里，CSS代码首先要申明命名空间，如下：

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

上面的代码把s指向了Spark，把mx指向了Halo。然后就可以写相应的CSS代码了，但在每个样式前面也要加上命名空间名称，子选择符也要加上。如：

s|Button {
	color: #0000FF;
}
mx|Button {
	color: #FF0000;
}

上面的代码一个定义了Spark样式的蓝色Button，第二个定义了Halo样式的红色Button。如果在项目中只使用一种样式，那么也可以将这个样式定为默认样式。比如要将Spark定为默认样式，可以用下面的语句：

@namespace "library://ns.adobe.com/flex/spark";

这样，在写CSS样式时就不用在每个选择符前面加s|了。

如果是自定义的组件，可以用下面的语句：

@namespace theme “me.julabs.theme.*”;
theme|Button {
	padding-left: 20;
}

上面的代码把theme指向自己定义的组件，这样就可以用theme|引用自定义的组件了。

也完全可以使用组件的styleName和id属性来设置它们的样式，这样也不需要在选择符前面加s|之类的命名空间名称。如下：

.myStyle{
	font-style: italic;
}
#myId{
	font-size: 18;
}

这个例子里的CSS代码都是直接写在mxml文件中的fx:Style标签里的，这其实不符合大项目应用的。可以直接把CSS代码单独保存为一个文件，比如：style.css，用fx:Style的source属性来指向这个文件，这样就可以实现结构和样式分离的原则。如：

<fx:Style source="style.css" />

近期做的一个页面，要显示近200多行数据，每行数据里面有11个单元格，而每行的最后两个单元格中还嵌套有表格。这个页面突然最近两天变地非常慢，而且在IE6下尤为明显。刚开始以为是JavaScript的问题，就一直在这方面做优化。为了让页面看起来快点，我甚至用了分时分段创建DOM的做法，但情况仍然没有明显地好转。后来才发现其实创建DOM的过程是非常快的，而慢就慢在了渲染上面。我把CSS文件移除后页面变地非常快，最终在CSS文件中一句句地排查，终于找到了罪魁祸首：背景图片（background-image）。

原来设计要为每个单元格增加一个1像素的边框，并且每个单元格有固定的宽度，而加了一个边框的单元格在不同的浏览器下面它们最终的宽度就不一样。为了兼容我去掉了边框，改用了设置一像素平铺背景来模拟边框。表格有200多行，每行连子表格共有17个单元格，合在一起有3,4000个单元格，每个单元格都有平铺的小背景，不慢才怪！

这件事给我的教训很大，以前对CSS的认识不足，只关注JavaScript，现在要重新认识CSS了。

《高性能网站建设进阶指南》中给出了几条编写高效CSS选择符的要点：

• 避免使用通配符：除了传统意义上的通配选择符外，Hyatt把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到了“通配符”分类下，他仅推荐使用ID、类、和标签选择符。
• 不要限定ID选择符；对于div#idsel这样的选择符，应该改成#idsel，因为在页面里一个指定的ID只能对应一个元素，没有必要再添加其它限定符。
• 不要限定类选择符：不要用具体的限定类选择符，如li.mystyle，改成.list-mystyle会更好些
• 让规则越具体越好：如ul li a这样的，最好是创建一个像.list-link这样的类。
• 避免使用后代选择符：通常使用后代选择符的开销是最高的，在有条件的情况下可以用子选择符代替。这一条对IE6无用，IE6不支持子选择符。
• 避免使用标签和子选择符：如果有像#myid > li > a这样的选择符，可以改成一个类，如.myid-link。
• 质疑子选择符的所有用途：再次提醒检查所有使用子选择符的地方，然后尽可能用具体的类取代它。
• 依靠继承：了解哪些属性可能通过继承来获取，避免对这些属性重复指定规则，可以参考《Full property table》。

这些要点有很多不现实的地方，因为子选择符在实际操作中是必须要用到的，但是我们可以在达到效果的基础上利用这些要点来优化CSS代码。

这里有两篇Jon Sykes的文章，里面列出了不同规则对于渲染速度的影响，可以参考下：

• Testing CSS Performance
• Testing CSS Performance (pt 2)

此外，还在网上收集了一些CSS优化的规则，也列出来：

• 十六进制的颜色值对位数与大小写：建议用#FFFFFF，而不要用简写#fff，因为十六进制的颜色值默认标准是大写及6位数标注，在未知情况下不希望冒险而降低了渲染的效率。
• 用display与visibility隐藏的差异：建议用display:none来隐藏元素，display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
• border:none;与border:0;的区别：建议用border:none;，和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
• 不宜过小的背景图片平铺：不赞成宽高8px以下的平铺背景图片。
• IE的滤镜：不建议使用IE的滤镜，不仅消耗资源，也有兼容问题。

在制作网页的时候，为了兼容大部分浏览器，我们常常要求在CSS样式文档中不出现中文字体的，尤其是在{}中，因此通过参照下表将其对应转编，可以将中文名转成英文名。

注意unicode2是直接输出为文本的。

比如：微软雅黑，我们在CSS中的设置为：

.font01{
	font-family:"Microsoft Yahei";
}

也可以是对应的unicode形式：

.font02{
	font-family:"\5FAE\8F6F\96C5\9ED1";
}

但微软雅黑对应的unicode2即微软正黑体写在样式文档里是没有效果的，因为unicode2是以文本形式输出的，这个可以将对应的unicode2放到html文档中尝试一下，对应输出微软雅黑四个字。

• 支持外链形式的样式表，如使用<link>和@import外联到页面中的样式表，还包括<?xml-stylesheet?>处理结构里带的样式表。但是对于嵌入样式（在标签<style>内的样式）和内联（使用元素的style属性的行样式）的样式，是不支持的。
• 支持IE条件注释语句。
• 即可以检查单页，也可以检查整个站点。
• 可以识别大部分的CSS2和CSS3选择器，但可以识别所有的CSS1选择器。
• 可以识别一般的CSShack，如：“* html #foo”会被当成“html #foo”。

td{
    height:300px; /* 等效于普通元素的 min-height */
}

body {
	color: red; /* 支持所有浏览器 */
	color : green\9; /* 支持 IE8 以及以下版本 */
	*color : yellow; /* 支持 IE7 以及以下版本 */
	_color : orange; /* 支持 IE6 */
}

IE9又快出来了，这样一来使用hack的难度又多了一分。

各大邮箱为了用户的安全问题会屏蔽一些网页语句，有时甚至会篡改CSS和HTML代码，所以你做的网页在游览器中看是正常的，但一旦发送到客户邮箱中就不是那个样子了。

在webappers网上看到《AGuide to CSS Support in Email》的文章，里面列出了各种邮箱所支持的CSS语句，还提供PDF格式的资料下载，这无疑对我们做邮件提供了很大的方便，在此记下。

还有个热心的朋友在回帖中贴出了一个免费的邮件制做导学，里面的内容也非常地不错，里面给出了很多邮件制做时的要点，还有很多免费的素材资源，尽情享用吧！

虽然table是按行组建的，但你仍然可以通过“colgroup”和“col”两个元素来寻址列或一组列，还能给它们设置属性，比如“class”。

你可以通过“bolgroup”来给一列设置属性，也可以使用“span”来给一组列设置属性，而“span”的用法和“rowspan”、“colspan”的用法是一样的。看下面的实例代码：

<table>
	<caption>Caption</caption>
	<colgroup>
		<col />
		<col class="alternative" />
		<col span="2" class="alternative" />
	</colgroup>
	<tr>
		<td>This</td>
		<td>That</td>
		<td>The other</td>
		<td>Lunch</td>
		<td>Lunch</td>
	</tr>
	<tr>
		<td>Ladybird</td>
		<td>Locust</td>
		<td>Lunch</td>
		<td>Lunch</td>
		<td>Lunch</td>
	</tr>
</table>

不过目前在colgroup中的样式仅支持borders，backgrounds，width和visibility属性。

在“CSS Input”栏中输入所要压缩的CSS代码，点击“Process CSS”按钮就能在页面的最下方找到压缩过后的CSS代码了。

“Code Layout”栏中是它的选项，第一个选项是代码压缩级，有五个选项：

• Highest (no readability, smallest size)：最高级压缩，可读性非常差，但是体积最小；
• High (moderate readability, smaller size)：高级压缩，可读性差，体积小；
• Standard (balance between readability and size)：标准压缩，可读性不错；
• Low (higher readability)：低级压缩，可读性强；
• Custom (enter below) ：用户自定义。

以上五个选项中Highest（最高级压缩）的体积最小，甚至比自己手动写的代码体积还要小，不过在使用前最好还是检查一下。它的下面还有很多选项，就不一一列举了，不过个人认为只要按照它默认的设置压缩就可以了，压缩的有关信息可以在“Messages”栏中获得。