﻿<?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-愚人博客-随笔分类-Xhtml/css</title><link>http://www.blogjava.net/imfisher/category/25225.html</link><description /><language>zh-cn</language><lastBuildDate>Fri, 09 Nov 2007 07:47:45 GMT</lastBuildDate><pubDate>Fri, 09 Nov 2007 07:47:45 GMT</pubDate><ttl>60</ttl><item><title>CSS自动换行</title><link>http://www.blogjava.net/imfisher/archive/2007/11/07/158805.html</link><dc:creator>愚人</dc:creator><author>愚人</author><pubDate>Wed, 07 Nov 2007 05:57:00 GMT</pubDate><guid>http://www.blogjava.net/imfisher/archive/2007/11/07/158805.html</guid><wfw:comment>http://www.blogjava.net/imfisher/comments/158805.html</wfw:comment><comments>http://www.blogjava.net/imfisher/archive/2007/11/07/158805.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/imfisher/comments/commentRss/158805.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/imfisher/services/trackbacks/158805.html</trackback:ping><description><![CDATA[<p>大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ </p>
<p><strong>对于div</strong> </p>
<p><strong>1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。</strong> </p>
<pre class="CodeSamp">#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}eg.&lt;div id="wrap"&gt;ddd1111111111111111111111111111111111&lt;/div&gt;</pre>
<p>效果：可以实现换行</p>
<p><strong>2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！</strong> </p>
<pre class="CodeSamp">#wrap{white-space:normal; width:200px; overflow:auto;}或者#wrap{word-break:break-all;width:200px; overflow:auto; }eg.&lt;div id="wrap"&gt;ddd1111111111111111111111111111111111111111&lt;/div&gt;</pre>
<p>效果：容器正常，内容隐藏</p>
<p><strong>对于table</strong> </p>
<p><strong>1. (IE浏览器)使用样式table-layout:fixed；</strong> <br />
eg. </p>
<pre class="CodeSamp">&lt;style&gt;.tb{table-layout:fixed}&lt;/style&gt;&lt;table class="tbl" width="80"&gt;&lt;tr&gt;&lt;td&gt;abcdefghigklmnopqrstuvwxyz 1234567890&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</pre>
<p>效果：可以换行</p>
<p><strong>2.(IE浏览器)使用样式table-layout:fixed与nowrap</strong> <br />
eg. </p>
<pre class="CodeSamp">&lt;style&gt;.tb {table-layout:fixed}&lt;/style&gt;&lt;table class="tb" width="80"&gt;&lt;tr&gt;&lt;td nowrap&gt;abcdefghigklmnopqrstuvwxyz 1234567890&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</pre>
<p>效果：可以换行</p>
<p><strong>3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap</strong> </p>
<pre class="CodeSamp">&lt;style&gt;.tb{table-layout:fixed}&lt;/style&gt;&lt;table class="tb" width=80&gt;&lt;tr&gt;&lt;td width=25% nowrap&gt;abcdefghigklmnopqrstuvwxyz 1234567890&lt;/td&gt;&lt;td nowrap&gt;abcdefghigklmnopqrstuvwxyz 1234567890&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</pre>
<p>效果：两个td均正常换行</p>
<p><strong>3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div</strong> <br />
eg. </p>
<pre class="CodeSamp">&lt;style&gt;.tb {table-layout:fixed}.td {overflow:hidden;}&lt;/style&gt;&lt;table class=tb width=80&gt;&lt;tr&gt;&lt;td width=25% class=td nowrap&gt;&lt;div&gt;abcdefghigklmnopqrstuvwxyz 1234567890&lt;/div&gt;&lt;/td&gt;&lt;td class=td nowrap&gt;&lt;div&gt;abcdefghigklmnopqrstuvwxyz 1234567890&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</pre>
<p>这里单元格宽度一定要用百分比定义</p>
效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）
<img src ="http://www.blogjava.net/imfisher/aggbug/158805.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/imfisher/" target="_blank">愚人</a> 2007-11-07 13:57 <a href="http://www.blogjava.net/imfisher/archive/2007/11/07/158805.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>HTML 中 SELECT 选项分组</title><link>http://www.blogjava.net/imfisher/archive/2007/10/09/151346.html</link><dc:creator>愚人</dc:creator><author>愚人</author><pubDate>Tue, 09 Oct 2007 04:54:00 GMT</pubDate><guid>http://www.blogjava.net/imfisher/archive/2007/10/09/151346.html</guid><wfw:comment>http://www.blogjava.net/imfisher/comments/151346.html</wfw:comment><comments>http://www.blogjava.net/imfisher/archive/2007/10/09/151346.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/imfisher/comments/commentRss/151346.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/imfisher/services/trackbacks/151346.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: &nbsp;&nbsp;<a href='http://www.blogjava.net/imfisher/archive/2007/10/09/151346.html'>阅读全文</a><img src ="http://www.blogjava.net/imfisher/aggbug/151346.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/imfisher/" target="_blank">愚人</a> 2007-10-09 12:54 <a href="http://www.blogjava.net/imfisher/archive/2007/10/09/151346.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>快速保存网页中所有图片的方法</title><link>http://www.blogjava.net/imfisher/archive/2007/10/09/151310.html</link><dc:creator>愚人</dc:creator><author>愚人</author><pubDate>Tue, 09 Oct 2007 03:25:00 GMT</pubDate><guid>http://www.blogjava.net/imfisher/archive/2007/10/09/151310.html</guid><wfw:comment>http://www.blogjava.net/imfisher/comments/151310.html</wfw:comment><comments>http://www.blogjava.net/imfisher/archive/2007/10/09/151310.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/imfisher/comments/commentRss/151310.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/imfisher/services/trackbacks/151310.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: &nbsp;&nbsp;<a href='http://www.blogjava.net/imfisher/archive/2007/10/09/151310.html'>阅读全文</a><img src ="http://www.blogjava.net/imfisher/aggbug/151310.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/imfisher/" target="_blank">愚人</a> 2007-10-09 11:25 <a href="http://www.blogjava.net/imfisher/archive/2007/10/09/151310.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>CSS的expression</title><link>http://www.blogjava.net/imfisher/archive/2007/09/21/146975.html</link><dc:creator>愚人</dc:creator><author>愚人</author><pubDate>Fri, 21 Sep 2007 01:40:00 GMT</pubDate><guid>http://www.blogjava.net/imfisher/archive/2007/09/21/146975.html</guid><wfw:comment>http://www.blogjava.net/imfisher/comments/146975.html</wfw:comment><comments>http://www.blogjava.net/imfisher/archive/2007/09/21/146975.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/imfisher/comments/commentRss/146975.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/imfisher/services/trackbacks/146975.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 经常会遇到一个问题——图片自适应，以前的解决方法主要是利用js来实现，其实也可以试试css的expression功能&nbsp;&nbsp;<a href='http://www.blogjava.net/imfisher/archive/2007/09/21/146975.html'>阅读全文</a><img src ="http://www.blogjava.net/imfisher/aggbug/146975.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/imfisher/" target="_blank">愚人</a> 2007-09-21 09:40 <a href="http://www.blogjava.net/imfisher/archive/2007/09/21/146975.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>制作1px表格边框的十种方法</title><link>http://www.blogjava.net/imfisher/archive/2007/09/17/145841.html</link><dc:creator>愚人</dc:creator><author>愚人</author><pubDate>Mon, 17 Sep 2007 06:33:00 GMT</pubDate><guid>http://www.blogjava.net/imfisher/archive/2007/09/17/145841.html</guid><wfw:comment>http://www.blogjava.net/imfisher/comments/145841.html</wfw:comment><comments>http://www.blogjava.net/imfisher/archive/2007/09/17/145841.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/imfisher/comments/commentRss/145841.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/imfisher/services/trackbacks/145841.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 经常会用到表格来显示数据，需要1px的表格，转了一篇文章，可以借鉴一下～&nbsp;&nbsp;<a href='http://www.blogjava.net/imfisher/archive/2007/09/17/145841.html'>阅读全文</a><img src ="http://www.blogjava.net/imfisher/aggbug/145841.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/imfisher/" target="_blank">愚人</a> 2007-09-17 14:33 <a href="http://www.blogjava.net/imfisher/archive/2007/09/17/145841.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>[转]需要了解的CSS优先级特性</title><link>http://www.blogjava.net/imfisher/archive/2007/09/15/145381.html</link><dc:creator>愚人</dc:creator><author>愚人</author><pubDate>Sat, 15 Sep 2007 08:10:00 GMT</pubDate><guid>http://www.blogjava.net/imfisher/archive/2007/09/15/145381.html</guid><wfw:comment>http://www.blogjava.net/imfisher/comments/145381.html</wfw:comment><comments>http://www.blogjava.net/imfisher/archive/2007/09/15/145381.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/imfisher/comments/commentRss/145381.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/imfisher/services/trackbacks/145381.html</trackback:ping><description><![CDATA[<p>原文：<a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" target="_blank">CSS Specificity: Things You Should Know</a></p>
<p>如果页面制作的时候遇到定义的CSS不起作用，你可能遇到了CSS优先级的问题。CSS优先级在CSS里算是比较难懂的部分，不同权重的CSS选择器有可能就是你出错的原因，所以作为页面开发人员必须了解CSS优先级特性。</p>
<p><strong>CSS优先级特性概述：</strong></p>
<p>1. 通过优先级计算，让浏览器先解析哪条CSS规则。<br />
2. 优先级特性经常是你定义的CSS规则不起作用的原因，虽然你认为起了作用，然而却不是。<br />
3. 每个选择器都有它的优先级层次。<br />
4. 如果两个规则同时作用于一个元素，优先级高的获胜。<br />
5.优先级特性可以分为四类：inline styles, IDs, classes+attributes and elements.<br />
6.英文好的可以看下这两篇文章， <a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html"><strong><font color="#0040b6">CSS Specificity Wars</font></strong></a>和<a href="http://iamacamera.org/default.aspx?id=95"><strong><font color="#0040b6">CSS Specificity for Poker Players</font></strong></a><br />
7.如果选择器有两个等级相同的值，后面的值会覆盖前面的值。<br />
8.如果选择器有等级不同的值，以等级高的算，比如!important。<br />
9.拥有更多优先特性选择器的规则更具有优先特性。<br />
10.后面的规则肯定会覆盖前面相同的规则。<br />
11.内嵌的CSS规则优先级特性最高。<br />
12.CSS文件里，ID的优先级特性最高。<br />
13.想要增加优先级，可以使用ID。<br />
14.class比element级别高。<br />
15.选择器分为四个级别，计算方式 0,0,0,0。<br />
16.推荐一个CSS优先级计算器，<a href="http://www.rebelinblue.com/specificity.php"><strong><font color="#0040b6">CSS Specificity Calculator</font></strong></a>.。</p>
<p><strong>什么是优先级特性</strong></p>
<p>优先级计算是为了决定浏览器解析哪条规则。&#8220;优先级特性的权重关系CSS的显示。&#8221;<a href="http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html"><strong><font color="#0040b6">Understanding Specificity</font></strong></a>&nbsp;（明白优先级特性）。</p>
<p>选择器的优先级特性决定了同一个元素多条规则下哪条规则实施。<a href="http://juicystudio.com/article/selector-specificity.php"><strong><font color="#0040b6">Selector Specificity</font></strong></a> （选择器优先级）。</p>
<p>每个选择器都有优先级，两个选择器作用与同一个元素，优先级高的获胜。</p>
<p>CSS优先级级别：</p>
<p>1<strong>. Inline styles</strong>&nbsp; 内嵌页面的CSS样式，比如&lt;h1 style=&#8221;color:#000&#8243;&gt;&lt;/h1&gt;</p>
<p>2.<strong>IDs</strong>&nbsp; 比如#myid</p>
<p>3.<strong>Classes, attributes and pseudo-classes</strong> 比如 .classes, [attributes]:hover, :focus</p>
<p>4.<strong>Elements and pseudo-elements</strong> 比如 div,p,h1,包括:before和:after</p>
<p><strong>怎样测量优先级？</strong></p>
<p>内嵌的为1000，ID为100，<strong>Classes, attributes and pseudo-classes</strong>为10，<strong>Elements and pseudo-elements</strong> 为1。</p>
<p><code>body #content .data img:hover 这里的特性值为 0,1,2,2</code></p>
<p><code>下面这张星球大战的图片也许能帮助你记忆：</code></p>
<p><a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html"><img title="CSS Specificity Wars" height="386" alt="CSS Specificity Wars" src="http://www.smashingmagazine.com/images/css-specificity/specificity-wars.jpg" width="507" border="0" /><br />
</a></p>
<p><code><strong>来测试下吧</strong></code></p>
<p><code></p>
<p>
<table class="shortcuts" cellspacing="0">
    <tbody>
        <tr>
            <td class="num">1</td>
            <td>* { }</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="num">3</td>
            <td>li:first-line { }</td>
            <td>2 (one element, one pseudo-element)</td>
        </tr>
        <tr>
            <td class="num">5</td>
            <td>ul ol+li { }</td>
            <td>3 (three elements)</td>
        </tr>
        <tr>
            <td class="num">7</td>
            <td>ul ol li.red { }</td>
            <td>13 (one class, three elements)</td>
        </tr>
        <tr>
            <td class="num">9</td>
            <td>style=&#8221;&#8221;</td>
            <td>1000 (one inline styling)</td>
        </tr>
        <tr>
            <td class="num">11</td>
            <td>div p { }</td>
            <td>2 (two HTML selectors)</td>
        </tr>
        <tr>
            <td class="num">13</td>
            <td>div p.sith { }</td>
            <td>12 (two HTML selectors and a class selector)</td>
        </tr>
        <tr>
            <td>15</td>
            <td>body #darkside .sith p { }</td>
            <td>112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)</td>
        </tr>
    </tbody>
