段正淳的css笔记 Ⅰ

试想过总结出这几年来写css与xhtml的经验 ，汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高，真是有点力不从心了。于是转念一想，可以用笔记的形式展现，这样就不用担心写不出来了。

现在就来说个淘宝首页上的一个小技巧。

类目之间的横竖线

从很久很久以前开始，类目间的竖线无非都只有三种。

1. 背景图
   在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
   缺点：最后一个还是要用class来隐藏掉背景。
2. 符号
   在每个a标签之间用”|”符号来填充。
   缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。
3. a标签右侧的boder。
   同背景图一样，只不过使用border-right来代替。缺点也同上。

看到这里，可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。
为什么之前都没有那么做的，寡人也不知道了。难道寡人是第一个发现这样的做法？
不管是谁先此之前利用了这样的方法实现类目间竖线。
不过在淘宝首页上线后不久就有同行的网站在首页改版中也用了这样的方法。
那个网站不看也罢。class实在是写的有点多。加载html会变得多得多。
反正一个首页需要加载1.17m的网页我的大脑会自动屏蔽。

圆角的做法.

为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑http连接数,又要考虑css与html的代码量与语义.
贴出的是最近考虑替换现有圆角做法的方案,可能还有许多未考虑的状况.但是大体的编写方式便是如下.
好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码.

css：
.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(http://pics.taobao.com/bao/album/promotion/uiblog/purple.png);/*背景图片*/
background-repeat:no-repeat;
}
.c{
width:200px;/*临时定的宽度*/
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block;
height:4px;
background-position:0 bottom;
}
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px;
padding:0 4px 0 0;
background-position:right -4px;
}

html：
< div class="c">
< i>< i>< /i>< /i>
< p>
按钮按钮按钮按钮按钮按钮
按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮
< /p>
< b>< b>< /b>< /b>
< /div>

table的全局定义

caption这个标签在firefox下会有左边有1px空隙的bug,很讨厌.能想到的简单的方法只有-1px的margin了.

css：
table{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*边框颜色*/
background:#c3d9ff;/*背景颜色*/
}
table caption{
text-align:left;
border-bottom:none;
margin-left:-1px;
}

html：
< table>
< caption>表格标题< /caption>
< tr>
< th>标题< /th>
< th>标题< /th>
< th>标题< /th>
< th>标题< /th>
< /tr>
< tr>
< td> 内容< /td>
< td> 内容< /td>
< td> 内容< /td>
< td> 内容< /td>
< /tr>
< /table>

需要正视的二个标签

1. acronym这个标签用来解释名词很爽,但是用得太少.(我也一直想用来着,所以记下了.)
   css：
   acronym{cursor:help}
   html：
   < acronym title="段正淳又是金庸笔下一个十分奇特的人物。他奇特在到处留情，情人极多，见一个爱一个，而又绝不是徒然风流薄幸，当他是单独对着一个情人的时候，他真是真心真意爱这个情人的，只好说这个人的感情特别丰富，别无其他解释。" >文字< /acronym>
2. ins这个标签忘记是在哪个网站上看到过用来在h2里显示更多的链接,后来查了书,大家都觉得有点欠妥,有点争议.
   css：
   还未写入css组件…欠奉上了
   html：
   < h2>标题< ins>< a xhref="http://ued.taobao.com/blog/#" mce_href="http://ued.taobao.com/blog/#" >更多>>< /a>< /ins>< /h2>

标题右侧“更多”的实现

曾经做上图所示的效果,会使用到position来相对定位到h2标签的右侧.这样的做法,代码确实会多好几行. 其实可以用个笨一点的办法来实现的：

譬如html代码如下：

< h2>< a h ref="#" >标题< /a> < span>更多…< /span> < /h2>

使用potsition的css差不多如下：

h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}

这样才能实现更多在右侧.其实真的还可以更简单:

h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}

