﻿<?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-业精于勤荒于嬉！-随笔分类-Css</title><link>http://www.blogjava.net/luofeng225/category/38598.html</link><description>生于忧患，死于安乐。</description><language>zh-cn</language><lastBuildDate>Sun, 29 Mar 2009 09:24:10 GMT</lastBuildDate><pubDate>Sun, 29 Mar 2009 09:24:10 GMT</pubDate><ttl>60</ttl><item><title>最常用的选择器</title><link>http://www.blogjava.net/luofeng225/archive/2009/03/28/262596.html</link><dc:creator>luofeng225</dc:creator><author>luofeng225</author><pubDate>Sat, 28 Mar 2009 06:17:00 GMT</pubDate><guid>http://www.blogjava.net/luofeng225/archive/2009/03/28/262596.html</guid><wfw:comment>http://www.blogjava.net/luofeng225/comments/262596.html</wfw:comment><comments>http://www.blogjava.net/luofeng225/archive/2009/03/28/262596.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/luofeng225/comments/commentRss/262596.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/luofeng225/services/trackbacks/262596.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 标签选择器，id选择器，类选择器，群组选择器，派生选择器&nbsp;&nbsp;<a href='http://www.blogjava.net/luofeng225/archive/2009/03/28/262596.html'>阅读全文</a><img src ="http://www.blogjava.net/luofeng225/aggbug/262596.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/luofeng225/" target="_blank">luofeng225</a> 2009-03-28 14:17 <a href="http://www.blogjava.net/luofeng225/archive/2009/03/28/262596.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Css 优先级</title><link>http://www.blogjava.net/luofeng225/archive/2009/03/28/262594.html</link><dc:creator>luofeng225</dc:creator><author>luofeng225</author><pubDate>Sat, 28 Mar 2009 06:13:00 GMT</pubDate><guid>http://www.blogjava.net/luofeng225/archive/2009/03/28/262594.html</guid><wfw:comment>http://www.blogjava.net/luofeng225/comments/262594.html</wfw:comment><comments>http://www.blogjava.net/luofeng225/archive/2009/03/28/262594.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/luofeng225/comments/commentRss/262594.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/luofeng225/services/trackbacks/262594.html</trackback:ping><description><![CDATA[<p>关键字: css selector</p>
<p>CSS样式定义多了，常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式。 </p>
<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; 浏览器定义的样式 </p>
<p>2. <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 style="color:green"&gt;&nbsp; 优先选择style=""设定的样式。 </p>
<p>例子： <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>
<p>3.CSS样式的层叠原则——谁离我近，谁说了算。 <br />
当权重一样时，会采用&#8220;层叠原则&#8221; 后定义的会被应用。 <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>
<p><br />
4.CSS样式的特殊标记——谁有特权，谁说了算。 <br />
如果有人看不顺眼，非得要自己说了算，那可以搞点特权，如下即可 <br />
p {color:blue !important;} <br />
加上!important;可将自己权重设为最高。<br />
http://zjq-blog.javaeye.com/blog/159469</p>
<img src ="http://www.blogjava.net/luofeng225/aggbug/262594.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/luofeng225/" target="_blank">luofeng225</a> 2009-03-28 14:13 <a href="http://www.blogjava.net/luofeng225/archive/2009/03/28/262594.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>absolute与relative</title><link>http://www.blogjava.net/luofeng225/archive/2009/03/28/262590.html</link><dc:creator>luofeng225</dc:creator><author>luofeng225</author><pubDate>Sat, 28 Mar 2009 06:04:00 GMT</pubDate><guid>http://www.blogjava.net/luofeng225/archive/2009/03/28/262590.html</guid><wfw:comment>http://www.blogjava.net/luofeng225/comments/262590.html</wfw:comment><comments>http://www.blogjava.net/luofeng225/archive/2009/03/28/262590.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/luofeng225/comments/commentRss/262590.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/luofeng225/services/trackbacks/262590.html</trackback:ping><description><![CDATA[<p><span style="font-size: x-small; font-family: courier new,courier">作者小毅的博客：</span><a href="http://andymao.com/"><span style="font-size: x-small; font-family: courier new,courier">http://andymao.com/</span></a><span style="font-size: x-small; font-family: courier new,courier">&nbsp;<br />
<br />
很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-size: x-small; font-family: courier new,courier"><strong>Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，</strong>他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。</span></p>
<p><span style="font-size: x-small; font-family: courier new,courier"><img alt="" src="http://luofeng225.javaeye.com/articleimg/2006/11/4249/absolute.gif" /></span></p>
<p><span style="font-size: x-small; font-family: courier new,courier">一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-size: x-small; font-family: courier new,courier"><strong>Relative，CSS中的写法是：position:relative;</strong>&nbsp; 他的意思是<span style="color: #cc0000">相对</span>定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。</span></p>
<p><span style="font-size: x-small; font-family: courier new,courier"><img alt="" src="http://luofeng225.javaeye.com/articleimg/2006/11/4249/relative.gif" /></span></p>
<p><span style="font-size: x-small; font-family: courier new,courier">有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。</span></p>
<p><a href="http://www.blueidea.com/tech/web/2006/4249.asp">http://www.blueidea.com/tech/web/2006/4249.asp</a></p>
<img src ="http://www.blogjava.net/luofeng225/aggbug/262590.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/luofeng225/" target="_blank">luofeng225</a> 2009-03-28 14:04 <a href="http://www.blogjava.net/luofeng225/archive/2009/03/28/262590.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>