Penner Blog

Sarah & Penner’s happy life ;)

常用CSS缩写语法总结[ZT]

星期五
6 24,2005

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:
颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

* property:value1; 表示所有边都是一个值value1;
* property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
* property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
* property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;
边框(border) (更多…)

星期五
6 24,2005

用CSS如何使DIV层水平居中
这两天开始对网志进行大刀阔斧的页面更改.
今天碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:

  1. margin-left: auto;
  2. margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!
郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.
问题到底出在哪里呢?
感谢网友乐天无用帮忙找出了这个邪门问题的原因.
原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身. (更多…)

用CSS实现双色相间表格

星期六
4 30,2005

不过CSS的这种写法,只有MS IE浏览器才能识别:(

  1. <html>
  2. <body>
  3. <style> 
  4. .DoubleColorTable tr{
  5. background-color:expression("#FFFFFF,#EEEEEE".split(",")[rowIndex%2])
  6. }
  7. </style>
  8. <table width="70%" border="1" cellpadding="0" class="DoubleColorTable">
  9.   <tr>
  10.     <td>&nbsp;</td>
  11.   </tr>
  12.   <tr>
  13.     <td>&nbsp;</td>
  14.   </tr>
  15.   <tr>
  16.     <td>&nbsp;</td>
  17.   </tr>
  18.   <tr>
  19.     <td>&nbsp;</td>
  20.   </tr>
  21.   <tr>
  22.     <td>&nbsp;</td>
  23.   </tr>
  24.   <tr>
  25.     <td>&nbsp;</td>
  26.   </tr>
  27. </table>
  28. </body>
  29. </html>