</table>
</p>
<p><strong>实际经验：</strong></p>
<p>1. 使用LVHA定义链接，即link-visited-hover-active，参考[<a href="http://meyerweb.com/eric/css/link-specificity.html"><strong><font color="#0040b6">Link Specificity</font></strong></a>]<br />
2. 如果不是为了兼容浏览器，最好不要使用 !important<br />
3. 使用ID让特性更具体，比如a.high写成 ul#blog li a.high</p>
<p><strong>CSS工具与资 </strong>英文好的去看下</p>
<p><a href="http://iamacamera.org/default.aspx?id=95"><strong><font color="#0040b6">CSS Specificity for Poker Players</font></strong></a><br />
<a href="http://www.rebelinblue.com/specificity.php"><strong><font color="#0040b6">CSS specificity calculator</font></strong></a><br />
<a href="http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html"><strong><font color="#0040b6">Understanding Specificity Tutorial</font></strong></a><br />
<a href="http://www.westciv.com/style_master/academy/css_tutorial/advanced/cascade_inheritance.html#specificity"><strong><font color="#0040b6">Cascade Inheritance: Specificity</font></strong></a><br />
<a href="http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/"><strong><font color="#0040b6">CSS 2.1 Selectors Explained</font></strong></a><br />
<a href="http://www.brunildo.org/test/IEASpec.html"><strong><font color="#0040b6">CSS Specificity Bugs in IE</font></strong></a><br />
<a href="http://www.htmlhelp.com/reference/css/structure.html"><strong><font color="#0040b6">CSS Structure and Rules</font></strong></a><br />
<a href="http://www.htmldog.com/guides/cssadvanced/specificity/"><strong><font color="#0040b6">Specificity</font></strong></a></p>
<p></code></p>
<img src ="http://www.blogjava.net/imfisher/aggbug/145381.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/imfisher/" target="_blank">愚人</a> 2007-09-15 16:10 <a href="http://www.blogjava.net/imfisher/archive/2007/09/15/145381.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>