Discuz! 系统预定义CSS样式

猫性男孩

Discuz! 预定义了很多CSS样式，保存在template/default/common/common.css文件中，只要是包含了header.htm这个头部文件，预定义的CSS文件一定会加载，所以，熟练了解这些预定义的样式对插件的开发很有必要，这让我们省了很多事。

下面就介绍一些常用的预定义样式

1. 浮动及浮动溢出的清理

1	/* 左右浮动 */

[backcolor=rgb(248, 248, 248) !important]

2	.z { float: left; }

3	.y { float: right; }

[backcolor=rgb(248, 248, 248) !important]

4	/* 浮动清理 */

5	.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

[backcolor=rgb(248, 248, 248) !important]

6	.cl { zoom: 1; }

上面的浮动使用方法是：

1	<div class="cl">

[backcolor=rgb(248, 248, 248) !important]

2	<div class="z"></div>

3	<div class="y"></div>

[backcolor=rgb(248, 248, 248) !important]

4

</div>

2. 文字字体大小

1	.xs1 { font-size: 12px !important; }

[backcolor=rgb(248, 248, 248) !important]

2	.xs2 { font-size: 14px !important; }

3	.xs3 { font-size: 16px !important; }

3. 灰色文字

1	.xg1, .xg1 a { color: {LIGHTTEXT} !important; }

[backcolor=rgb(248, 248, 248) !important]

2	.xg1 .xi2 { color: {HIGHLIGHTLINK} !important; }

3	.xg2 { color: {MIDTEXT}; }

4. 高亮文字（1为橙色，2为蓝色）

1	.xi1, .onerror { color: {NOTICETEXT}; }

[backcolor=rgb(248, 248, 248) !important]

2	.xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }

5. 文字粗体

1	.xw0 { font-weight: 400; }

[backcolor=rgb(248, 248, 248) !important]

2	.xw1 { font-weight: 700; }

6. 下面框

1	.bbda { border-bottom: 1px dashed {COMMONBORDER}; }

[backcolor=rgb(248, 248, 248) !important]

2	.bbs { border-bottom: 1px solid {COMMONBORDER} !important; }

7. 去除边框

1	.bw0 { border: none !important; }

[backcolor=rgb(248, 248, 248) !important]

2	.bw0_all, .bw0_all th, .bw0_all td { border: none !important; }

8. 去除背景

1	.bg0_c { background-color: transparent !important; }

[backcolor=rgb(248, 248, 248) !important]

2	.bg0_i { background-image: none !important; }

3	.bg0_all { background: none !important; }

9. 预定义margin

1	.mtn { margin-top: 5px !important; }

[backcolor=rgb(248, 248, 248) !important]

2	.mbn { margin-bottom: 5px !important; }

3	.mtm { margin-top: 10px !important; }

[backcolor=rgb(248, 248, 248) !important]

4	.mbm { margin-bottom: 10px !important; }

5	.mtw { margin-top: 20px !important; }

[backcolor=rgb(248, 248, 248) !important]

6	.mbw { margin-bottom: 20px !important; }

10. 预定义padding

1	.ptn { padding-top: 5px !important; }

[backcolor=rgb(248, 248, 248) !important]

2	.pbn { padding-bottom: 5px !important; }

3	.ptm { padding-top: 10px !important; }

[backcolor=rgb(248, 248, 248) !important]

4	.pbm { padding-bottom: 10px !important; }

5	.ptw { padding-top: 20px !important; }

[backcolor=rgb(248, 248, 248) !important]

6	.pbw { padding-bottom: 20px !important; }