﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-过河卒-随笔分类-W3C/Css/Html</title><link>http://www.blogjava.net/ponzmd/category/28186.html</link><description>&lt;i&gt;平凡而简单的人一个，无权无势也无牵无挂。一路厮杀，只进不退，死而后已，岂不爽哉！&lt;br/&gt;
收起对“车”日行千里的羡慕；收起对“马”左右逢缘的感叹；目标记在心里面，向前进。一次一步，一步一脚印，跬步千里。&lt;br/&gt;
这个角色很适合现在的我。&lt;/i&gt; </description><language>zh-cn</language><lastBuildDate>Fri, 28 Dec 2007 06:31:16 GMT</lastBuildDate><pubDate>Fri, 28 Dec 2007 06:31:16 GMT</pubDate><ttl>60</ttl><item><title>《精通CSS》阅读笔记 第四章</title><link>http://www.blogjava.net/ponzmd/archive/2007/12/26/170433.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Tue, 25 Dec 2007 17:57:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/12/26/170433.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/170433.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/12/26/170433.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/170433.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/170433.html</trackback:ping><description><![CDATA[<p><br />
<strong>链接</strong></p>
<blockquote>
<p>:link 用来给没有被访问过的链接设定样式<br />
:visited 用来设定已经访问过的链接的样式<br />
:hover 动态伪类设定鼠标停留处元素的样式<br />
:active 动态伪类用来寻找被激活的元素<br />
由于伪类之间的特殊性是相同的，所以设定伪类样式时需要注意顺序。<br />
合理的顺序是：a:link,a:visited,a:hover,a:active 简记为LoVe:HAte.<br />
其中:link,:visited是A标签专用的，而:hover,:active等不限于A元素，也可以在其他某些元素上。 <br />
<br />
让链接看起来酷酷的<br />
&lt;ps:这个其实没有多少技术的东西在里面，关键是创意&gt;<br />
大家可以看看这里的例子： <a href="http://www.blogjava.net/Files/ponzmd/CssLink.rar">示例下载</a> </p>
</blockquote>
<p><strong>为链接添加有意义的修饰</strong></p>
<blockquote>
<p><strong><br />
</strong>1.标识离开网站的链接<br />
方案1：给相应的链接加上一个适当的图标来标识链接的类型：比如该链接是否链接到网站外的地址；是否是一个email地址；是否启动一个im请求甚至于标识下载文件的类型等等。<br />
改进方案：每个链接都加的话太麻烦，维护起来也不方便。可以采用属性选择器来帮助我们完成这样的工作。<br />
比如想这样：<br />
a[href^= "mailto"]{<br />
&nbsp;&nbsp;&nbsp; background:url(email.png) no-repeat right top;<br />
&nbsp;&nbsp;&nbsp; padding-right:10px;<br />
}<br />
但是IE6里面是不支持属性选择器的，只能变通一下：可以采用javascript+Dom的方式来完成。可以在这个地方查看：<a href="http://simonwillison.net/2003/Mar/25/getElementsBySelector/">http://simonwillison.net/2003/Mar/25/getElementsBySelector/</a><br />
里面提到的SimonWillison写的getElementBySelector方法。<br />
大家可以看看这里的例子： <a href="http://www.blogjava.net/Files/ponzmd/CssLink.rar">示例下载</a> </p>
</blockquote>
<p><strong>把链接做的像按钮</strong></p>
<blockquote>
<p><strong></strong><br />
思路：将链接的可响应事件的响应区域扩大到整个背景区域，这样看起来这个链接象是个按钮。<br />
实现：其实很简单只需要设置A标签的display：block就可以了。这样的话A会一改自己的行内元素的性质，转换成一个块元素。这样就达到目的了。<br />
问题：IE5.x如果不设置元素的width，height的话，即时设置了display：block也是没有用的，所有要显示的设置width，height的值。<br />
大家可以看看这里的例子： <a href="http://www.blogjava.net/Files/ponzmd/CssLink.rar">示例下载</a></p>
</blockquote>
<p><strong>图像翻转</strong></p>
<blockquote>
<p><strong></strong><br />
方案1：简单翻转：利用颜色的反差来形成翻转效果。<br />
方案2：具有图像的翻转 由于多图片翻转在第一次载入的时候回出现图像短暂延迟的，造成闪烁效果。<br />
改进方案2：Pixy方法，替换图片时显示图片不同部位。<br />
利用这样技术的一种应用：标识那些链接已经被访问过了，这个看起来还挺个性的。<br />
大家可以看看这里的例子： <a href="http://www.blogjava.net/Files/ponzmd/CssLink.rar">示例下载</a> </p>
</blockquote>
<p><strong>纯CSS工具提示</strong></p>
<blockquote>
<p><strong></strong><br />
其实就是把预先设置好的提示信息隐藏了，在适当是时机显示在适当的位置。<br />
还是看例子来的实在。<a href="http://www.blogjava.net/Files/ponzmd/CssLink.rar">示例下载</a></p>
</blockquote> 
<img src ="http://www.blogjava.net/ponzmd/aggbug/170433.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-12-26 01:57 <a href="http://www.blogjava.net/ponzmd/archive/2007/12/26/170433.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>《精通CSS》阅读笔记 第三章</title><link>http://www.blogjava.net/ponzmd/archive/2007/12/25/170246.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Tue, 25 Dec 2007 02:32:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/12/25/170246.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/170246.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/12/25/170246.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/170246.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/170246.html</trackback:ping><description><![CDATA[<p><strong>背景图片的定位</strong></p> <blockquote> <p><br>1.背景定位主要通过background-position属性来设置.属性说明如下：</p></blockquote> <table cellspacing="0" cellpadding="2" width="600" border="2"> <tbody> <tr> <td valign="top" width="600"> <p>Syntax </p> <p><strong>HTML { background-position : sPosition }&nbsp; <br>Scripting object.style.backgroundPosition [ = sPosition ]</strong>  <p>Possible Values  <p>sPosition String that specifies or receives one or two of the following values. length Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference. <br><em><strong>percentage Integer</strong></em>, followed by a percent sign (%). The value is a percentage of the width or height of the object. <br><em><strong>vAlignment</strong></em> Vertical alignment value. Possible values include the following: <br><strong><em>&nbsp;&nbsp;&nbsp;&nbsp; top</em></strong> Vertical alignment is at the top. <br><strong><em>&nbsp;&nbsp;&nbsp; center</em></strong> Vertical alignment is centered. <br><strong><em>&nbsp;&nbsp;&nbsp; bottom</em></strong> Vertical alignment is at the bottom. <br><strong><em>hAlignment</em></strong> Horizontal alignment value. Possible values include the following: <br><strong><em>&nbsp;&nbsp;&nbsp; left</em></strong> Horizontal alignment is to the left. <br><strong><em>&nbsp;&nbsp;&nbsp; center</em></strong> Horizontal alignment is centered. <br><strong><em>&nbsp;&nbsp;&nbsp; right</em></strong> Horizontal alignment is to the right. </p></td></tr></tbody></table> <p>&nbsp;</p> <blockquote> <p>2.需要注意的是background-postion通过length来设置的话，坐标原点在图像的左上角。<br>而通过percent来设置的话，其实是将图片上相应百分比的点与父类元素上相应百分比位置的点重合得到的结果。<br>所以当设置成50%时会出现居中显示的现象。 </p></blockquote> <blockquote> <p>3.要避免出现length和percent方式混合设置的情况，这将使浏览器抓狂，不知道能干出点什么来。 </p> <p>具体示例可以参考，这里。 <a href="http://www.blogjava.net/Files/ponzmd/CssImage.rar" target="_blank">示例下载</a></p></blockquote> <p><strong>圆角框</strong></p> <blockquote> <p><strong><br></strong>1.固定宽度圆角框<br>思路：基本上通过两个裁剪好的圆角图片(顶部一个，底部一个)分别设置为相应块元素的背景。<br>限制:a.圆角框的宽度有圆角图片的大小所限制.<br>b.内层块与外层快之间不能存在间隔。即外层块不能设置padding，内层块不能设置margin 和 border。<br>c.圆角图片的背景颜色是预先设置好的，修改框样式时需要替换图片。<br>具体实现：<br>方式a:重复背景颜色<br>方式b:重复背景图片<br>具体示例可以参考，这里。 <a href="http://www.blogjava.net/Files/ponzmd/CssImage.rar" target="_blank">示例下载</a></p></blockquote> <blockquote> <p>2.不固定宽度圆角框:滑动门技术&lt;sliding doors technique&gt;<br>思路：基本上与上面的思路一致，不过圆角图片被进一步的细分。将上面的图片拆分成了左上，右上，左下，右下四个图片，<br>这样的话用来定位图片的块元素也要相应的增加。简单来说4个图片需要4层块元素来定位。<br>限制:a.圆角框的宽度有圆角图片的大小所限制.但是这里的限制出现了一点点变化<br>即圆角框的宽度可以在小于左上+右上宽度的和的范围内变动；圆角框的高度可以在小于左上+左下高度的和的范围内变动。<br>b.定义背景图片的任意两层之间不能存在间隔。即外层块不能设置padding，内层块不能设置margin 和 border。<br>c.圆角图片的背景颜色是预先设置好的，修改框样式时需要替换图片。<br>d.还有个限制就是为了实现滑动门技术，人为的添加了多层无实际语义的块元素，这是的代码的可维护性变差了。<br>具体示例可以参考，这里。 示例下载</p></blockquote> <blockquote> <p>3.如果在扩展一下：将图片拆分成9个图片，即左上，上中，右上，左中，中部，右中，左下，下中，右下 （图片井字形拆分）。<br>这样可以利用图片的重复来实现宽度和高度自由的圆角框了。<br>限制：基本上同上面一样，宽度高度的限制不存在了。<br>但是为了定位这些背景图片所添加的多个无语义块元素不是人人都能接受的，或者说是很难有人接受的。<br>如何实现大小自由的圆角框呢？<br><a href="http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/">http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/</a></p></blockquote> <blockquote> <p>具体示例可以参考，这里。 <a href="http://www.blogjava.net/Files/ponzmd/CssImage.rar" target="_blank">示例下载</a></p></blockquote> <p><strong>山顶角框(mountaintop corner)</strong></p> <blockquote> <p><strong></strong><br>思路:圆角框的实现思路和上是一样的，区别在于上面的实现中角图片的背景是确定的，而山顶角框中利用利用位图蒙版来替代角图片，将实际上位图蒙版中角图像的位置留留成透明的，这样的的该蒙版的透明部分的颜色将显示为所在块的背景颜色，这样就实现了角图片颜色可以通过设置背景颜色来更改的目的。 </p> <p>具体示例可以参考，这里。 <a href="http://www.blogjava.net/Files/ponzmd/CssImage.rar" target="_blank">示例下载</a></p></blockquote> <p><strong>阴影</strong></p> <blockquote> <p><strong></strong><br>1.简单阴影<br>思路：基本上就是将背景图片放置到图片的下面，通过适当的位移来在某个角落上面显示出背景图片，从而达到显示阴影的效果。<br>实现方式：可以通过对背景图片margin赋予负值来偏移背景图片,这种做法形成的阴影称为简单阴影；另一种做法就是通过将图片与背景图片的相对位置来相对定位来达到形成阴影的效果，这种做法称为Clagnut方法。<br>限制：图片的长宽应该要小于阴影图片的长宽这样形成的阴影看起来会比较完整，当然如果背景图片做过特殊的处理的话那就另当别论了。 </p></blockquote> <blockquote> <p>2.模糊阴影<br>思路：上面形成的阴影被指边缘缺乏过渡，所以才有了模糊阴影的方法的出现。主要思路就是利用一个具有alpha透明度的PNG来盖住阴影图象的边缘。<br>实现方式：为了实现这个PNG图片的覆盖，自然需要添加另外一个块元素用来定位这个图片。<br>具体实现可以看这里。&lt;为了兼容IE的各个版本，可是费了脑筋的&gt;<br>注意在实现模糊阴影时利用了alpha透明度的PNG图片，对于这个IE的支持可不好，好在又不少方法可以解决：<br>1.利用过滤器：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(scr='shadow.png',sizingMethod='crop');<br>2.利用条件注释来屏蔽可能造成的不良影响：<br>&lt;!--[if gte ie 5.500]&gt;<br>&lt;link rel="stylesheet" type="text/css" href="ie55.css" /&gt;<br>&lt;![endif]--&gt; </p></blockquote> <blockquote> <p>3.洋葱皮阴影<br>思路：为了弥补阴影边缘缺乏过渡的情况，采用类似于山顶角的实现。创建两国阴影尾部Gif,用它们覆盖在主阴影图像的末尾上。<br>实现方式：为了定位这两个背景图片，需要给定义两个钩子。即定义两国无语意的块元素来放置这两个gif。<br>具体实现看这里。<br>限制：添加了多个无语意块元素，破坏了样式表的可维护性。 </p> <p>具体示例可以参考，这里。 <a href="http://www.blogjava.net/Files/ponzmd/CssImage.rar" target="_blank">示例下载</a></p></blockquote> <p><strong>图片替代</strong></p> <blockquote><strong></strong> <p><br>所谓的图片替代就是利用背景图片替换文档中的文本，不是去除文本，而是利用CSS隐藏文本。<br>实现方式：<br>1.FIR(Fahrner Image Replacement):文本形成的块隐藏起来<br>2.Phark：文本偏移<br>3.Gilder/Levin：利用图片定位到文本上面将文本遮蔽起来。<br>4.IFR(Innman Flash Replacement)与sIFR(可伸缩Inman Flash Replacement)<br>要实现sIFR可以利用sifr脚本来处理，具体可以看这里:<a href="http://www.mikeindustries.com/sifr">http://www.mikeindustries.com/sifr</a><br><br>具体示例可以参考，这里。 <a href="http://www.blogjava.net/Files/ponzmd/CssImage.rar" target="_blank">示例下载</a></p></blockquote><img src ="http://www.blogjava.net/ponzmd/aggbug/170246.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-12-25 10:32 <a href="http://www.blogjava.net/ponzmd/archive/2007/12/25/170246.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>《精通CSS》阅读笔记 第二章</title><link>http://www.blogjava.net/ponzmd/archive/2007/12/20/169166.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Thu, 20 Dec 2007 14:38:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/12/20/169166.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/169166.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/12/20/169166.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/169166.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/169166.html</trackback:ping><description><![CDATA[<p><strong>CSS的继承与层叠</strong></p> <blockquote><strong></strong> <p><br>看两个例子就明白了。<br>&lt;省去一些显而易见的代码，表义为主.&gt;<br>第一个例子：<br>body{color:red;}<br>&lt;body&gt;<br>段落1<br>&lt;p&gt;段落2&lt;/p&gt;<br>&lt;/body&gt;<br>这里面段落1，段落2字体颜色全部是红色.显然p继承了body的color样式。</p> <p>第二个例子：<br>body{color:red;}<br>p{color:green;}<br>&lt;body&gt;<br>段落1<br>&lt;p&gt;段落2&lt;/p&gt;<br>&lt;/body&gt;<br>这里段落1是红色，而段落2是绿色。这里面是通过判断样式的特殊性来设定的样式。</p> <p>判断样式特殊性的方法，可以参考这里。<br>通过上面的例子，得到一个通俗的理解。继承和java里面方法继承类似，子元素继承父元素；而层叠可以看成<br>java里面的方法重载，子元素和父元素定义了同一个样式，具体用那个通过选择器特殊性的高低和位置来确<br>定。</p> <p><br>注意：虽然我用方法重载来类别css中的层叠，但是两者的判断依据是不一样的。并非子元素定义的样式就<br>一定会被使用。<br>看这个例子：<br>p{color:green;}<br>body{color:red;}<br>&lt;body&gt;<br>段落1<br>&lt;p&gt;段落2&lt;/p&gt;<br>&lt;/body&gt;<br>结果是段落1，段落2全是红色。&nbsp; </p></blockquote> <p><strong>css中的框模型</strong></p> <blockquote> <p><strong></strong><br>标准框模型：标准框模型通过内容区域＋填充(padding)＋边框(border)＋空白边(margin)组成。<br>在标准css中，元素的width和height指定的时内容区域的宽度和高度。<br>padding指定的是内容区域到边框(border)的距离。通常而言的背景(background)指的是内容区域和填充所<br>组成的这个区域。空白边(margin)通常用来设置元素之间的间隔。 </p></blockquote> <blockquote> <p>IE的框模型：这里的IE的狂模型指定的是IE5，IE6版本中怪异模式中指定的框模型。区别在于IE框模型中<br>Width和height指定的是内容区域＋填充＋边框组成的宽度和高度。这里就形成了有个问题，而解决这个问<br>题的办法就是不要给元素添加具有指定宽度的填充，而尝试填充或空白边添加到元素的父元素或子元素。<br>具体的可以看我写的示例。 </p></blockquote> <blockquote> <p>注意一般而言：元素的填充，边框，空白边是可以选择是否存在的，一般默认其值为0。但是有些情况下元<br>素可能会被用户代理样式表设置它们。所以，可以通过*{ margin:0;padding:0;}来统一设定。 </p></blockquote> <p><strong>空白边叠加</strong></p> <blockquote><strong></strong> <p><br>就是当有空白边遇到一起的时候，空白边之间会发生一种叠加。叠加的结果会是空白边中值相对较大的保留<br>下来，而这种叠加可以发散在任何两个相邻的空白边之间，无论这个空白边属于那个元素，是否包含，是否<br>是同一个元素的。 </p></blockquote> <p><strong>块元素(block)和行内元素(inline 内联元素)</strong></p> <blockquote><strong></strong> <p><br>块元素：指那些默认情况下会换行显示的元素。<br>行内元素：那些默认的情况下显示方式类似于文本的元素。默认情况下是同行显示，直到总体内容的宽度大<br>于父元素的宽度时才换行显示。<br>其实还有一部分叫做：可变元素 这些元素到底属于块元素还是行内元素需要具体环境决定。<br>这里有一篇好的介绍文章可以参考：<br>《元素block element和内联元素inline element》地址如下：<br><a href="http://hi.baidu.com/mazhifang/blog/item/42977ed0c662588ea1ec9c77.html">http://hi.baidu.com/mazhifang/blog/item/42977ed0c662588ea1ec9c77.html</a><br>相应的元素决定了组成框的类型，而元素的display属性可以改变生成框的类型。<br>通过设置display＝block，可以将一个行内元素表现的像块级元素一样。<br>而设置display＝none，则表示该元素根本不是框，这样这个元素就不在占有文档中的空间。 </p></blockquote> <p><strong>CSS的定位机制</strong></p> <blockquote> <p><strong>普通流</strong>(position:static)：就是块级框从上到下一个接一个的排列，框之间的垂直距离由框的垂直空白边计算出来.<br><strong>相对定位</strong>(position:relative)：块级框相对于它在普通流中所处的位置进行相对的偏移。<br>注：在使用相对定位时，无论元素是否移动，它仍然占着原来的空间。因此，移动元素有可能会覆盖其他的<br>元素).2个方面：块框＋行框(包裹行内框) <br><strong>绝对定位</strong>(position:absolute)：相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普<br>通中的位置.与之相反,绝对 定位使元素的位置与文档流无关,因此不占据空间.普通文档流中其他元素的布局就<br>像绝对定位的元素不存在 时一样.相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在<br>普通中的位置.与之相 反,绝对定位使元素的位置与文档流无关,因此不占据空间.普通文档流中其他元素的布局<br>就像绝对定位的元素不存在时一样. <br><em><u>我总结的：如何确定绝对定位的原始祖先? 父元素 被定位 由近及远</u></em> <br><strong>固定定位</strong>：(position:fixed)<br>它是绝对定位的一个子类别.差异在于固定元素的包含块是视口.这使我们能够创建总是出现在窗口中相同位 置的浮动元素.但是,这种定位方式各种浏览器的支持各有不同.变通的方法是通过javascript来控制，当然也可以是用css。 <br><strong>浮动</strong>：(position:float)<br>浮动模型可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘.因为浮动框不在文档的普通流中,<br>所以文档普通流中的块框表现得就像浮动框不存在一样. </p> <p>关于示例可以看这里：<a href="http://www.blogjava.net/ponzmd/archive/2007/12/20/169165.html">CSS定位机制示例</a></p></blockquote> <p><strong>清除浮动的几种方法</strong></p> <blockquote> <p>1.父框也浮动；<br>2.理由clear来做元素清除==&gt;3.扩展：利用伪类after来清除浮动<br>4.利用Javascript来动态清除浮动<br>5.利用overflow属性设置auto或hidden来清除浮动 <br>更全面的看下面的：<br>《CSS规范 闭合浮动元素介绍》<br><a href="http://web.rdxx.com/CSS/2007/9/1322433557845.shtml">http://web.rdxx.com/CSS/2007/9/1322433557845.shtml</a><br></p></blockquote> <p><strong>关于浮动的深入认识&nbsp; <br>－－－－－－－－－－－－－</strong><em>推荐顺序阅读</em></p> <blockquote>1CSS浮动原理 <br><a href="http://blog.csdn.net/fishsoul/archive/2007/09/20/1792776.aspx">http://blog.csdn.net/fishsoul/archive/2007/09/20/1792776.aspx</a><br>2.CSS Float Theory: Things You Should Know<br><a href="http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/">http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/</a> （EN）<br><a href="http://hi.baidu.com/yan5201314/blog/item/9f5bbd0ecac641e536d122f5.html">http://hi.baidu.com/yan5201314/blog/item/9f5bbd0ecac641e536d122f5.html</a> （CN）<br>3.IE6下浮动bug详解<br><a href="http://hi.baidu.com/xzkcz/blog/item/d25b580fadaac4296059f30a.html">http://hi.baidu.com/xzkcz/blog/item/d25b580fadaac4296059f30a.html</a></blockquote><img src ="http://www.blogjava.net/ponzmd/aggbug/169166.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-12-20 22:38 <a href="http://www.blogjava.net/ponzmd/archive/2007/12/20/169166.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>CSS定位机制示例</title><link>http://www.blogjava.net/ponzmd/archive/2007/12/20/169165.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Thu, 20 Dec 2007 14:37:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/12/20/169165.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/169165.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/12/20/169165.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/169165.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/169165.html</trackback:ping><description><![CDATA[<p>CSS定位效果的演示，实现浏览器 firefox2.0.0.11。因为对于Css定位各个浏览器实现方式不一样，表现相差比较大。<br />
所以具体浏览器还要具体分析其形成的效果。重要的是我们有必要搞清楚什么是正确的后者说是什么是标准的行为。</p>
<p><strong>普通流,行框相关</strong></p>
<blockquote>
<p>1.width属性是个相当与MaxWidth,而显示的实际width由内容实际占用的宽度决定.<br />
&nbsp;&nbsp;&nbsp; 2.行内属性的margin,padding,border的top,bottom属性不能影响行框的高度,影响行框高度需要使用line-height属性.<br />
&nbsp;&nbsp;&nbsp; 3.块框里面的文本行会形成无名框.这里的无名框可能是行框也可能是块框.其实文档中的所有元素都会最终包含在一个框里面.  </p>
<p>截图：</p>
<p><a href="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/1_2.jpg"><img style="border-width: 0px;" alt="1" src="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/1_thumb.jpg" border="0" height="126" width="364" /></a>&nbsp;</p>
</blockquote>
<p><strong>相对定位</strong></p>
<blockquote>
<p>1.相对定位相对的是该元素在普通流中的位置.<br />
2.相对定位的坐标定在该元素的左上角.  </p>
<p>截图：  </p>
<p><a href="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/2_2.jpg"><img style="border-width: 0px;" alt="2" src="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/2_thumb.jpg" border="0" height="244" width="232" /></a> </p>
</blockquote>
<p><strong>绝对定位</strong></p>
<blockquote>
<p>1.应用绝对定位的元素不再是普通流的一部分.也就不再占用普通流中的位置.<br />
2.绝对定位是相对的目标,需要满足三个条件:该元素的父元素,该父元素已经被定位过,<br />
&nbsp;&nbsp; 从最近的父元素找起只要页面或Html.  </p>
<p>截图：  </p>
<p><a href="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/3_2.jpg"><img style="border-width: 0px;" alt="3" src="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/3_thumb.jpg" border="0" height="187" width="244" /></a> </p>
</blockquote>
<p><strong>固定定位</strong></p>
<blockquote>
<p>1.固定定位被认为是绝对定位的一种,特别的是它相对的对象总是浏览器的可视窗口.</p>
<p>截图：</p>
<p><a href="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/5_4.jpg"><img style="border-width: 0px;" alt="5" src="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/5_thumb_1.jpg" border="0" height="167" width="244" /></a> </p>
</blockquote>
<p><strong>浮动</strong></p>
<blockquote>
<p>1.浮动的元素会脱离普通流的,不在占据普通流中的位置.但是它们浮动的范围由它的最近的父元素控制,不管父元素是如何定位的.<br />
2.浮动其实比较简单,但是具体的表现受服务器影响较大.<br />
&nbsp;<em>?有意思的现象:<br />
无论如何设置浮动和&lt;img&gt;与&lt;p&gt;的位置,当减少浏览器窗口到一定程度的时候,总是&lt;p&gt;会被换到下一行.不解??</em></p>
<p>截图：</p>
<p><a href="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/4_4.jpg"><img style="border-width: 0px;" alt="4" src="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_13700/4_thumb_1.jpg" border="0" height="63" width="495" /></a> </p>
</blockquote>
<p>具体代码就不贴了，有兴趣的可以在这里下载：<a href="http://www.blogjava.net/Files/ponzmd/CssPostion.rar">CssPostion.rar</a></p>
<img src ="http://www.blogjava.net/ponzmd/aggbug/169165.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-12-20 22:37 <a href="http://www.blogjava.net/ponzmd/archive/2007/12/20/169165.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>《精通CSS》阅读笔记 第一章</title><link>http://www.blogjava.net/ponzmd/archive/2007/12/17/168371.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Mon, 17 Dec 2007 15:47:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/12/17/168371.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/168371.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/12/17/168371.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/168371.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/168371.html</trackback:ping><description><![CDATA[<p><strong>设计有意义的代码</strong><br>1.尽可能的使用有有意义的Html标签.<br>如,h1,h2,ul,ol,dl,strong/em,blockqoute,cite,abbr,acronym,code,fieldset,legend,label,caption,thead,tbody,tfoot等<br>2.如果遇到暂时表达不了的意义,可以使用现有标记结合ID和class来赋予标签额外意义来解决.<br>注意:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a.ID和class的名字应该与意义挂钩,而避免涉及其中的样式表现.比如红色错误提示,取名成error要好于red<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b.css本身不区分大小写,但是这应该与html(xhtml)的风格保持一致.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; c.避免"多class症(classitis)",应该尽可能的减少类的使用.<br>3.div(division)提供了将文档分隔成有意义区域的方法,而span提供了对行内元素进行分组和标识的手段.div只应该出现在没有没有预定意元素可以分割当前区域的情况下.任何地方都以div来分割这叫"多div症 (divitis)" </p> <p>&nbsp;</p> <p><strong>Css验证</strong><br>常用的验证工具有:<br>w3c css valiator: <a href="http://validator.w3c.org">http://validator.w3c.org</a><br>bookmarklet:www.andybudd.com/bookmarklets<br>Firefox plugin: Web Developers Extension<br>IE plugin:<a href="http://tinyurl.com/7mnyh">http://tinyurl.com/7mnyh</a>  <p>&nbsp; <p><strong>DOCTYPE切换</strong><br>浏览器模式:根据浏览器模式的不同,会影响浏览器对页面显示方式的表现,最有名的例子是IE中的框模式.<br>通常浏览器模式分为3种:标准模式(standards mode),怪异模式(quirks mode),几乎标准模式(almost standards mode)<br>浏览器通过页面中DOCTYPE声明是否存在以及DOCTYPE中使用的DTD类型来确定具体的浏览器模式.<br>详细的区分可以看这个:<a href="http://meyerweb.com/eric/dom/dtype/dtype-grid.html">http://meyerweb.com/eric/dom/dtype/dtype-grid.html</a>&nbsp;<br>截图如下：</p> <p><a href="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_14640/dtypeSuffing.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="484" alt="dtypeSuffing" src="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_14640/dtypeSuffing_thumb.jpg" width="644" border="0"></a>&nbsp;</p> <p>&nbsp;</p> <p><strong>CSS中的选择器(seletor)<br></strong>基本的选择器:元素选择器,后代选择器(关联选择器),class选择器(类选择器),ID选择器,伪类<br>高级选择器:子选择器,相邻选择器,属性选择器<br>示例看这里：<a href="http://www.blogjava.net/ponzmd/archive/2007/12/17/168369.html">CSS选择器示例</a><br></p> <p><strong>向网页中引入样式</strong><br>方式1：<br>&lt;link href="/css/basic.css" rel="stylesheet" type="text/css" /&gt;<br>方式2：<br>&lt;style type="text/css"&gt;<br>&lt;!-- <br>@import url("/css/advanced.css");<br>--&gt;<br>&lt;/style&gt; </p> <p>&nbsp;</p> <p><strong>CSS中样式使用的优先级判断？</strong> <br>看这里，以前的一篇Blog：<a href="http://www.blogjava.net/ponzmd/archive/2007/12/17/168370.html">到底谁说了算？CSS样式表使用优先级判断</a><br> <p><strong>保持CSS样式表可维护性的一个原则</strong>  <p>在复杂的CSS样式表里面，特殊样式覆盖通用样式的情况会大量出现， 甚至于出现更特殊的样式覆盖特殊样式的情况，这时元素可以从多个地方获取样式，这可能使得样式表失去 控制。这时个好的建议是保持通用样式进可能的通用，特殊样式进可能的特殊，进而做到不需要覆盖特殊样式。如果出现不得不多次覆盖通用样式，那么从一般规则中删除需要覆盖的声明，并显示的应用于需要它的每一个元素。这样可以保持CSS样式表的可维护性。 <br> <p><strong>在CSS中的注释</strong><br>1.css以/*开始, */结束来添加注释,这种叫做C网格注释.<br>2.适当加入结构性注释,利用注释来划分代码块,方便迅速查找相应代码<br>3.通过"意外特性(gotcha)"来实现自我提示,如TODO(以后需要修改,修复或复查),KLUDGE(不完善的权宜之计 ),BUG(代码或浏览器遇到的问题),TRICKY(相对复杂的代码说明)等<br>4.发布时可理由代码编辑工具或者css优化器来删除注释.<br>5.发布时，压缩CSS文件大小: apache服务器可用gzip方式,而非apache,可用<a href="http://tinyurl.com/8w9rp">http://tinyurl.com/8w9rp</a>上面介绍的方法.  <img src ="http://www.blogjava.net/ponzmd/aggbug/168371.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-12-17 23:47 <a href="http://www.blogjava.net/ponzmd/archive/2007/12/17/168371.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>到底谁说了算？</title><link>http://www.blogjava.net/ponzmd/archive/2007/12/17/168370.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Mon, 17 Dec 2007 15:44:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/12/17/168370.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/168370.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/12/17/168370.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/168370.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/168370.html</trackback:ping><description><![CDATA[<p><strong></strong>&nbsp;</p> <p><strong>到底谁说了算？<br></strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; CSS样式使用优先级判断</p> <p>2007年5月27日写的，现在转到这里来。  <p>修正前，再次谢谢hax的指点。最正确的说法：<a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">http://www.w3.org/TR/CSS21/cascade.html#specificity</a> 参见这里的相关内容，一下只是我个人偷懒的理解方式，只解决常规情况下的绝大部分问题。不是预期使用的样式，如何判断那个样式会最终起作用呢？到底谁说了算，可以依据下面几个原则：  <p>CSS样式定义多了，常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式。  <p>1。多个选择器可能会选择同一个元素，有3个规则，从上到下重要性降低：<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ！important的用户样式<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ！important的作者样式<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 作者样式<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 用户样式<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 浏览器定义的样式<br>2。CSS样式的特殊性权重——谁有分量，谁说了算。<br>CSS规范为不同类型的选择器定义了特殊性权重，特殊性权重越高，样式会被优先应用。<br>权重设定如下：<br>html选择器，权重为1；<br>类选择器，权重为10；<br>id选择器，权重为100；<br>这里还有一种情况：在html标签中直接使用style属性，这里的style属性的权重为1000；<br>即如下情况：<br>#x34y {color:red}<br>&lt;.&nbsp; p id=x34y &gt;&nbsp; 优先选择style=""设定的样式。<br>其他类型的，大家看看例子就明白了。<br>例子：<br>h1{color:blue}&nbsp; 权重为1<br>p&nbsp; em{color:yellow}&nbsp; 权重为2<br>.warning{color:red}&nbsp; 权重为10<br>p.note em.dark{color:grag}&nbsp; 权重为22<br>#main{color:black}&nbsp; 权重为100&nbsp;&nbsp;&nbsp;&nbsp; 这里还有一种情况：<br>权重一样时如何处理？权重一样时就另说了。看看下面的就明白了。  <p>3。CSS样式的层叠原则——谁离我近，谁说了算。<br>当权重一样时，会采用“层叠原则” 后定义的会被应用。<br>如：p{color:yellow}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; p{color:red}<br>作用到这里&nbsp;&nbsp; &lt;. p &gt;我的什么颜色呢？&lt; /p&gt;<br>结果会是red的。  <p>4。CSS样式的特殊标记——谁有特权，谁说了算。<br>如果有人看不顺眼，非得要自己说了算，那可以搞点特权，如下即可<br>p {color:blue !important;}<br>加上!important;可将自己权重设为最高。<br>如果你要问两个!important;设定的样式，那个样式说了算，我说你为什么不自己试试看看呢！  <p>好了，谁说了算的问题就到这里了。</p><img src ="http://www.blogjava.net/ponzmd/aggbug/168370.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-12-17 23:44 <a href="http://www.blogjava.net/ponzmd/archive/2007/12/17/168370.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>CSS选择器示例</title><link>http://www.blogjava.net/ponzmd/archive/2007/12/17/168369.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Mon, 17 Dec 2007 15:37:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/12/17/168369.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/168369.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/12/17/168369.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/168369.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/168369.html</trackback:ping><description><![CDATA[<p>自己为了体验CSS选择器而写的一个例子。主要是模拟一个菜单条，实际的环境是Firefox2.0.0.11</p> <p>演示截图：<br>&nbsp;<a href="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_148C5/CssSelector_4.jpg"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" height="269" alt="CssSelector" src="http://www.blogjava.net/images/blogjava_net/ponzmd/WindowsLiveWriter/CSS_148C5/CssSelector_thumb_1.jpg" width="644" border="0"></a> </p> <p><strong>Html代码：</strong></p><pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">html</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">head</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">style</span> <span class="attr">type</span><span class="kwrd">="text/css"</span><span class="kwrd">&gt;</span>
<span class="rem">&lt;!--</span>
<span class="rem">    @import url("CssSelector.css");</span>
<span class="rem">--&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">style</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">head</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">body</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">h2</span><span class="kwrd">&gt;</span>CSS选择器演示<span class="kwrd">&lt;/</span><span class="html">h2</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">hr</span><span class="kwrd">&gt;</span>
说明：CSS的基本选择器有元素选择器，后代选择器(关联选择器)，Class选择器，ID选择器，伪类；<span class="kwrd">&lt;</span><span class="html">br</span><span class="kwrd">&gt;</span>
高级选择器有子选择器，相邻选择器以及属性选择器。<span class="kwrd">&lt;</span><span class="html">br</span><span class="kwrd">&gt;</span>
在实际使用中，通常通过各种选择器的组合使用来精确控制文档样式。<span class="kwrd">&lt;</span><span class="html">br</span><span class="kwrd">&gt;</span>
注意：对于不同浏览器对于CSS选择器种类支持各有区别，一般来说基本选择器是支持的。
<span class="kwrd">&lt;</span><span class="html">hr</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">="headContent"</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">ul</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">li</span> <span class="attr">id</span><span class="kwrd">="firstItem"</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">="#"</span> <span class="kwrd">&gt;</span>
阅读
<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">="#"</span> <span class="attr">rel</span><span class="kwrd">="me"</span><span class="kwrd">&gt;</span>
发现
<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">="#"</span> <span class="attr">rel</span><span class="kwrd">="you me it"</span><span class="kwrd">&gt;</span>
评论
<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">="#"</span> <span class="attr">rel</span><span class="kwrd">="me"</span><span class="kwrd">&gt;</span>
小组
<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">="#"</span><span class="kwrd">&gt;</span>
译消息
<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">="#"</span><span class="kwrd">&gt;</span>
翻译
<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">="#"</span><span class="kwrd">&gt;</span>
自己
<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">li</span> <span class="attr">id</span><span class="kwrd">="endItem"</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">="#"</span><span class="kwrd">&gt;</span>
帮助
<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">li</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">ul</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">body</span><span class="kwrd">&gt;</span></pre>
<style type="text/css">.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
</style>

