﻿<?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-Rising Sun -随笔分类-css</title><link>http://www.blogjava.net/brock/category/18837.html</link><description /><language>zh-cn</language><lastBuildDate>Thu, 24 Oct 2013 12:58:06 GMT</lastBuildDate><pubDate>Thu, 24 Oct 2013 12:58:06 GMT</pubDate><ttl>60</ttl><item><title>ext grid 删除最后一行数据后还是显示</title><link>http://www.blogjava.net/brock/archive/2013/10/24/405587.html</link><dc:creator>brock</dc:creator><author>brock</author><pubDate>Thu, 24 Oct 2013 02:40:00 GMT</pubDate><guid>http://www.blogjava.net/brock/archive/2013/10/24/405587.html</guid><wfw:comment>http://www.blogjava.net/brock/comments/405587.html</wfw:comment><comments>http://www.blogjava.net/brock/archive/2013/10/24/405587.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/brock/comments/commentRss/405587.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/brock/services/trackbacks/405587.html</trackback:ping><description><![CDATA[<span style="color: #8197b0; font-family: 微软雅黑, 黑体; font-size: 18px; line-height: 20px; background-color: #000000;">ext&nbsp;grid&nbsp;删除最后一行数据后还是显示</span><p style="margin-top: 0px; margin-right: 0px; margin-left: 0px; padding: 0px; border: 0px; list-style: none; word-wrap: normal; word-break: normal; color: #c0bdbb; font-family: simsun; background-color: #000000;">grid删除最后一行数据后，store reload ,因为数据库中已经没有数据了，所以返回null .</p><p style="margin-top: 0px; margin-right: 0px; margin-left: 0px; padding: 0px; border: 0px; list-style: none; word-wrap: normal; word-break: normal; color: #c0bdbb; font-family: simsun; background-color: #000000;">但是ext不认这个东西，所以在service中进行判断。如果数据为null ，则返回</p><p style="margin-top: 0px; margin-right: 0px; margin-left: 0px; padding: 0px; border: 0px; list-style: none; word-wrap: normal; word-break: normal; color: #c0bdbb; font-family: simsun; background-color: #000000;">"{total:0,gridData:[]}" ;</p><p style="margin-top: 0px; margin-right: 0px; margin-left: 0px; padding: 0px; border: 0px; list-style: none; word-wrap: normal; word-break: normal; color: #c0bdbb; font-family: simsun; background-color: #000000;">重新编译，运行后，删除最后一行数据，就会看不到了。</p><img src ="http://www.blogjava.net/brock/aggbug/405587.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/brock/" target="_blank">brock</a> 2013-10-24 10:40 <a href="http://www.blogjava.net/brock/archive/2013/10/24/405587.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Google JavaScript 编码规范指南</title><link>http://www.blogjava.net/brock/archive/2013/03/11/396284.html</link><dc:creator>brock</dc:creator><author>brock</author><pubDate>Mon, 11 Mar 2013 07:24:00 GMT</pubDate><guid>http://www.blogjava.net/brock/archive/2013/03/11/396284.html</guid><wfw:comment>http://www.blogjava.net/brock/comments/396284.html</wfw:comment><comments>http://www.blogjava.net/brock/archive/2013/03/11/396284.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/brock/comments/commentRss/396284.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/brock/services/trackbacks/396284.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: Google JavaScript 编码规范指南修订版: 2.9Aaron WhyteBob JervisDan PupiusEric ArvidssonFritz SchneiderRobby Walker每个条目都有概述信息, 点击&nbsp;&#9661;&nbsp;查看详细的内容. 你也可以点击下面的按钮&#9661;&nbsp;展开全部目录JavaScript 语言规范变量&nbsp;常...&nbsp;&nbsp;<a href='http://www.blogjava.net/brock/archive/2013/03/11/396284.html'>阅读全文</a><img src ="http://www.blogjava.net/brock/aggbug/396284.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/brock/" target="_blank">brock</a> 2013-03-11 15:24 <a href="http://www.blogjava.net/brock/archive/2013/03/11/396284.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>css  布局</title><link>http://www.blogjava.net/brock/archive/2007/06/14/124242.html</link><dc:creator>brock</dc:creator><author>brock</author><pubDate>Thu, 14 Jun 2007 02:00:00 GMT</pubDate><guid>http://www.blogjava.net/brock/archive/2007/06/14/124242.html</guid><wfw:comment>http://www.blogjava.net/brock/comments/124242.html</wfw:comment><comments>http://www.blogjava.net/brock/archive/2007/06/14/124242.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/brock/comments/commentRss/124242.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/brock/services/trackbacks/124242.html</trackback:ping><description><![CDATA[<font face="Courier New">翻译自：In Search of the Holy Grail<br>原文：http://www.alistapart.com/articles/holygrail<br>这个翻译的页面版权归greengnn所有，转载请注明出处<br></font>第一步：创建一个结构<br><br>xhtml开始于header, footer, and container<br><code class=code>&lt;div id="header"&gt;&lt;/div&gt;<br><br>&lt;div id="container"&gt;&lt;/div&gt;<br><br>&lt;div id="footer"&gt;&lt;/div&gt;</code><br>CSS先定义container，给将要加入的sideleft，和sideright留下个位置<br><code class=code>#container {<br>&nbsp;padding-left: 200px; /* LC width */<br>&nbsp;padding-right: 150px; /* RC width */<br>}</code><br>我们的布局现在看起来是这样的<br><br>
<div style="OVERFLOW-X: auto; WIDTH: 100%"><a class=thickbox title=uploads/200602/13_074820_diagram_01.gif href="http://www.jluvip.com/blog/uploads/200602/13_074820_diagram_01.gif"><img class=imgtag alt=uploads/200602/13_074820_diagram_01.gif src="http://www.jluvip.com/blog/uploads/200602/13_074820_diagram_01.gif"></a></div>
<br><br>图1——创建框架<br><br>第二步：增加内容元素<br><br>在第一步基础上增加内容元素<code class=code>&lt;div id="header"&gt;&lt;/div&gt;<br><br>&lt;div id="container"&gt;<br>&nbsp;&lt;div id="center" class="column"&gt;&lt;/div&gt;<br>&nbsp;&lt;div id="left" class="column"&gt;&lt;/div&gt;<br>&nbsp;&lt;div id="right" class="column"&gt;&lt;/div&gt;<br>&lt;/div&gt;<br><br>&lt;div id="footer"&gt;&lt;/div&gt;</code><br>然后分别定义widths和float 让元素排列在一条线上，还有清除footer的浮动对齐<br><code class=code>#container .column {<br>&nbsp;float: left;<br>}<br>#center {<br>&nbsp;width: 100%;<br>}<br>#left {<br>&nbsp;width: 200px; /* LC width */<br>}<br>#right {<br>&nbsp;width: 150px; /* RC width */<br>}<br>#footer {<br>&nbsp;clear: both;<br>}</code><br>这里给center元素定义了100% width，让它占满montainer的可用空间，现在的布局变成了这样<br><br>
<div style="OVERFLOW-X: auto; WIDTH: 100%"><a class=thickbox title=uploads/200602/13_074922_diagram_02.gif href="http://www.jluvip.com/blog/uploads/200602/13_074922_diagram_02.gif"><img class=imgtag alt=uploads/200602/13_074922_diagram_02.gif src="http://www.jluvip.com/blog/uploads/200602/13_074922_diagram_02.gif"></a></div>
<br><br>图2：增加内容元素<br><br>第三步：把left放到正确的位置<br><br>要把left放到正确的位置，我们分两步<br><br>1.让left和center在同一水平线<code class=code>#left {<br>&nbsp;width: 200px; /* LC width */<br>&nbsp;margin-left: -100%; <br>}</code><br>看看效果<br><br>
<div style="OVERFLOW-X: auto; WIDTH: 100%"><a class=thickbox title=uploads/200602/13_075000_diagram_03.gif href="http://www.jluvip.com/blog/uploads/200602/13_075000_diagram_03.gif"><img class=imgtag alt=uploads/200602/13_075000_diagram_03.gif src="http://www.jluvip.com/blog/uploads/200602/13_075000_diagram_03.gif"></a></div>
<br><br>图3——left移动完成一半<br><br>2.用相对定位，把left继续移动到正确的位置<code class=code>#container .columns {<br>&nbsp;float: left;<br>&nbsp;position: relative;<br>}<br>#left {<br>&nbsp;width: 200px; /* LC width */<br>&nbsp;margin-left: -100%; <br>&nbsp;right: 200px; /* LC width */<br>}</code><br>上一步，left还需要左移200px，就可以了，所以就采用相对定位，将他再向左推200px,就达到了想要的效果。让left距离他右边元素center 200px后，行了，left终于到自己位置上了。<br><br>
<div style="OVERFLOW-X: auto; WIDTH: 100%"><a class=thickbox title=uploads/200602/13_075037_diagram_04.gif href="http://www.jluvip.com/blog/uploads/200602/13_075037_diagram_04.gif"><img class=imgtag alt=uploads/200602/13_075037_diagram_04.gif src="http://www.jluvip.com/blog/uploads/200602/13_075037_diagram_04.gif"></a></div>
<br><br>图4——left到了自己的位置<br><br>第四步：让right也到自己的正确的位置上<br><br>从上图看，我们只需要把right推倒container的padding-right里面,看看怎么做<br><code class=code>#right {<br>&nbsp;width: 150px; /* RC width */<br>&nbsp;margin-right: -150px; /* RC width */<br>}</code><br>好了，现在元素们都正确归位了。<br><br>
<div style="OVERFLOW-X: auto; WIDTH: 100%"><a class=thickbox title=uploads/200602/13_075115_diagram_05.gif href="http://www.jluvip.com/blog/uploads/200602/13_075115_diagram_05.gif"><img class=imgtag alt=uploads/200602/13_075115_diagram_05.gif src="http://www.jluvip.com/blog/uploads/200602/13_075115_diagram_05.gif"></a></div>
<br><br>图5——right到了自己正确的位置<br><br>第五步：解决bug让布局更完美<br>如果浏览器类型变更，center就变得比left小了，完美的布局就被打破，我们给body 设置一个min-width<br>来解决这个问题，因为IE不支持他，所以不会有负面影响，调整如下<br><code class=code>body {<br>&nbsp;min-width: 550px; /* 2x LC width + RC width */<br>}</code><br>这时在IE6（完全打开的窗口）下，left元素距离左侧又太远了，再调整<br><code class=code>* html #left {<br>&nbsp;left: 150px; /* RC width */<br>}</code><br>这些大小调整是根据上面已经定义的宽度来的，你调整的时候也要根据自己的实际情况。<br><br>现在增加padding<br><br>内容文字贴着容器的边，相信你看得时候，不会很舒服，调整一下<br><code class=code>#left {<br>&nbsp;width: 180px; /* LC fullwidth - padding */<br>&nbsp;padding: 0 10px;<br>&nbsp;right: 200px; /* LC fullwidth */<br>&nbsp;margin-left: -100%;<br>}</code><br>当然不能只增加left就算完事，要给一系列元素都必须加上，也要调整增加padding，带来的新的bug，调整如下<br><code class=code>body {<br>&nbsp;min-width: 630px; /* 2x (LC fullwidth +<br>&nbsp;CC padding) + RC fullwidth */<br>}<br>#container {<br>&nbsp;padding-left: 200px; /* LC fullwidth */<br>&nbsp;padding-right: 190px; /* RC fullwidth + CC padding */<br>}<br>#container .column {<br>&nbsp;position: relative;<br>&nbsp;float: left;<br>}<br>#center {<br>&nbsp;padding: 10px 20px; /* CC padding */<br>&nbsp;width: 100%;<br>}<br>#left {<br>&nbsp;width: 180px; /* LC width */<br>&nbsp;padding: 0 10px; /* LC padding */<br>&nbsp;right: 240px; /* LC fullwidth + CC padding */<br>&nbsp;margin-left: -100%;<br>}<br>#right {<br>&nbsp;width: 130px; /* RC width */<br>&nbsp;padding: 0 10px; /* RC padding */<br>&nbsp;margin-right: -190px; /* RC fullwidth + CC padding */<br>}<br>#footer {<br>&nbsp;clear: both;<br>}<br><br>/*** IE Fix ***/<br>* html #left {<br>&nbsp;left: 150px; /* RC fullwidth */<br>}</code>header和footer的padding可以随意增加，这里就不提了，还有长度单位用em更具亲和力（em可以让用户使用浏览器来调整自己需要的字体大小）<br>但是不能混合使用，选择em和px的时候明智些,<a title=http://www.jluvip.com/works/css/layout_c3_1.html href="http://www.jluvip.com/works/css/layout_c3_1.html" target=_blank><u><font color=#0000ff>察看效果</font></u></a><br><br>元素等高问题<br>采用<a title=http://www.positioniseverything.net/articles/onetruelayout/equalheight href="http://www.positioniseverything.net/articles/onetruelayout/equalheight" target=_blank><u><font color=#0000ff>http://www.positioniseverything.net/articles/onetruelayout/equalheight</font></u></a><br>有人翻译过来的：<a title=http://www.blueidea.com/tech/web/2006/3210.asp href="http://www.blueidea.com/tech/web/2006/3210.asp" target=_blank><u><font color=#0000ff>http://www.blueidea.com/tech/web/2006/3210.asp</font></u></a><br>里提到的方法，就不具体解释了。<br><code class=code>#container {<br>&nbsp;overflow: hidden;<br>}<br>#container .column {<br>&nbsp;padding-bottom: 20010px; /* X + padding-bottom */<br>&nbsp;margin-bottom: -20000px; /* X */<br>}<br>#footer {<br>&nbsp;position: relative;<br>}</code><br>再解决opera 8的bug，代码调整如下<br><code class=code>&lt;div id="footer-wrapper"&gt;<br>&nbsp;&lt;div id="footer"&gt;&lt;/div&gt;<br>&lt;/div&gt;</code><code class=code>* html body {<br>&nbsp;overflow: hidden;<br>}<br>* html #footer-wrapper {<br>&nbsp;float: left;<br>&nbsp;position: relative;<br>&nbsp;width: 100%;<br>&nbsp;padding-bottom: 10010px;<br>&nbsp;margin-bottom: -10000px;<br>&nbsp;background: #fff; /* Same as body <br>&nbsp;background */<br>}</code>
 <img src ="http://www.blogjava.net/brock/aggbug/124242.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/brock/" target="_blank">brock</a> 2007-06-14 10:00 <a href="http://www.blogjava.net/brock/archive/2007/06/14/124242.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>css一把</title><link>http://www.blogjava.net/brock/archive/2007/06/13/123921.html</link><dc:creator>brock</dc:creator><author>brock</author><pubDate>Wed, 13 Jun 2007 10:13:00 GMT</pubDate><guid>http://www.blogjava.net/brock/archive/2007/06/13/123921.html</guid><wfw:comment>http://www.blogjava.net/brock/comments/123921.html</wfw:comment><comments>http://www.blogjava.net/brock/archive/2007/06/13/123921.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/brock/comments/commentRss/123921.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/brock/services/trackbacks/123921.html</trackback:ping><description><![CDATA[&lt;style&gt;<br>body{<br>margin:0 auto; <br>}<br>#ddd{<br>margin:0 auto; <br>padding: 3px;<br>background:#00FFCC;<br>border:solid 1px;<br>height: 300px;<br>}<br>#ddd h4{<br>margin:0px;<br>background:#6666FF;<br>line-height:20px;<br><br>} <br>#ddd ul{<br>margin:0px;<br>padding: 3px;<br>list-style:none;<br>}<br>#ddd ul li {<br><br>float:left;<br>}<br><br>#ddd a:visited{<br>background:#999999 url(../Mcredits.gif);<br>}<br>#ddd a:link{<br>background:#999999 url(../credits.gif);<br>}<br>#ddd a:hover{<br>background:#ff0000;<br>}<br><br>#leftmenu<br>{<br>&nbsp;&nbsp;&nbsp; position: absolute;<br>&nbsp;&nbsp;&nbsp; left: 0px;<br>&nbsp;&nbsp;&nbsp; width: 400px;<br>&nbsp;&nbsp;&nbsp; height: auto;<br>&nbsp;&nbsp;&nbsp; background-color: WhiteSmoke;<br>&nbsp;&nbsp;&nbsp; padding-top: 0px;<br>}<br><br>#leftmenu h3<br>{<br>&nbsp;&nbsp;&nbsp; font-size: 11.5;<br>&nbsp;&nbsp;&nbsp; margin: 0px;<br>&nbsp;&nbsp;&nbsp; margin-top: 10px;<br>&nbsp;&nbsp;&nbsp; padding-bottom: 2px;<br>&nbsp;&nbsp;&nbsp; padding-left: 3px;<br>&nbsp;&nbsp;&nbsp; border-top: solid 1px Gainsboro;<br>&nbsp;&nbsp;&nbsp; padding-top: 3px;<br>}<br><br>#leftmenu ul<br>{<br>list-style:none;<br><br>&nbsp;&nbsp;&nbsp; margin: 0px;<br>&nbsp;&nbsp;&nbsp; padding-left: 5px;<br>&nbsp;&nbsp;&nbsp; margin-left: 5px;<br>&nbsp;&nbsp;&nbsp; margin-bottom: 10px;<br>&nbsp;&nbsp;&nbsp; font-size: 11.5;<br>}<br>#leftmenu ul li<br>{<br>margin:0px;<br>float:left;<br>}<br><br>#leftmenu a<br>{<br>&nbsp;&nbsp;&nbsp; padding: 1px;<br>&nbsp;&nbsp;&nbsp; text-decoration: none;<br>}<br><br>#leftmenu a:active, #leftmenu a:visited, #leftmenu a:link<br>{<br>}<br><br>#leftmenu a:hover<br>{<br>&nbsp;&nbsp;&nbsp; font-style: italic;<br>}<br><br><br>&lt;/style&gt;<br><img src ="http://www.blogjava.net/brock/aggbug/123921.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/brock/" target="_blank">brock</a> 2007-06-13 18:13 <a href="http://www.blogjava.net/brock/archive/2007/06/13/123921.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>常用CSS缩写语法总结</title><link>http://www.blogjava.net/brock/archive/2006/12/30/90969.html</link><dc:creator>brock</dc:creator><author>brock</author><pubDate>Sat, 30 Dec 2006 03:05:00 GMT</pubDate><guid>http://www.blogjava.net/brock/archive/2006/12/30/90969.html</guid><wfw:comment>http://www.blogjava.net/brock/comments/90969.html</wfw:comment><comments>http://www.blogjava.net/brock/archive/2006/12/30/90969.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.blogjava.net/brock/comments/commentRss/90969.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/brock/services/trackbacks/90969.html</trackback:ping><description><![CDATA[
		<p>使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：</p>
		<h4>颜色</h4>
		<p>16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：<br />#000000可以缩写为#000;#336699可以缩写为#369;</p>
		<h4>盒尺寸</h4>
		<p>通常有下面四种书写方法:</p>
		<ul>
				<li>property:value1; 表示所有边都是一个值value1； 