其实只是利用了margin-top 的负数来实现,因为默认的float会换行到h2标签下面去，所以让它自个跳上去。大致代码就是如此了,是不是很简单?我说很简单嘛！由于很简单,所以就不放出单独的测试页面了.

ps:我说咱们啥时候也得搞个和蓝色理想一样的编辑器吧…

淘宝的css属性顺序书写规范

以前部门的同事们，每个人都有一套书写的规范，导致看对方的css代码非常吃力，所以就推行了一套书写标准 ，或许对您也有帮助。

*{
/*显示属性*/
display
position
float
clear
cursor
…

/*盒模型*/
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align
…

/*文字*/
color
font
content

/*边框背景 为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便，哈哈。*/
border
background
}

说到底其实属性的书写顺序规范就是：神仙?妖怪? - 身材怎么样！- 服装类型(比基尼?棉袄?) - 服装款式(黑色?白色?纽扣?拉链?) - 用了啥化妆品和发型.
这个书写标准小部分并不是浏览器厂商推行的书写规范，所以可能被广大标准推广者所不认同 。但这些个都是弟兄几个实践出来认为最符合现有淘宝环境的。

css代码的简写

css缩写的语法，对新手有一定帮助,老鸟就不用看了.

1. 0px不需要单位，直接:margin:0
2. 盒模型的缩写，语法是margin:上 右 下 左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的
3. css属性的最后一项”;”号省略。（不建议 ^_^）
4. 字体宽度normal用400代替,bold用700代替。
5. 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD可以缩写为#04D;
6. border边框的缩写，语法是border:width style color,类似boder:1px solid red;
7. 背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?)
8. 字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.
9. list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.
10. 想凑10条, 还真难.就把删除无用换行符和空格算一个吧

一天大家在团队中讨论“未知图片垂直居中”的问题，突发奇想用vertical-align:middle这个属性来实现，于是抽了时间做了下面这个不成熟的例子：

CSS:

 div{
  width:140px;
  height:140px;
  text-indent:-8px;
  text-align:center;
  line-height:138px;
  background:red;
  font-size:12px;
  *font-size:120px;
  *text-indent:-60px;
}
img{
  width:100px;
  height:100px;
  vertical-align:middle;
}

HTML:

< div>& nbsp;<img src="ipodclassics.jpg" alt="iPod classic" />

初衷是不想用position来做,毕竟 大量的图片显示浏览器在渲染的时候会消耗 较多的资源。

缺点是 输出了 无意义的nbsp;, 而且font-size和font-indentd的计算公式不是很简单(所以以上的数字都是凑的^_^).

后来小马见了这个思路，用了点时间升级了代码,用:after输出代替了无趣nbsp ,代码见下。

CSS:

 .tb-p-c{
  display: block;
  width:140px;
  height:140px;
  line-height:140px;
  text-align:center;
  *font-size:123px;
}
.tb-p-c img{
  vertical-align:middle;
}
.tb-p-c:after {
  content: ".";
  visibility: hidden;
  font-size: 12px;
  margin-left: -5px;
}

HTML:

<a class="tb-p-c"><img src="jishi070912_2.jpg" /></a>

这样子，恼人的nbsp消失了。大家对vertical-align:middle的渲染方式有了更进一步的了解了。还让很多同志发现了after这个伪类还可以用来hack.

结果圆心又给CSS升了次级：

CSS:

 .tb-p-c{
  display: table-cell;
  vertical-align:middle;
  width:140px;
  height:140px;
  text-align:center;
  *display: block;
  *font-size: 122px;
  background:red;
}
.tb-p-c img {
  vertical-align:middle;
}

这是第三次的升级，由于时间关系，没有测试上面的代码，原因是利用了display来渲染，感觉上还是会让浏览器多次渲染，所以偶没测试 。
这次探讨给了我们很多很多的收获，相信如果有大家的参与，会有更多方式和我们没发现的观点。大伙别小气，多发表回复，一起提高。