css技巧

最新推荐文章于 2024-08-06 21:02:26 发布

yijianfengyu

最新推荐文章于 2024-08-06 21:02:26 发布

阅读量109

点赞数

分类专栏： CSS 文章标签： CSS IE Blog HTML

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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、细线表格：