</li>
				<li>property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 
</li>
				<li>property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 
</li>
				<li>property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left </li>
		</ul>
		<p>方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：<br />margin:1em 0 2em 0.5em; </p>
		<h4>边框(border)</h4>
		<p>边框的属性如下：</p>
		<ul>
				<li>border-width:1px; 
</li>
				<li>border-style:solid; 
</li>
				<li>border-color:#000; </li>
		</ul>
		<p>可以缩写为一句：border:1px solid #000; </p>
		<p>语法是<span class="code"><strong><font face="Verdana" color="#60a179">border:width style color;</font></strong></span></p>
		<h4>背景(Backgrounds)</h4>
		<p>背景的属性如下：</p>
		<ul>
				<li>background-color:#f00; 
</li>
				<li>background-image:url(background.gif); 
</li>
				<li>background-repeat:no-repeat; 
</li>
				<li>background-attachment:fixed; 
</li>
				<li>background-position:0 0; </li>
		</ul>
		<p>可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; </p>
		<p>语法是<span class="code"><strong><font face="Verdana" color="#60a179">background:color image repeat attachment position;</font></strong></span></p>
		<p>你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：</p>
		<ul>
				<li>color: transparent 
</li>
				<li>image: none 
</li>
				<li>repeat: repeat 
</li>
				<li>attachment: scroll 
