css技巧

1）文字排版时常用属性：

参考十个文字排版技巧：http://www.3point7designs.com/blog/2008/06/02/10-examples-of-beautiful-css-typography-and-how-they-did-it/

Small headline  小标题：

	font-family: Gill Sans, Verdana;
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;

Large Headline  大标题：

          font-family: times, Times New Roman, times-roman, georgia, serif;
	color: #444;
	margin: 0;
	padding: 0px 0px 6px 0px;
	font-size: 51px;
	line-height: 44px;
	letter-spacing: -2px;
	font-weight: bold;



DATE 日期：
          font-family: Georgia,"Times New Roman",serif;
	font-size: 10px;
	line-height: 22px;
	text-transform: uppercase;
	letter-spacing: 2px;



NUMBER 数字：
           font-family:georgia, serif;
	  color:#3B200F;
	  font-size:16px;
	  font-weight:bold;
	  line-height:125%;
	  text-align:center;

 

 

2）文本的尺寸设置：

.bodytext p {
    font-size:14px;
}

.sidenote {
    font-size:12px;
}

.bodytext p {
    font-size:0.875em; /* 16x.875=14 */
}

.sidenote {
    font-size:0.75em; /* 16x0.75=12 */
}

body {
    font-size:100%;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}

body {
    font-size:100%;
    line-height:18px;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}

<style type="text/css">
body {
    font-size:100%;
    line-height:1.125em;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}
</style>

<!--[if !IE]>-->

<style type="text/css">
body {
    font-size:16px;
}
</style>

<!--<[endif]-->

 

 3、文字垂直方向居中结合使用下面的所有属性：

.middle{
height: 4em;
line-height: 4em;
overflow: hidden;
padding-top: 24px;
padding-bottom: 24px;
}

 

4、细线表格：

<table style="border-collapse:collapse;" border="1" bordercolor="#CC3333">
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>

 

or

 

<table cellpadding="0" cellspacing="1" bgcolor="#0066CC">
<tr>
<td bgcolor="#FFFFFF">test</td>
<td bgcolor="#FFFFFF">test</td>
<td bgcolor="#FFFFFF">test</td>
<td bgcolor="#FFFFFF">test</td>
</tr>
</table>

 

or

 

使用ul,li

http://www.b3inside.com/DEMO/tableFrame/table_style_with_ul.html