<p><br><strong>CSS代码：</strong></p><pre class="csharpcode"><span class="rem">/*元素选择器*/</span>
body{color:#000000;font-size:13px}
<span class="rem">/*后代选择器*/</span>
body h2{
    color:red;
    font-size:32px;
}
<span class="rem">/*类选择器*/</span>
.headContent{
    layout-flow: horizontal;
    PADDING: 6px 0px 0px 1px;
    MARGIN: 4px 0px 3px 5px; 
    
}
<span class="rem">/*组合选择器：类选择器与后代选择器的结合使用*/</span>
.headContent ul{
    font-size:16px;
    list-style-type:none;
}
.headContent li{
    <span class="kwrd">float</span>:left;
    margin:0px 0px 4px 4px;
    padding:10px;
    background-color:#c5c5c5;
}
<span class="rem">/*伪类*/</span>
a{
    TEXT-DECORATION: none;
}
a:link{
    color:blue;
}
a:visited{
    color:green;
    font-size:85%;
}
a:hover{
    background-color:yellow;
    TEXT-DECORATION: underline;
}
<span class="rem">/*ID选择器*/</span>
#endItem{
    font-size:20px;
    font-weight:bold;
}
#firstItem{
    font-size:24px:
    background-color:write;
}
<span class="rem">/*子选择器*/</span>
#endItem&gt;a{
    cursor : help;
}
<span class="rem">/*相邻选择器*/</span>
h2+hr{
    border-style :dotted;
}
<span class="rem">/*属性选择器:找属性rel等于me的a元素*/</span>
a[rel=<span class="str">"me"</span>]{
    cursor : wait; 
}
<span class="rem">/*属性选择器:找属性rel包含it的a元素*/</span>
a[rel~=<span class="str">"it"</span>]{
    cursor :crosshair;
}</pre><pre class="csharpcode">&nbsp;</pre><pre class="csharpcode">示例代码下载：<a href="http://www.blogjava.net/Files/ponzmd/%E7%B2%BE%E9%80%9ACSS.rar">CssSelertor.rar</a></pre>
<style type="text/css">.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
</style><img src ="http://www.blogjava.net/ponzmd/aggbug/168369.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-12-17 23:37 <a href="http://www.blogjava.net/ponzmd/archive/2007/12/17/168369.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>我的Blog设置——实记THREE</title><link>http://www.blogjava.net/ponzmd/archive/2007/09/05/142778.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Tue, 04 Sep 2007 16:25:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/09/05/142778.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/142778.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/09/05/142778.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/142778.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/142778.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 我的Blog设置——实记THREE：公布我的Blog设置代码，方便有需要的朋友。&nbsp;&nbsp;<a href='http://www.blogjava.net/ponzmd/archive/2007/09/05/142778.html'>阅读全文</a><img src ="http://www.blogjava.net/ponzmd/aggbug/142778.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-09-05 00:25 <a href="http://www.blogjava.net/ponzmd/archive/2007/09/05/142778.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>我的Blog设置——实记TWO</title><link>http://www.blogjava.net/ponzmd/archive/2007/09/04/142490.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Mon, 03 Sep 2007 19:34:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/09/04/142490.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/142490.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/09/04/142490.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/142490.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/142490.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 我的Blog设置——实记TWO：终于算是告一个段落了，先这样；等需求变化的时候，再来拥抱变化吧！&nbsp;&nbsp;<a href='http://www.blogjava.net/ponzmd/archive/2007/09/04/142490.html'>阅读全文</a><img src ="http://www.blogjava.net/ponzmd/aggbug/142490.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-09-04 03:34 <a href="http://www.blogjava.net/ponzmd/archive/2007/09/04/142490.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>我的Blog设置——实记ONE</title><link>http://www.blogjava.net/ponzmd/archive/2007/09/03/142475.html</link><dc:creator>彭俊</dc:creator><author>彭俊</author><pubDate>Mon, 03 Sep 2007 15:51:00 GMT</pubDate><guid>http://www.blogjava.net/ponzmd/archive/2007/09/03/142475.html</guid><wfw:comment>http://www.blogjava.net/ponzmd/comments/142475.html</wfw:comment><comments>http://www.blogjava.net/ponzmd/archive/2007/09/03/142475.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/ponzmd/comments/commentRss/142475.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ponzmd/services/trackbacks/142475.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 我的Blog设置——实记ONE：主要记录了我Blog设置的进度和设想，无它。&nbsp;&nbsp;<a href='http://www.blogjava.net/ponzmd/archive/2007/09/03/142475.html'>阅读全文</a><img src ="http://www.blogjava.net/ponzmd/aggbug/142475.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ponzmd/" target="_blank">彭俊</a> 2007-09-03 23:51 <a href="http://www.blogjava.net/ponzmd/archive/2007/09/03/142475.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>