</li>
				<li>position: 0% 0% </li>
		</ul>
		<h4>字体(fonts)</h4>
		<p>字体的属性如下：</p>
		<ul>
				<li>font-style:italic; 
</li>
				<li>font-variant:small-caps; 
</li>
				<li>font-weight:bold; 
</li>
				<li>font-size:1em; 
</li>
				<li>line-height:140%; 
</li>
				<li>font-family:"Lucida Grande",sans-serif; </li>
		</ul>
		<p>可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;</p>
		<p>注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。</p>
		<h4>列表(lists)</h4>
		<p>取消默认的圆点和序号可以这样写list-style:none;,</p>
		<p>list的属性如下:</p>
		<ul>
				<li>list-style-type:square; 
</li>
				<li>list-style-position:inside; 
</li>
				<li>list-style-image:url(image.gif); </li>
		</ul>
		<p>可以缩写为一句：list-style:square inside url(image.gif);</p>
<img src ="http://www.blogjava.net/brock/aggbug/90969.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/brock/" target="_blank">brock</a> 2006-12-30 11:05 <a href="http://www.blogjava.net/brock/archive/2006/12/30/90969.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>CSS的十八般技巧</title><link>http://www.blogjava.net/brock/archive/2006/12/30/90968.html</link><dc:creator>brock</dc:creator><author>brock</author><pubDate>Sat, 30 Dec 2006 03:04:00 GMT</pubDate><guid>http://www.blogjava.net/brock/archive/2006/12/30/90968.html</guid><wfw:comment>http://www.blogjava.net/brock/comments/90968.html</wfw:comment><comments>http://www.blogjava.net/brock/archive/2006/12/30/90968.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/brock/comments/commentRss/90968.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/brock/services/trackbacks/90968.html</trackback:ping><description><![CDATA[
		<ul>
				<li>原文作者：Roger Johansson 
