<?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>WEB前端开发 &#187; css</title>
	<atom:link href="http://www.css88.com/archives/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Mon, 06 Feb 2012 13:31:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>各浏览器的默认CSS</title>
		<link>http://www.css88.com/archives/2418</link>
		<comments>http://www.css88.com/archives/2418#comments</comments>
		<pubDate>Wed, 28 Jul 2010 15:18:06 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=2418</guid>
		<description><![CDATA[在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。 各浏览器的默认CSS可以在这里http://www.iecss.com/找到，贪心一下，把这些样式都保存了一份： IE6(下载) IE7(下载) IE8(下载) IE9(下载) Firefox 3.6.3(下载) Webkit (r57042) (下载) Opera 10.51(下载) 当然我们还可以找到更老的一些浏览器默认样式： Firebird 0.7 Firefox 0.8 Firefox 0.9 Firefox 2.0.0.6 Firefox 2.0.0.12 Firefox 3.0b3 Firefox 3.0.1 Firefox 3.0.8 Flock 0.9.0.2 Flock 1.2.4 Flock 1.2.7 Konqueror 3.2.0 Mozilla 1.0.1 Mozilla 1.5 Navigator 6.1 Navigator 7.1 Navigator 8.1 Navigator 9.0b3 Safari 3.0.4 Safari x Safari [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/2418/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>页面制作中一些技术、技巧和工具的总结(一)</title>
		<link>http://www.css88.com/archives/1746</link>
		<comments>http://www.css88.com/archives/1746#comments</comments>
		<pubDate>Fri, 07 Aug 2009 04:51:24 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1746</guid>
		<description><![CDATA[  一、css中一些技术、技巧 1.Reset CSS 知道Reset CSS是什么吗？通常情况下，它也被写成CSS Reset，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。前端开发工作中有一款好的、统一的Css Reset将提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。网上有很多Reset CSS。(转载请注明出处：WEB前端开发 http://www.css88.com/) 大家可以看看这里：http://www.css88.com/archives/541 和 http://www.css88.com/archives/614 2.CSS Sprites 利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；个人认为能CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和，原因在于每张图片都有额外的图片信息隐藏在图片中，这样多张图片合并，就能节省些字节； 大家可以看看这里：http://www.css88.com/archives/756 3.CSS 选择器 选择器，或者选择符，selector，是构建整个CSS的基础。CSS 选择器能使我们很好的将样式归类。减少样式的耦合，进行区块话管理，如果能实现前端页面的模块化开发，那么CSS 选择器也就更有用武之地了。(转载请注明出处：WEB前端开发 http://www.css88.com/) 例如： .news{&#8230;} .news h3{&#8230;} .news ui li{&#8230;.} 这样就很容易维护这个news区块； 大家可以看看这里：http://www.css88.com/archives/1635 4.CSS 渲染效率 CSS渲染规则是：在一条css中，css选择器是从最右边开始之后依次向左移动的，直到它不匹配CSS规则或匹配错误；所以我们的工作重点应该放在最右侧的CSS选择器来匹配大量的页面的元素。(转载请注明出处：WEB前端开发 http://www.css88.com/) 大家可以看看这里：http://www.css88.com/archives/1472 5.haslayout IE6下bug很多源于haslayout；haslayout 是一个非常有必要彻底弄清除的概念； 大家可以看看：http://www.css88.com/archives/tag/haslayout 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《页面制作中一些技术、技巧和工具的总结(一)》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1746/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>精通CSS-高级Web标准解决方案PDF电子书下载</title>
		<link>http://www.css88.com/archives/1672</link>
		<comments>http://www.css88.com/archives/1672#comments</comments>
		<pubDate>Mon, 13 Jul 2009 00:43:13 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.css88.com/archives/1672</guid>
		<description><![CDATA[CSS作为Web标准的一部分，已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言，但是由于种种原因，真正精通CSS却绝非易事。在使 用CSS开发网站时，会遇到形形色色的浏览器bug和不一致问题，而解决方案又五花八门，往往让使用者感觉千头万绪、不知从何着手。 本书将最 有用的CSS技术汇总在一起，还总结了CSS设计中的最佳实践，讨论了解决各种实际问题的技术，弥补了一直以来CSS图书的空白。正因如此，英文版出版 后，一时洛阳纸贵，多次重印，并迅速登上Amazon图书排行榜前列，最高时甚至与哈里·波特并驾齐驱，创造了计算机图书的销售奇迹。 本书最后的两个实例研究将书中讨论的许多技术组合起来，使读者不仅理解工作原理，而且能够学到如何将它们应用在实际项目中，迅速精通CSS，成为CSS专家。 本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格 设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补CSS知识欠缺不可或 缺的参考书。 本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。 下载地址：http://dl.iplaysoft.com/files/192.html 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《精通CSS-高级Web标准解决方案PDF电子书下载》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1672/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>line-height的继承问题</title>
		<link>http://www.css88.com/archives/1311</link>
		<comments>http://www.css88.com/archives/1311#comments</comments>
		<pubDate>Sun, 24 May 2009 12:00:57 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[line-height]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1311</guid>
		<description><![CDATA[关于使用line-height的基本语法和单行文本的垂直居中问题可以查看这里，原文地址： http://www.css88.com/archives/1304 line-height的属性值: normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 例如：line-height:1.5; length 设置固定的行间距。  例如：line-height:18px; %      基于当前字体尺寸的百分比行间距。 例如：line-height:150%; line-height是可以继承的，由于这个特性，子元素就可以不用重复定义line-height了,假设一段文字的line-height:200%;font-size:12px;那么行高应该是24px；而当装在这段文字的容器有子元素的时候，子元素会继承line-height:200%的属性。但是假设这个子元素的字体改变的时候，比如字体一下子到font-size:54px;的时候，比肯能回想到行高应该是108px（54*200%），其实错了。(转载请注明出处：WEB前端开发 http://www.css88.com/) 例如代码： &#60;div style=&#34; line-height:200%;font-size:12px;&#34;&#62; &#60;div&#62;::CODECOLORER_BLOCK_1::&#60;/div&#62; &#60;pre style=&#34;font-size:54px;&#34;&#62; line-height的继承问题 line-height的继承问题 line-height的继承问题&#60;/pre&#62;&#60;/div&#62; 我们看看截图： 有的时候，我们为了实现单行文字的垂直居中，会给line-height一个和height相同的固定的值；有的时候，我们为了调整特定的某段文字的行间距，通常会考虑使用百分比或者相对尺寸的em或者px。这些情况下，我们都不需要考虑line-height的继承，所以我们不会发现任何问题。(转载请注明出处：WEB前端开发 http://www.css88.com/) 那么我们在回去看line-height的属性值，normal ，length，%，3个在子元素的字体改变的时候都不能正常显示了，那么number呢，例如：line-height:1.5;此数字会与当前的字体尺寸相乘来设置行间距。 请看demo页面：http://www.css88.com/demo/line-height/line-height.html 看过例子后，你会发现，只要有单位或百分比的line-height继承，都发生了重叠的现象。那到底这是什么原因导致的呢？ 如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。(转载请注明出处：WEB前端开发 http://www.css88.com/) 这种情况碰到最多的博客，留言，论坛等地反，因为这些地方大多有设置字体大小的功能。 另外： 今天在测试的页面的时候还发现一个ie的bug，就是{line-height:150%;font-size:12px;}、{line-height:18px;font-size:12px;}、{line-height:1.5;fon-size:12px;}在页面呈现的时候居然高度不一样，{line-height:18px;font-size:12px;}、{line-height:1.5;fon-size:12px;}呈现的都是18px，而{line-height:150%;font-size:12px;}呈现的却是19px； 其他色数值，例如{line-height:24px;font-size:12px;}、{line-height:200%;font-size:12px;}、{line-height:2;font-size:12px;}又是相等的24px。这是搞不懂IE了。 请看demo页面：http://www.css88.com/demo/line-height/line-height2.html 郁闷的很，我不知道是什么原因，这也正是今天我彻底研究line-height的原因。 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《line-height的继承问题》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1311/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>关于使用line-height单行文本的垂直居中问题</title>
		<link>http://www.css88.com/archives/1304</link>
		<comments>http://www.css88.com/archives/1304#comments</comments>
		<pubDate>Sun, 24 May 2009 09:06:36 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[line-height]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1304</guid>
		<description><![CDATA[在前端开发中经常用line-height定义行高和单行文本的垂直居中，当然偶尔也配合的做其他的垂直居中。 先来看看基本的语法和属性值： 语法： line-height : normal &#124; number &#124; length &#124; % 参数： normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 说明： 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。 如行内包含多个对象，则应用最大行高。此时行高不可为负值。 对应的脚本特性为lineHeight。 &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211; 下面说说再说说line-height单行文本的垂直居中问题 先写个height、line-height都为25px，背景为红色的元素，设置文字为12px。然后量下，文字上面是6像素，文字下面是8像素。。同时增加或者减少height、line-height 1px发现如果当前值是奇数那1px会加到文字和底部空间里而减少时减掉的是文字和顶部空间的1px（加下减上）；为偶数时刚好相反：加上减下。当我们给文字加下划线的时候发现文字的垂直位置并没变，这能说明什么呢？还不太肯定，继续同时减小heighe、line-height直到一个合适的值：14px，这时候我们可以看到文字和下划线都是完整的，继续减小1px。这时IE已经不按我们刚才发现的规矩办事了，文字上面被截去1px，这样看来14px应该是IE认为的一个临界点，此时整体高低减去文字高度刚好为3px。会不会？。。。因为这时文字是顶这上边界的，我们把文字增加到2行，发现了吧，第二行的文字不是顶这第一行的下划线的，而是有1px的距离。3px果然是下划线的高度。 其实这里还有一点特殊的地方就是如果我们一开始把height、line-height都设为30px那这时2px会变为3px。这个可以用我们上面得出的“偶数情况加上减下的结论”解释：heighe、line-height同为30px的时候上下空白区域高度差是3px，然后height、line-height同时加1px(就是31px)，这1px应该是加到上部空间里，所以3pxbug会变成2pxbug。 IE6-IE8都有这个问题，firefox，Opera，Safari也都存在这个问题， 比如： &#60;div style=&#34;height:25px;line-height:25px;background:red;color:#FFFFFF;font-size:12px;&#34;&#62;文字字&#60;/div&#62; 如图： 文字上面是6像素，文字下面是8像素。(转载请注明出处：WEB前端开发 http://www.css88.com/) 再如： &#60;div style=&#34;height:30px;line-height:30px;background:red;color:#FFFFFF;font-size:12px;&#34;&#62;文字字&#60;/div&#62; ie下：文字上面是8像素，文字下面是11像素；firefox，Opera，Safari下：文字上面是9像素，文字下面是10像素； 算一下我们就可以知道，其实没带下划线的12px文字在显示的时候都是11像素。 有2个相对解决方案; 方案1、加padding-top：(转载请注明出处：WEB前端开发 http://www.css88.com/) &#60;div style=&#34;height:22px;line-height:22px; padding-top:3px;background:red;color:#FFFFFF;font-size:12px;&#34;&#62;文字字&#60;/div&#62; 方案2、加overflow:hidden： &#60;div style=&#34;height:25px;line-height:28px;background:red;color:#FFFFFF;font-size:12px; overflow:hidden&#34;&#62;文字字&#60;/div&#62; 声明: 本文采用 BY-NC-SA [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1304/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>《精通CSS:高级Web标准解决方案》(CSS Mastery:Advanced Web Standards Solutions)下载</title>
		<link>http://www.css88.com/archives/1205</link>
		<comments>http://www.css88.com/archives/1205#comments</comments>
		<pubDate>Wed, 22 Apr 2009 04:49:01 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[开发资源]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1205</guid>
		<description><![CDATA[中文名: 精通CSS:高级Web标准解决方案 英文名: CSS Mastery:Advanced Web Standards Solutions 发行时间: 2006年 地区: 大陆 对白语言: 普通话 文字语言: 简体中文 简介: ■Amazon第一CSS畅销书 　　■最有用的CSS技术汇总 　　■解密业界大师绝技 　　 CSS作为Web标准的一部分，已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言，但是由于种种原因，真正精通CSS却绝非易事。在使用CSS开发网站时，会遇到形形色色的浏览器bug和不一致问题，而解决方案又五花八门，往往让使用者感觉千头万绪、不知从何着手。 　　本书将最有用的CSS技术汇总在一起，还总结了CSS设计中的最佳实践，讨论了解决各种实际问题的技术，弥补了一直以来CSS图书的空白。正因如此，英文版出版后，一时洛阳纸贵，多次重印，并迅速登上Amazon图书排行榜前列，最高时甚至与哈里·波特并驾齐驱，创造了计算机图书的销售奇迹。(转载请注明出处：WEB前端开发 http://www.css88.com/) 　　本书最后的两个实例研究将书中讨论的许多技术组合起来，使读者不仅理解工作原理，而且能够学到如何将它们应用在实际项目中，迅速精通CSS，成为CSS专家。 　　本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补CSS知识欠缺不可或缺的参考书。(转载请注明出处：WEB前端开发 http://www.css88.com/) 　　本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。 电驴下载： 书籍：ed2k://&#124;file&#124;%5B%E7%B2%BE%E9%80%9ACSS%E9%AB%98%E7%BA%A7Web%E6%A0%87%E5%87%86%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%5D.CSS.Mastery.pdf&#124;49939895&#124;d393252dd0319fc123d54392f659af66&#124;h=FPX4J2VJH7NDJYEVJOXMOS234OO4QZAQ&#124;/ 源代码：ed2k://&#124;file&#124;%E6%BA%90%E4%BB%A3%E7%A0%81.zip&#124;710466&#124;7b75adb55716e3ed5b2ed9c1e708d2cd&#124;h=XKMHRA4WXG4NZHAOUJTMKQXFPY32ZVME&#124;/ 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《《精通CSS:高级Web标准解决方案》(CSS Mastery:Advanced Web Standards Solutions)下载》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1205/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>css酷站欣赏-30个音乐网站</title>
		<link>http://www.css88.com/archives/1179</link>
		<comments>http://www.css88.com/archives/1179#comments</comments>
		<pubDate>Fri, 17 Apr 2009 10:54:00 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[设计素材]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css酷站]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1179</guid>
		<description><![CDATA[Mx3 just hear !t midomi.com Apple &#8211; iTunes Last.fm Deezer evelMerch Gigotron Virb Mugasha Songbird 14 tracks Bandize.com Champion Sound Lasttweet.com Echodio iLike Dorble.com LyricSift Jamseed Taste Kid NYLVI Pitchfork Twisten.FM Sellaband Slicethepie Tunerec Songza Better Than The Van 转载自：http://sixrevisions.com/design-showcase-inspiration/30-beautiful-music-websites-for-design-inspiration/ 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《css酷站欣赏-30个音乐网站》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1179/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>【IE6的疯狂之九】li在IE中底部空行的BUG</title>
		<link>http://www.css88.com/archives/1111</link>
		<comments>http://www.css88.com/archives/1111#comments</comments>
		<pubDate>Mon, 13 Apr 2009 13:30:34 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[IE6 BUG]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1111</guid>
		<description><![CDATA[曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题），原文地址： http://www.css88.com/archives/421； IE6 BUG大全： http://www.css88.com/archives/579 但是这次li在IE中底部出现的不是3像素而是一整条空白行，如图： HTML代码： &#60;ul&#62;   &#60;li&#62;&#60;a href=&#34;#&#34;&#62;第1条连接&#60;/a&#62;&#60;/li&#62;   &#60;li&#62;&#60;a href=&#34;#&#34;&#62;第2条连接&#60;/a&#62;&#60;/li&#62;   &#60;li&#62;&#60;a href=&#34;#&#34;&#62;第3条连接&#60;/a&#62;&#60;/li&#62; &#60;/ul&#62; CSS代码： * {padding:0;margin:0;} li { } li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;} li a:hover {background:#BBB;} 查看demo，请使用IE6查看：http://www.css88.com/demo/IE6_bug/ie6-li/ie6-bug.html IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。(转载请注明出处：http://www.css88.com) 解决方案1： * {padding:0;margin:0;} li { } li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;zoom:1} [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1111/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>CSS引用(link)和导入(@import)的区别(2009年4月13日更新)</title>
		<link>http://www.css88.com/archives/1079</link>
		<comments>http://www.css88.com/archives/1079#comments</comments>
		<pubDate>Fri, 10 Apr 2009 17:41:01 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS link @import]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1079</guid>
		<description><![CDATA[大家知道页面要使用外部css文件的方式有两种，一种是引用(link)，例如：&#60;link rel=&#8217;stylesheet&#8217; href=&#8217;a.css&#8217;&#62;；另一种是导入(@import)，例如：&#60;style&#62;@import url(&#8216;a.css&#8217;);&#60;/style&#62;；两者引用的方式在页面上的展现效果却是一样的，但是两者又有着很重大的区别：就是页面的性能问题！ 当然如果站点的流量没达到一定的流量（比如说10万ip或者更大），我觉得用link 或者 @import或者都是无所谓的，只要你维护方便。 假设我们一张页面使用了两个样式文件:a.css和b.css; 第一种方式，两个都导入： &#60;style&#62; &#60;!-- @import url(&#039;a.css&#039;); @import url(&#039;b.css&#039;); --&#62; &#60;/style&#62; 我们可以用使用工具分析一下网页的加载情况，如图： 即两个css同时加载； 第二种方式，一个引用，一个导入： &#60;link rel=&#039;stylesheet&#039; type=&#039;text/css&#039; href=&#039;a.css&#039;&#62; &#60;style&#62; @import url(&#039;b.css&#039;); &#60;/style&#62; 再来看看截图： 也就是等a.css下载完成了后再下载b.css,页面性能明显下降；   第三种方式，引用a.css，在a.css导入b.css： &#60;/link&#62;&#60;link rel=&#039;stylesheet&#039; type=&#039;text/css&#039; href=&#039;a.css&#039;&#62; 在b.css中导入a.css @import url(b.css&#039;); 我们看截图：性能还是不好！   第四种方式，引用a.css和b.css(b.css只是导入c.css)，b.css导入c.css： &#60;/link&#62;&#60;link rel=&#039;stylesheet&#039; type=&#039;text/css&#039; href=&#039;a.css&#039;&#62; &#60;/link&#62;&#60;link rel=&#039;stylesheet&#039; type=&#039;text/css&#039; href=&#039;b.css&#039;&#62; 在b.css中导入c.css @import url(&#039;b.css&#039;); 我们再来看截图： 这是ie下的截图，性能还是很差： [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1079/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>2009年CSS裸奔节（CSS Naked Day ）</title>
		<link>http://www.css88.com/archives/1057</link>
		<comments>http://www.css88.com/archives/1057#comments</comments>
		<pubDate>Wed, 08 Apr 2009 12:27:43 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[CSS Naked Day]]></category>
		<category><![CDATA[CSS裸奔节]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1057</guid>
		<description><![CDATA[CSS Naked Day，也称CSS裸奔节或CSS裸奔日，2009年4月9日是第四界css裸奔节。本站也参加了这次裸奔节！ CSS裸奔节就是将这整站的css样式都去掉，这样所有的布局，颜色，背景什么的就都没有了(除非你使用table布局)，只剩下html实体显示出来，起源好像是比较无聊的想法，就是剥去css的外衣，让大家看看你的(x)html代码是否工整，但是时至html语义被极力推崇的今日，CSS裸奔节就给外的有意义！ CSS裸奔节的意义 不管CSS裸奔节的原始意义是什么，或许只是一个网络恶作剧，但是从第一届CSS裸奔节（2006年4月5日）开始，CSS裸奔节的意义在于：推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。 告诫大家做页面不仅仅是把还原设计稿，更不是所谓的css+div，更多的是使用正确的 (x)html语义标记、良好的层次结构。 历届CSS Naked Day的举办时间 第一届CSS裸奔节：2006年4月5日 第二届CSS裸奔节：2007年4月5日 第三届CSS裸奔节：2008年4月9日 第四届CSS裸奔节：2009年4月9日  如何加入CSS Naked Day css naked day官方网站：http://naked.dustindiaz.com/ 使用如下的PHP代码 function is_naked_day($d) { $start = date(&#8216;U&#8217;, mktime(-12, 0, 0, 04, $d, date(&#8216;Y&#8217;))); $end = date(&#8216;U&#8217;, mktime(36, 0, 0, 04, $d, date(&#8216;Y&#8217;))); $z = date(&#8216;Z&#8217;) * -1; $now = time() + $z; if [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1057/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

