<?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>苏洋博客 &#187; CSS</title>
	<atom:link href="http://promiseforever.com/topics/learning/css-learning/feed" rel="self" type="application/rss+xml" />
	<link>http://promiseforever.com</link>
	<description>记录我的一点一滴。</description>
	<lastBuildDate>Sat, 12 May 2012 12:37:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>重新看待WEB前端性能</title>
		<link>http://promiseforever.com/2012/05/12/%e9%87%8d%e6%96%b0%e7%9c%8b%e5%be%85web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd.html</link>
		<comments>http://promiseforever.com/2012/05/12/%e9%87%8d%e6%96%b0%e7%9c%8b%e5%be%85web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd.html#comments</comments>
		<pubDate>Sat, 12 May 2012 02:05:37 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[(x)Html]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[我的总结]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[重构]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=6704</guid>
		<description><![CDATA[之前简单面试的时候,感觉回答77哥回答的不是很好. 最近又看过几本书后,有了一些新的看法，对于内容分类也有新的变化。 之前写过一篇类似的：http://promiseforever.com/2012/03/12/improve-speed-for-you.html 1.减少HTTP请求数 相同内容，相同大小的数据，10个请求数的页面肯定比100个请求数要快，浏览器和服务器建立握手，尤其在网络环境不是太理想的时候，这个问题比较突出。而且有效节约服务器资源。 2.数据内容的优化(文字,图片,CSS,JS,COOKIES,CACHE,CDN,JSON) 因为内容还原度的要求是不一样的，商品图，LOGO需要的还原度比较高，可以使用较为清晰的32位PNG或者JPG，如果是网站的边角料，可以使用gif或者16位PNG。如果有专用服务器做CDN，可以不用考虑压缩(Gzip)的问题，如果没有且服务器允许的话，对图片和文字都进行压缩的话，可以有效节约浏览器下载数据的大小。 CSS SPRITE拼合图片也可以有效节约图片体积，JS,CSS等文件在使用的时候，可以先使用YUI等压缩工具进行压缩，将只是给开发人员看的缩进内容都省略，顺便一提，对于IE较老的版本，CSS,JS的分号和滤镜中的某些空格不能随便压缩掉，如果随意压缩掉，会发生想要的效果消失掉的BUG。 鉴于访客来源地区的差异，合理使用CDN也是一个不错的方案。 例如CSS,JS这些额外的表现和行为的元素，如有可能，单独保存为外部文件，在HTML文档中引用的位置最优方案为：css位于文档头部，利于尽早渲染页面，核心JS库可以适当放置较早的位置，比如jquery，其他的js文件放置于页面尾部，有可能的话，尽量拼合这些文档，js如果包含较多数据，可以使用eval packed二次压缩。 cache可以使用etag,expire,或者HTML5-cache进行缓存,使用JS进行调用或者遵循浏览器的默认规则，有效减少重复下载内容的时间。 cookies要谨慎使用，避免发生cookies 污染，因为浏览器存在带cookies发送请求，所以cookies的大小必须在合理范围，虽然它最大也只是4kb,正确设置过期时间,合理减少不必要内容,是优化的有效手段.. JSON作为数据交换手段之一,比xml的优越性还是蛮多的,首先是它体积更小,传输更快,速度是网站的基础之一。而且JSON可以描述出对象，十分适合进行小段的程序间的通信。 3.减少DOM操作 DOM树庞大，很多操作DOM的时候是进行整体拷贝，然后遍历设置属性的过程，这个操作是很浪费时间的，如果有可能，使用XPATH,或者直接操作某个带有ID的元素，更为快捷和节约资源。使用DOM的时候，必须合理进行局部的VAR保存一下操作中会重复利用到的对象。 4.页面重构 在对DOM元素进行操作之后，如果该元素会影响到其他的元素，例如其他元素的上下文是它，那么其他元素会进行重排，在它进行重新渲染生成的时候。重新渲染元素需要消耗内存和时间，如果页面包含许多元素，重排的时间和资源也不容小觑。 DOM结构如果不能保持简明良好，反复嵌套无用的结构，不仅在重排的时候会造成浪费，而且影响后续开发。]]></description>
		<wfw:commentRss>http://promiseforever.com/2012/05/12/%e9%87%8d%e6%96%b0%e7%9c%8b%e5%be%85web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css Hacks资源</title>
		<link>http://promiseforever.com/2012/03/23/css-hacks%e8%b5%84%e6%ba%90.html</link>
		<comments>http://promiseforever.com/2012/03/23/css-hacks%e8%b5%84%e6%ba%90.html#comments</comments>
		<pubDate>Fri, 23 Mar 2012 02:02:57 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=6537</guid>
		<description><![CDATA[IE6，亲啊，咱们商量一个事情..您能不难为学生我么&#8230; 整理一些IE6 hacks,有空看完. http://wellstyled.com/css-minheight-hack.html http://paulirish.com/2009/browser-specific-css-hacks/ http://dancewithnet.com/2008/07/12/css-hacks http://www.webdevout.net/css-hacks http://blog.gulu77.com/?page_id=4 http://www.crackedzone.com/ie7_position_z-index_bug_solution.html http://www.douban.com/group/topic/22974180/ http://coolshell.cn/articles/1245.html]]></description>
		<wfw:commentRss>http://promiseforever.com/2012/03/23/css-hacks%e8%b5%84%e6%ba%90.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS选择器优先级别</title>
		<link>http://promiseforever.com/2012/03/14/selector-specificity.html</link>
		<comments>http://promiseforever.com/2012/03/14/selector-specificity.html#comments</comments>
		<pubDate>Wed, 14 Mar 2012 08:19:50 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[经典资料]]></category>
		<category><![CDATA[selector]]></category>
		<category><![CDATA[specificity]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=6405</guid>
		<description><![CDATA[此文回iOpenV的侯先生.关于CSS使用ID选择器的好处. 原文出处W3C: http://www.w3.org/TR/CSS21/cascade.html 资料6.4.3节关于选择器优先级别是这么说的. 6.4.3 Calculating a selector's specificity A selector's specificity is calculated as follows: count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, ...]]></description>
		<wfw:commentRss>http://promiseforever.com/2012/03/14/selector-specificity.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>背景滑动脚本</title>
		<link>http://promiseforever.com/2012/03/02/background-scrolling.html</link>
		<comments>http://promiseforever.com/2012/03/02/background-scrolling.html#comments</comments>
		<pubDate>Thu, 01 Mar 2012 23:55:21 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[背景滑动]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=6169</guid>
		<description><![CDATA[话说这个似乎前一阵很流行.贴下代码吧. &#60;script type=&#34;text/javascript&#34;&#62; jQuery&#40;function&#40;$&#41; &#123; /* Scrolling Background */ var currentOffset = &#91;0, 0&#93;; var backgroundImage = new Image&#40;&#41;; var updateBackground = function&#40;&#41; &#123; currentOffset&#91;0&#93; = currentOffset&#91;0&#93; - 1 % backgroundImage.width; var attributeString = currentOffset&#91;0&#93; + &#34;px &#34; + currentOffset&#91;1&#93; + &#34;px&#34;; $&#40;'body'&#41;.css&#40;'background-position', attributeString&#41;; setTimeout&#40;updateBackground, 100&#41;; &#125;; backgroundImage.onload = function &#40;&#41; &#123;updateBackground&#40;&#41;;&#125; backgroundImage.src = &#34;_static/TekapoSky.jpg&#34;;&#125;&#41;; ...]]></description>
		<wfw:commentRss>http://promiseforever.com/2012/03/02/background-scrolling.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CuFon 中文可实施方案</title>
		<link>http://promiseforever.com/2012/02/02/cufon-%e4%b8%ad%e6%96%87%e5%8f%af%e5%ae%9e%e6%96%bd%e6%96%b9%e6%a1%88.html</link>
		<comments>http://promiseforever.com/2012/02/02/cufon-%e4%b8%ad%e6%96%87%e5%8f%af%e5%ae%9e%e6%96%bd%e6%96%b9%e6%a1%88.html#comments</comments>
		<pubDate>Wed, 01 Feb 2012 17:15:03 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[生活随笔]]></category>
		<category><![CDATA[cufon]]></category>
		<category><![CDATA[中文]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=5944</guid>
		<description><![CDATA[先说一下咱自己的进度吧，目前可以动态根据传入内容进行字库缓存生成，每个页面调用common字库，和独立字库即可实现中文字体的快速替换渲染。但是你可能会好奇，那么为什么你没有在站内使用cufon呢，很简单的原因，我还在制作字库。字库准备使用几种字体混合的方案，实现全字库可用的目标。 cufon是一种使用javascript进行快速字体渲染的技术，想要在你的网站里使用你切片时候的字体么。想解决国外模版和字体不支持中文显示的问题么，使用cufon吧。 类似技术还有sIFR、typeface、css3渲染等，但是从现在的通用性来说，cufon是最强的。 官方GIT主页在这里，我觉得我没必要进行cufon的详细介绍了。晚些时候，做好字体，开始考虑把函数封包翻出来分享。 用16MB的楷书+Droid生成了120MB的STXingKai.sfd..压力很大,修改PHP转换脚本中,或许我需要制作一个WINDOWS GUI SHELL?]]></description>
		<wfw:commentRss>http://promiseforever.com/2012/02/02/cufon-%e4%b8%ad%e6%96%87%e5%8f%af%e5%ae%9e%e6%96%bd%e6%96%b9%e6%a1%88.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[CSS]Web配色字典</title>
		<link>http://promiseforever.com/2011/06/06/cssweb%e9%85%8d%e8%89%b2%e5%ad%97%e5%85%b8.html</link>
		<comments>http://promiseforever.com/2011/06/06/cssweb%e9%85%8d%e8%89%b2%e5%ad%97%e5%85%b8.html#comments</comments>
		<pubDate>Mon, 06 Jun 2011 08:58:07 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[WEB]]></category>
		<category><![CDATA[实用软件]]></category>
		<category><![CDATA[配色字典]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=3977</guid>
		<description><![CDATA[很经典的一本书,记得前几年看到的时候,突然眼前一亮,这种书属于某个阶段,你渴望去了解颜色,但是颜色概念不多的时候,有一些启示作用,虽然里面很多颜色不符合现在的配色哲学了.但是依旧不失资料的向导作用,毕竟他的颜色取向在某方面还是正确的。 这本书设计的样式当时深深的打动了俺&#8230;现在的话..他的样式应该算老土中的战斗机了吧. 我把ISO光盘里的数据页面打包了,这个是导航页.还是很简洁的.符合以前的页面美观. 随便选择一个色系看看。 每种风格都有相关的例子，或许入门的人正是缺少这种例子吧。 调色盘页面。我用的是OPERA.或许你的页面风格和我的不一样,但是内容是一样的. 最后上传下附件[光盘文件]:]]></description>
		<wfw:commentRss>http://promiseforever.com/2011/06/06/cssweb%e9%85%8d%e8%89%b2%e5%ad%97%e5%85%b8.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[CSS]经典的DIV块的配色</title>
		<link>http://promiseforever.com/2011/06/06/css%e7%bb%8f%e5%85%b8%e7%9a%84div%e5%9d%97%e7%9a%84%e9%85%8d%e8%89%b2.html</link>
		<comments>http://promiseforever.com/2011/06/06/css%e7%bb%8f%e5%85%b8%e7%9a%84div%e5%9d%97%e7%9a%84%e9%85%8d%e8%89%b2.html#comments</comments>
		<pubDate>Mon, 06 Jun 2011 08:43:26 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[经典资料]]></category>
		<category><![CDATA[配色]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=3970</guid>
		<description><![CDATA[2007年10月28日的文件&#8230;我果然有够能翻的..稍微修改了一下.代码不是那么冗杂了。 附件:]]></description>
		<wfw:commentRss>http://promiseforever.com/2011/06/06/css%e7%bb%8f%e5%85%b8%e7%9a%84div%e5%9d%97%e7%9a%84%e9%85%8d%e8%89%b2.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[CSS]自动缩略图片适应页面</title>
		<link>http://promiseforever.com/2011/01/30/css%e8%87%aa%e5%8a%a8%e7%bc%a9%e7%95%a5%e5%9b%be%e7%89%87%e9%80%82%e5%ba%94%e9%a1%b5%e9%9d%a2.html</link>
		<comments>http://promiseforever.com/2011/01/30/css%e8%87%aa%e5%8a%a8%e7%bc%a9%e7%95%a5%e5%9b%be%e7%89%87%e9%80%82%e5%ba%94%e9%a1%b5%e9%9d%a2.html#comments</comments>
		<pubDate>Sun, 30 Jan 2011 16:31:03 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[自动缩略图片]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=2730</guid>
		<description><![CDATA[重写的时候，翻CSS看到一段内容，感觉很古老了，但是或许什么时候写简单页面会用上，留下来吧。 .post_img &#123; max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;padding: 3px; zoom:expression&#40; function&#40;elm&#41; &#123; if &#40;elm.width&#62;560&#41; &#123; var oldVW = elm.width; elm.width=560; elm.height = elm.height*&#40;560 /oldVW&#41;; &#125; elm.style.zoom = '1'; &#125;&#40;this&#41;&#41;; &#125; 具体数值，可以修改。比如最大宽度600，适应宽度560等。]]></description>
		<wfw:commentRss>http://promiseforever.com/2011/01/30/css%e8%87%aa%e5%8a%a8%e7%bc%a9%e7%95%a5%e5%9b%be%e7%89%87%e9%80%82%e5%ba%94%e9%a1%b5%e9%9d%a2.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>[CSS]也说CSS框架</title>
		<link>http://promiseforever.com/2011/01/21/css%e4%b9%9f%e8%af%b4css%e6%a1%86%e6%9e%b6.html</link>
		<comments>http://promiseforever.com/2011/01/21/css%e4%b9%9f%e8%af%b4css%e6%a1%86%e6%9e%b6.html#comments</comments>
		<pubDate>Fri, 21 Jan 2011 06:43:29 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[框架]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=2688</guid>
		<description><![CDATA[今天看到CNBETA上收了一篇关于CSS框架的文章,甚喜,尤其是看到Elements和YUI被如此高的认知.但是. 原文地址：http://www.cnbeta.com/articles/71868.htm 盲目使用框架,会有很多用不到的代码永远沉睡在你的文档中,如何高效去除呢. 调试的话，相信大家还是喜欢在FF里畅游.那么试一试 http://code.google.com/intl/zh-CN/speed/page-speed/ 这个插件感觉还不错.可以去除没有用的CSS代码. 头有点晕,睡觉了..回头补全.]]></description>
		<wfw:commentRss>http://promiseforever.com/2011/01/21/css%e4%b9%9f%e8%af%b4css%e6%a1%86%e6%9e%b6.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[CSS]Div&amp;Css布局入门</title>
		<link>http://promiseforever.com/2009/07/10/cssdivcss%e5%b8%83%e5%b1%80%e5%85%a5%e9%97%a8.html</link>
		<comments>http://promiseforever.com/2009/07/10/cssdivcss%e5%b8%83%e5%b1%80%e5%85%a5%e9%97%a8.html#comments</comments>
		<pubDate>Fri, 10 Jul 2009 06:32:38 +0000</pubDate>
		<dc:creator>苏洋</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS.DIV]]></category>
		<category><![CDATA[入门]]></category>
		<category><![CDATA[布局]]></category>

		<guid isPermaLink="false">http://promiseforever.com/?p=2006</guid>
		<description><![CDATA[一篇相当老的文章，突然觉得还是很有价值，收藏了吧。

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。

这篇文章将告诉你应该怎样...]]></description>
		<wfw:commentRss>http://promiseforever.com/2009/07/10/cssdivcss%e5%b8%83%e5%b1%80%e5%85%a5%e9%97%a8.html/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