</li>
				<li>作者简介：住在瑞典哥德堡，1994年开始接触和参与web设计，456 Berea Street是他的住址，因此采用这个名字作为他的个人主页域名 
</li>
				<li>原文出处：<a href="http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_1/" target="new"><font color="#60a179">www.456bereastreet.com</font></a></li>
				<li>原文发表时间：2005年3月15日 
</li>
				<li>阿捷说明：此文原名"CSS tips and tricks"，有2篇，我将它们合并翻译在本文中。 </li>
		</ul>
		<img class="photo" alt="作者Roger Johansson照片" src="http://www.w3cn.org/article/translate/2005/images/rogerjohansson.jpg" />
		<p>最近,经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS，影响CSS的效率发挥。我来分析总结一下错误所在，帮助大家更加容易使用CSS。</p>
		<p>本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案，我愿意把这些与你分享，我会重点解释一些新手容易犯的错误(包括我自己也犯过的)，如果你已经是CSS高手，这些经验技巧可能已经都知道，如果你有更多的，希望可以帮我补充。</p>
		<h4>一.使用css缩写</h4>
		<p>使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《<a href="http://www.w3cn.org/article/tips/2005/103.html" target="new"><font color="#666666">常用css缩写语法总结</font></a>》，这里就不展开描述。</p>
		<h4>二.明确定义单位，除非值为0</h4>
		<p>忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。</p>
		<h4>三.区分大小写</h4>
		<p>当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。</p>
		<p>class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。</p>
		<h4>四.取消class和id前的元素限定</h4>
		<p>当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">div#content { /* declarations */ } <br />fieldset.details { /* declarations */ } </font>
				</strong>
		</span>
		<p>可以写成</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">#content { /* declarations */ } <br />.details { /* declarations */ } </font>
				</strong>
		</span>
		<p>这样可以节省一些字节。</p>
		<h4>五.默认值</h4>
		<p>通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">* { <br />margin:0; <br />padding:0; <br />} </font>
				</strong>
		</span>
		<h4>六.不需要重复定义可继承的值</h4>
		<p>CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。</p>
		<h4>七.最近优先原则</h4>
		<p>如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码</p>
		<span class="code">
				<p class="update">Update: Lorem ipsum dolor set</p>
		</span>
		<p>在CSS文件中，你已经定义了元素p，又定义了一个class"update"</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">p { <br />margin:1em 0; <br />font-size:1em; <br />color:#333; <br />} <br />.update { <br />font-weight:bold; <br />color:#600; <br />} <br /></font>
				</strong>
		</span>
		<p>这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。</p>
		<h4>八.多重class定义</h4>
		<p>一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">.one{width:200px;background:#666;}<br />.two{border:10px solid #F00;} </font>
				</strong>
		</span>
		<p>在页面代码中，我们可以这样调用</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">&lt;div class="one two"&gt;&lt;/div&gt;</font>
				</strong>
		</span>
		<p>这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。</p>
		<h4>九.使用子选择器(descendant selectors)</h4>
		<p>CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">&lt;div id="subnav"&gt; <br />&lt;ul&gt; <br />&lt;li class="subnavitem"&gt; &lt;a href="#" class="subnavitem"&gt;Item 1&lt;/a&gt;&lt;/li&gt;&gt; <br />&lt;li class="subnavitemselected"&gt; &lt;a href="#" class="subnavitemselected"&gt; Item 1&lt;/a&gt; &lt;/li&gt; <br />&lt;li class="subnavitem"&gt; &lt;a href="#" class="subnavitem"&gt; Item 1&lt;/a&gt; &lt;/li&gt;<br />&lt;/ul&gt; <br />&lt;/div&gt; </font>
				</strong>
		</span>
		<p>这段代码的CSS定义是：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">div#subnav ul { /* Some styling */ } <br />div#subnav ul li.subnavitem { /* Some styling */ } <br />div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } <br />div#subnav ul li.subnavitemselected { /* Some styling */ } <br />div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } </font>
				</strong>
		</span>
		<p>你可以用下面的方法替代上面的代码</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">&lt;ul id="subnav"&gt; <br />&lt;li&gt; &lt;a href="#"&gt; Item 1&lt;/a&gt; &lt;/li&gt; <br />&lt;li class="sel"&gt; &lt;a href="#"&gt; Item 1&lt;/a&gt; &lt;/li&gt; <br />&lt;li&gt; &lt;a href="#"&gt; Item 1&lt;/a&gt; &lt;/li&gt; <br />&lt;/ul&gt; </font>
				</strong>
		</span>
		<p>样式定义是：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">#subnav { /* Some styling */ } <br />#subnav li { /* Some styling */ } <br />#subnav a { /* Some styling */ } <br />#subnav .sel { /* Some styling */ } <br />#subnav .sel a { /* Some styling */ } </font>
				</strong>
		</span>
		<p>用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。</p>
		<h4>十.不需要给背景图片路径加引号</h4>
		<p>为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">background:url("images/***.gif") #333;</font>
				</strong>
		</span>
		<p>可以写为</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">background:url(images/***.gif) #333;</font>
				</strong>
		</span>
		<p>如果你加了引号，反而会引起一些浏览器的错误。</p>
		<h4>十一.组选择器(Group selectors)</h4>
		<p>当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。 </p>
		<p>
		</p>
		<p>例如：定义所有标题的字体、颜色和margin，你可以这样写：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">h1,h2,h3,h4,h5,h6 { <br />font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif; <br />color:#333; <br />margin:1em 0; <br />} </font>
				</strong>
		</span>
		<p>如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">h1 { font-size:2em; } <br />h2 { font-size:1.6em; } </font>
				</strong>
		</span>
		<h4>十二.用正确的顺序指定链接的样式</h4>
		<p>当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《<a href="http://www.meyerweb.com/eric/css/link-specificity.html" target="new"><font color="#60a179">Link Specificity</font></a>》。</p>
		<p>如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。</p>
		<h4>十三.清除浮动</h4>
		<p>一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。</p>
		<p>通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《<a href="http://www.positioniseverything.net/easyclearing.html" target="new"><font color="#60a179">How To Clear Floats Without Structural Markup</font></a>》(注：本站将尽快翻译此文)。</p>
		<p>上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《<a href="http://www.sitepoint.com/blog-post-view?id=238086" target="new"><font color="#60a179">Simple Clearing of Floats</font></a>》，又在《<a href="http://www.mezzoblue.com/archives/2005/03/03/clearance/" target="new"><font color="#60a179">Clearance</font></a>》和《<a href="http://annevankesteren.nl/archives/2005/03/clearing-floats" target="new"><font color="#60a179">Super simple clearing floats</font></a>》中被广泛讨论。</p>
		<p>上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《<a href="http://css.maxdesign.com.au/floatutorial/" target="new"><font color="#60a179">Floatutorial</font></a>》、《<a href="http://www.complexspiral.com/publications/containing-floats/" target="new"><font color="#60a179">Containing Floats</font></a>》和《<a href="http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating" target="new"><font color="#60a179">Float Layouts</font></a>》</p>
		<h4>十四.横向居中(centering)</h4>
		<p>这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：</p>
		<div id="wrap">
				<!-- 你的布局这里开始 -->
		</div>
		<p>你可以这样定义使它横向居中：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">#wrap { <br />width:760px; /* 修改为你的层的宽度 */ <br />margin:0 auto; <br />} </font>
				</strong>
		</span>
		<p>但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">body { <br />text-align:center; <br />} <br />#wrap { <br />width:760px; /* 修改为你的层的宽度 */ <br />margin:0 auto; <br />text-align:left; <br />} </font>
				</strong>
		</span>
		<p>第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。</p>
		<h4>十五.导入(Import)和隐藏CSS</h4>
		<p>因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">@import url("main.css"); </font>
				</strong>
		</span>
		<p>然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">@import "main.css"; </font>
				</strong>
		</span>
		<p>这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《<a href="http://centricle.com/ref/css/filters/" target="new"><font color="#60a179">centricle’s css filter chart</font></a>》</p>
		<h4>十六.针对IE的优化</h4>
		<p>有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。</p>
		<ul>
				<li>1.注释的方法 
