<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>中文Flex例子 &#187; css</title>
	<atom:link href="http://blog.minidx.com/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.minidx.com</link>
	<description>中文Adobe Flex例子,Flex实例教程,RIA资源,全文检索技术,算法和数据结构</description>
	<lastBuildDate>Thu, 31 Mar 2011 03:22:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>25篇非常详细的关于如何从PSD转换为HTML&amp;CSS的教程</title>
		<link>http://blog.minidx.com/2009/11/15/3048.html</link>
		<comments>http://blog.minidx.com/2009/11/15/3048.html#comments</comments>
		<pubDate>Sun, 15 Nov 2009 14:41:04 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Adobe其他]]></category>
		<category><![CDATA[程序开发相关]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[PSD]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2009/11/15/3048.html</guid>
		<description><![CDATA[在设计一个网站，WordPress的Theme，或者是Joomla，Drupal等一些CMS的Theme的时候，很多正规商业上的做法都是先用PhotoShop设计出PSD图片，经过客户确认（也有很多是客户找另外的专业设计公司设计），然后着手HTML和CSS按照这一设计制作模板。25 Useful Tutorials Show How to Convert PSD to HTML &#38; CSS Step by Step收集了25篇关于如何从PSD转换为HTML&#38;CSS的教程，写的非常详细，按照上面的步骤，即便是初学者也很容易设计，制作自己的Theme。当然，HTMl以及CSS的基础知识还是必需的。有兴趣的可以看看。

你可能还对下列文章感兴趣:Flex4视频教程《一周学习Flex4》中文字幕版+离线下载播放器50篇Adobe PhotoShop教程超过30篇最新的高质量Adobe PhotoShop教程25篇很不错的Flash和ActionScript 3相关的教程超过14篇Away3D相关的基础教程]]></description>
		<wfw:commentRss>http://blog.minidx.com/2009/11/15/3048.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Flex Gumbo中如何通过使用CSS给FxToggleButton设置特殊状态的例子</title>
		<link>http://blog.minidx.com/2009/07/07/2703.html</link>
		<comments>http://blog.minidx.com/2009/07/07/2703.html#comments</comments>
		<pubDate>Tue, 07 Jul 2009 13:55:42 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[FxToggleButton]]></category>
		<category><![CDATA[Gumbo]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/?p=2703</guid>
		<description><![CDATA[接下来的例子演示了Flex Gumbo中如何通过使用CSS给FxToggleButton设置特殊状态。本例中所有的状态的基本颜色都被设置为红色， “upAndSelected”, “overAndSelected”, “downAndSelected”以及“disabledAndSelected”责备设置为绿色。 
让我们先来看一下Demo（可以点击这里察看源代码）：









下面是完整代码(或点击这里察看)：
Download: main.mxml&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;Application&#160;name=&#34;FxToggleButton_statesStyle_test&#34;
&#160; &#160; &#160; &#160; xmlns=&#34;http://ns.adobe.com/mxml/2009&#34;
&#160; &#160; &#160; &#160; layout=&#34;vertical&#34;
&#160; &#160; &#160; &#160; verticalAlign=&#34;middle&#34;
&#160; &#160; &#160; &#160; backgroundColor=&#34;white&#34;&#62;
&#160;
&#160; &#160; &#60;Style&#62;
&#160; &#160; &#160; &#160; FxToggleButton {
&#160; &#160; &#160; &#160; &#160; &#160; baseColor: red;
&#160; &#160; &#160; &#160; }
&#160;
&#160; &#160; &#160; &#160; FxToggleButton:upAndSelected,
&#160; &#160; &#160; &#160; FxToggleButton:overAndSelected,
&#160; &#160; &#160; &#160; FxToggleButton:downAndSelected,
&#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2009/07/07/2703.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>6款非常有用的CSS W3C标准验证工具(URL)</title>
		<link>http://blog.minidx.com/2009/01/27/2033.html</link>
		<comments>http://blog.minidx.com/2009/01/27/2033.html#comments</comments>
		<pubDate>Tue, 27 Jan 2009 14:45:36 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[程序开发相关]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[w3c]]></category>
		<category><![CDATA[工具]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/?p=2033</guid>
		<description><![CDATA[符合W3C标准的内容在载入方面的速度可以有不少的提升，像Dreamweaver这些开发工具中已经自带W3C标准验证功能了。不过使用这些开发工具的毕竟并不是Web开发者中的全部，还有很多Wen开发人员用着没有这项功能的编辑器，甚至有很多人员用记事本……下面文章中整理出的6款W3C标准验证工具对于Web开发人员来说还是相当有用的：








文章地址：http://ntt.cc/2009/01/23/over-6-very-userful-and-invaluable-tools-to-check-a-valid-url-address-against-the-w3c-validation-service.html
另外下面是关于W3C标准以及CSS等概念的一些补充：
什么是W3C
W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。
　　W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。
W3C简介
　自从Web诞生以来，Web的每一步发展、技术成熟和应用领域的拓展，都离不开成立于1994年10月的W3C(World Wide Web Consortium，万维网联盟)的努力。W3C是专门致力于创建Web相关技术标准并促进Web向更深、更广发展的国际组织。
　　一、 W3C的发展历史和组织机构
　　1994年10月，Web还是大学、研究机构的新宠时，Web技术和应用的发起人、被誉为 Web之父的Tim Berners-Lee就敏锐地意识到Web的出路不是象牙塔中少数人的互联网络，而是供全社会使用的一种公共的信息资源和交流资源，而要达到这个目标，对其中所涉及的技术进行规范化、指导软件产业对基于此平台的技术的开发、相关技术的普及、推广和培训都必不可少。因此，Tim Berners-Lee这位Web的先驱联合CERN、DARPA和欧盟倡导并组织成立了Web的核心技术机构——W3C。
　　W3C的核心最初位于Tim Berners-Lee供职的美国麻省理工学院计算机实验室(MIT/LCS)；随后，该组织迅速吸引了大量在Web上的志同道合者，开始出现多个中心的格局，随后出现的另外两个中心分别位于法国的INRIA(Institut National de Recherche en Informatique et Automatique)和日本的Keio大学(庆应大学)，其中2003年INRIA由ERCIM(Eruopean Research Consortium in Informatics and Mathematics)接替；此外，W3C还在全球各地建有14家办事机构，其中香港就有一处。
　　W3C的工作以成员机构为载体负责实施。截止目前，W3C在全球已有超过450家会员机构，并与其他国际标准化等多家组织机构建立了广泛的合作关系。此外W3C还有少量的专职工作人员，总共有70多人。
　　创建伊始，W3C就开始以引领Web 技术的发展和促进为己任。其宗旨概括为7点：
　　* 推进Web的普及，即希望未来无论任何人、任何设备、任何地点以及任何时间(4A)都可以方便地使用Web和Web上的合法资源。
　　* 解决语义网络(Semantic Web)问题，即不仅人能阅读和理解Web上的信息，计算机、程序以及其他硬件设备也 同样能理解并处理Web上的形形色色的 信息。
　　* Web应该是可信任的网络，使Web上的机密信息有安全保证、同时使用者得到的也是一个安全可靠的网络资源环境。
　　* 协同工作，W3C从成立之初就是一个厂商中立的技术组织，始终通过在工业上达成共识、鼓励开放性讨论来致力于设计、推广开放的语言，以及通过各种技术草案来推动基于Web的各类软件产品，从而避免市场上技术规范的混乱。
　　* 可持续发展问题。W3C的立足点是发展和推广基于Web的技术，由于网络的易用性等特点，W3C已清楚地意识到Web的需求总是走得更远，因此，为保证Web的可持续发展，所有的设计都遵循简易性、可调节性、兼容性、可扩展性等指导原则。
　　* 权利的分散问题。为避免人为和客观上造成的瓶颈和技术失衡问题，W3C的工作是分散处理的。
　　* 支持多媒体，由于Web本身就拥有极其丰富的资源，其中相当一部分是多媒体信息，因此，多媒体信息处理领域内的规范是W3C的一个重要方向。
　　总之，W3C以开发“Web 事实标准”的各种技术规范作为其核心任务，目前已开发了超过50个技术规范。这些技术规范中大部分是由各个功能组开发的各种功能性规范，同时也包括WWW的核心体系结构。W3C的这些成果基本上已由企业和研究机构进行了实现。
　　基于W3C的组织原则和工作宗旨，以及Web的实际应用情况，W3C提出了其长远目标，包括3个方面的内容，分别是：
　　* 建立一个普遍的、全社会易于使用的公共网络环境；
　　* Web上的语义可管理和正确使用；
　　* Web应该是安全可信的。
　　二、 W3C推出的主要规范
　　到目前为止，W3C已开发了超过50个规范(草案)。这些规范(草案)包括人们早已、耳熟能详的HTML、HTTP、URIs、XML等，也包括针对语义Web的RDF、OWL等。
　　* HTML/XHTML：HTML是Web的基础之一，基于HTML，Web上开始出现丰富多彩的页面，蕴涵了各种信息。基于HTML，Web以一种简便易用的方式走出了象牙塔，成为全社会的公共资源和财富。W3C先后推出了多个HTML版本，分别是1997年12月的首个版本、1998年4月的更新、 1999年12月推出HTML 4.01版。XHTML是对HTML 4.01的扩展，在其中可以使用XML的语义功能。XHTML 1.0已于2000年1月作为推荐标准发布；XHTML Basic是对XHTML1.0的独立于设备(如手机、PDA等)的扩展，于2000年12月发布；随后，2001年5月推出了XHTML的模块化版本 ——XHTML1.1。
　　* CSS：CSS负责为网页设计人员提供丰富的款式空间来设计网页。CSS所提供的网页结构内容与表现形式的分离机制，大大简化了网站的管理，提高了开发网站的工作效率。CSS可用于控制任何HTML和XML内容的表现形式。CSS1.0于1996年12月推出，1998年5月CSS2.0发布。
　　* XML:1998年2月发布的XML 1.0是W3C最具前瞻性和最有影响的标准之一。XML作为下一代Web的第一块重要基石，为分布式的、异构的数据交换提供了强大的功能，并且将数据本身和数据的表现分离，同时，就数据本身而言，数据的值和语义也是适当分离的。事实上，XML已经发展为一族技术，包括2001年5月发布的XML Schema、1999年1月发布的XML [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2009/01/27/2033.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Flex中通过CSS设置ComboBox控件下拉菜单阴影的例子</title>
		<link>http://blog.minidx.com/2008/07/23/1119.html</link>
		<comments>http://blog.minidx.com/2008/07/23/1119.html#comments</comments>
		<pubDate>Tue, 22 Jul 2008 16:56:47 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[ComboBox]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[dropdownStyleName]]></category>
		<category><![CDATA[下拉菜单]]></category>
		<category><![CDATA[阴影]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/07/23/1119.html</guid>
		<description><![CDATA[接下来的例子演示了Flex中如何通过CSS设置ComboBox控件下拉菜单阴影，Demo中设置了3个像素的阴影，边角为5。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：









下面是完整代码(或点击这里察看)：
Download: main.mxml&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application&#160;xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; layout=&#34;vertical&#34; verticalAlign=&#34;middle&#34; backgroundColor=&#34;white&#34;&#62;
&#160;
&#160; &#160; &#60;mx:Style&#62;
&#160; &#160; &#160; &#160; .myComboBoxDropdown {
&#160; &#160; &#160; &#160; &#160; &#160; dropShadowEnabled: true;
&#160; &#160; &#160; &#160; &#160; &#160; shadowDistance: 3;
&#160; &#160; &#160; &#160; &#160; &#160; shadowDirection: &#34;right&#34;;
&#160; &#160; &#160; &#160; &#160; &#160; cornerRadius: 5;
&#160; &#160; &#160; &#160; }
&#160; &#160; &#60;/mx:Style&#62;
&#160;
&#160; &#160; &#60;mx:ComboBox&#160;dropdownStyleName=&#34;myComboBoxDropdown&#34;&#62;
&#160; &#160; &#160; &#160; &#60;mx:dataProvider&#62;
&#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/07/23/1119.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>auzn经典Flex教程&#8211;KingnareStyle皮肤制作简介</title>
		<link>http://blog.minidx.com/2008/06/26/1000.html</link>
		<comments>http://blog.minidx.com/2008/06/26/1000.html#comments</comments>
		<pubDate>Thu, 26 Jun 2008 15:29:25 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[FlexBuilder]]></category>
		<category><![CDATA[KingnareStyle]]></category>
		<category><![CDATA[Skin]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/06/26/1000.html</guid>
		<description><![CDATA[本教程所需工具：FlexBuilder 3, Flash CS3;OS:Windows XP
先来看一下整套KingnareStyle的整体效果：
 
 Demo &#124; Download Full Project &#124; Download project from here.

FLEX3.0组件可以通过CSS来控制样式，这里的CSS和平时编写网页时所谈及的CSS是有区别的，可以说是为FLEX量身定制的样式表，借助ActionScript可以实现强大的显示效果，下面的示例中会有相关介绍。
Adobe公司发布的Express Photoshop，黑色风格很令人着迷，KingnareStyle就是以它为原型制作的一款FLEX皮肤。皮肤包含的组件很多，限于篇幅，只能选取有代表性的组件做演示。下面以Button组件为例，开始FLEX皮肤制作的入门。








我们先在Flex Builder 3中新建一个项目FlexSkinTest

新建文件夹style，并在style文件夹下新建style.css文件：

双击打开style.css，切换到Design面板并新建一个样式：

选择Button组件：

按下OK后可以看到按钮的8种状态。便于测试，我们把背景色调整为0&#215;333333：

切换到Source面板调整字体样式：
Button
{
color:#AAAAAA;/*Color*/
textRollOverColor:#FFFFFF; /*text&#160;rolling over color*/
textSelectedColor:#FFFFFF; /*SelectedColor*/
disabledColor:#5A5A5A; /*&#160;disabledColor */
fontWeight:normal; /*fontweight*/
}
结果如下图：

接下来的工作就是把按钮的8种状态用自定义的皮肤替换掉。
常用的实现方法有4种，我们将逐步介绍。
我们先学习KingnareStyle中Button组件皮肤的实现方法：将外部swf文件里的皮肤元件嵌入到组件样式文件中。
嵌入swf文件中的元件
首先在style文件夹下新建文件skin.fla，背景色同样设置为#333333。
CTRL+F8新建影片剪辑Button_upSkin，属性设置如下:

这里最好启用9切片，以后嵌入FLEX样式时就不用进行9切片设置了。
关于9切片，可以参考下面图示（引自Flex Developer Center）：

将舞台放大至400%，使用矩形工具画一个空心矩形，坐标为（0，0），厚度为1像素，高宽均为23像素，填充色为#FFFFFF，透明度10%

再新建一个层，用同样的方法在内部画一个空心矩形，坐标为（1，1），厚度1像素，高宽均为21像素，填充色为#000000，透明度60%

下面填充空白区。
新建一个层，画实心矩形，坐标为（2，2），高宽均为19像素，填充线性渐变色白色，透明度由10%至0%：

最后再加高亮框。新建一个层，画空心矩形，坐标为（2，2），厚度为1，高宽均为19像素，填充线性渐变色白色，透明度由8%至3%

至此，图形部分完成，再把9切片的线重新定位：

CTRL+ENTER发布程序。
Flash部分告一段落，回到FLEX的style.css中。切换到Source面板，在Button样式中加入下面语句：
upSkin:Embed(source=”skin.swf”, symbol=”Button_upSkin”);
解释一下，upSkin，Button弹起状态皮肤。Embed语句，用于将外部资源嵌入程序中使用，本例中将skin.swf中的Button_upSkin元件嵌入到样式中。
保存后切换到Design面板，会发现up状态已经更新为我们刚才制作的元件了：

使用同样的方法来制作其他状态皮肤，要注意给元件赋合适的名字。最后CCS如下：
Application
{
backgroundGradientAlphas:&#160;1.0, 1.0;
backgroundGradientColors:&#160;#333333, #333333;
}
&#160;
Button
{
color:&#160;#AAAAAA;
textRollOverColor:&#160;#FFFFFF;
textSelectedColor:#FFFFFF;
disabledColor:#5A5A5A;
fontWeight:normal;
upSkin:&#160;Embed(source=”skin.swf”, symbol=”Button_upSkin”);
overSkin:&#160;Embed(source=”skin.swf”, symbol=”Button_overSkin”);
downSkin:&#160;Embed(source=”skin.swf”, symbol=”Button_downSkin”);
disabledSkin:&#160;Embed(source=”skin.swf”, symbol=”Button_disabledSkin”);
selectedUpSkin:&#160;Embed(source=’skin.swf’, symbol=’Button_selectedUpSkin’);
selectedOverSkin:&#160;Embed(source=’skin.swf’, symbol=’Button_selectedOverSkin’);
selectedDownSkin:&#160;Embed(source=’skin.swf’, symbol=’Button_selectedDownSkin’);
selectedDisabledSkin:&#160;Embed(source=’skin.swf’, symbol=’Button_selectedDisabledSkin’);
}
效果图：

接下来我们打开FlexSkinTest.mxml文件，切换到Source面板，
添加 &#60;mx:Style source=&#34;style/style.css&#34;/&#62;
&#60;mx:Button x=&#34;10&#34; y=&#34;10&#34; label=&#34;Button&#34;/&#62;
换到Design面板，可以看到新加的Button组件已经应用我们的样式了，也可以多拖几个Button到程序中并设置不同的大小，可以发现边缘并未因形变发生模糊，这是我们使用了9切片的结果。

可以说，我们的Button组件皮肤已经完工了。
使用Flex Skin Design Extensions for Flash CS3
我们再开始第二种皮肤制作方法。
先做准备活动：
从http://www.adobe.com/go/flex3_cs3_swfkit下载Flex Component Kit for Flash CS3。
从http://www.adobe.com/go/flex3_skinning下载Flex [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/06/26/1000.html/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced)
Database Caching 3/29 queries in 0.278 seconds using disk
Object Caching 415/803 objects using disk

Served from: blog.minidx.com @ 2012-02-09 15:23:48 -->