<ul><li>(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):<br /><span class="code"><strong><font face="Verdana" color="#60a179">html&gt;body p { <br />/* 定义内容 */ <br />} </font></strong></span></li><li>(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) <br /><span class="code"><strong><font face="Verdana" color="#60a179">* html p { <br />/* declarations */ <br />} </font></strong></span></li><li>(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：<br /><span class="code"><strong><font face="Verdana" color="#60a179">/* \*/ <br />* html p { <br />declarations <br />} <br />/* */ </font></strong></span></li></ul></li>
				<li>2.条件注释(conditional comments)的方法 
<p>另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：</p><span class="code"><strong><font face="Verdana" color="#60a179">&lt;!--[if IE]&gt; <br />&lt;link rel="stylesheet" type="text/css" href="ie.css" /&gt; <br />&lt;![endif]--&gt; </font></strong></span></li>
		</ul>
		<h4>十七.调试技巧：层有多大？</h4>
		<p>当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。 </p>
		<p>另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。</p>
		<h4>十八.CSS代码书写样式</h4>
		<p>在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：</p>
		<span class="code">
				<strong>
						<font face="Verdana" color="#60a179">selector1, <br />selector2 { <br />property:value; <br />} </font>
				</strong>
		</span>
		<p>当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。</p>
		<p>我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。</p>
		<p>最后，关闭的大括号}单独写一行。</p>
		<p>空格和换行有助与阅读。</p>
<img src ="http://www.blogjava.net/brock/aggbug/90968.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/brock/" target="_blank">brock</a> 2006-12-30 11:04 <a href="http://www.blogjava.net/brock/archive/2006/12/30/90968.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>