web开发

CSS工具类使用说明

作者：LT  发表于:

旨在现在的CSS框架下去快速修正个别样式，减少添加CSS的工作量，但不可滥用工具类，如列表项的样式较多里，并不实用，常用于容器类型的标签，建议样式在三个左右时，使用工具类组合，四个以上时，添加独立的class

内容

百分比、字体大小、行高、字体风格、字体类型、外边距、内边距、块级显示、边框、颜色、背景颜色、浮动、定位、overflow、对齐、可见性、分隔线、文本溢出、动画

百分比

定义了常用的百分比 10 - 100，步进值10，加两个特殊百分比 25%、33.3%，分别对应四等分与三等分

字体大小

定义了大小为0、10、12、13、14、16、18几种常用字体大小

字体大小设置为0，通常可以用于去掉inline-block后产生的间隔，或可以用于隐藏文字、去掉img元素在容器中的间隔

行高

定义了24、28、30常用行高

字体风格

定义了 普通、加粗、斜体、中划线 常用样式

字体类型

定义了 Arial 字体，用于数字

外边距

定义了 0-30 的 margin，5-30的 margin-top/margin-right/margin-bottom, 步进值为5

内边距

定义了 0-30 的 padding，5-30的 padding-top/padding-right/padding-bottom, 步进值为5

块级显示

定义了几个显示方式 隐藏、行内、块级、行内块级

边框

定义了1px的全边框，上、下、左、右边框的样式

颜色

定义了常用安全色#333、#999、#666、#888、常用颜色红、蓝、绿、橙、白的样式

背景颜色

定义了两中背景色 白色 与 灰色

浮动定位

定义了 左浮动 l, 右浮动 r

overflow

定义的 overflow 的 hidden/auto 两种的样式

对齐

定义了6中文本对齐方式，水平左中右，垂直上中下几中对齐

可见性

定义了 visibility 的 hidden/visible 两种样式

分隔线

定义了水平和垂直分隔线，便需要配合margin和背景颜色来使用

文本溢出

定义了文本超出以...显示的工具类，需要配合max-width来使用

动画

定义了常用动画过渡处理的样式

用法示例

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/*!
* author: LT
* version: v0.0.1
* github: https://github.com/git-lt/Tool.css/blob/master/Tool.css
*/
/* percent width value */
	.pct10{width:10%;} .pct20{width:20%;} .pct25{width:25%;} .pct30{width:30%;} .pct33{width:33.3%;} .pct40{width:40%;} .pct50{width:50%;} .pct60{width:60%;} .pct70{width:70%;} .pct80{width:80%;} .pct90{width:90%;} .pct100{width:100%;}
/* font-size */
	.f0{font-size:0;} .f10{font-size:10px;} .f12{font-size:12px;} .f13{font-size:13px;} .f14{font-size:14px;} .f16{font-size:16px;} .f18{font-size:18px;} 
/*line-height*/
	.lh24 { line-height: 24px;} .lh28 { line-height: 28px;} .lh30 { line-height: 30px;}
/* font-style */
	.n{font-weight:400; font-style:normal; white-space: normal;} .b{font-weight:bold;}.i{font-style:italic;}.del {text-decoration: line-through;}
/* font-family */
	.fa{font-family:Arial;}
/* margin */
	.m0  {margin:0px;} .m5 {margin:5px;} .m10 {margin:10px;} .m15 {margin:15px;} .m20 {margin:20px;} .m25 {margin:25px;} .m30 {margin:30px;}
	.mt5 {margin-top:5px;} .mt10 {margin-top: 10px;} .mt15 {margin-top: 10px;} .mt20 {margin-top: 20px;} .mt25 {margin-top: 20px;} .mt30 {margin-top: 30px;}
	.ml5 {margin-left:5px;} .ml10 {margin-left:10px;} .ml15 {margin-left:15px;} .ml20 {margin-left:20px;} .ml25 {margin-left:20px;} .ml30 {margin-left:30px;}
	.mb5 {margin-bottom:5px;} .mb10 {margin-bottom:10px;} .mb15 {margin-bottom:10px;} .mb20 {margin-bottom:20px;} .mb25 {margin-bottom:20px;} .mb30 {margin-bottom:30px;}
	.mr5 {margin-right:5px;} .mr10 {margin-right:10px;} .mr15 {margin-right:15px;} .mr20 {margin-right:20px;} .mr25 {margin-right:25px;} .mr30 {margin-right:30px;}
/* padding */
	.p0  {padding:0px;} .p5 {padding:5px;} .p10 {padding:10px;} .p15 {padding:15px;} .p20 {padding:20px;} .p25 {padding:25px;} .p30 {padding:30px;}
	.pt5 {padding-top: 5px;} .pt10 {padding-top: 10px;} .pt15 {padding-top: 15px;} .pt20 {padding-top: 20px;} .pt25 {padding-top: 25px;} .pt30 {padding-top: 30px;}
	.pl5 {padding-left: 5px;} .pl10 {padding-left: 10px;} .pl15 {padding-left: 15px;} .pl20 {padding-left: 20px;}.pl25 {padding-left: 25px;} .pl30 {padding-left: 30px;}
	.pb5 {padding-bottom: 5px;} .pb10 {padding-bottom: 10px;} .pb15 {padding-bottom: 15px;} .pb20 {padding-bottom: 20px;} .pb25 {padding-bottom: 25px;} .pb30 {padding-bottom: 30px;}
	.pr5 {padding-right: 5px;} .pr10 {padding-right: 10px;} .pr15 {padding-right: 15px;} .pr20 {padding-right: 20px;} .pr25 {padding-right: 25px;} .pr30 {padding-right: 30px;}
/*display*/
	.dn{display:none;} .di{display:inline;} .db{display:block;} .dib{display:inline-block;}
/*border*/
	.bdr {border:1px solid #f2f2f2;} .bdr-l {border-left:1px solid #f2f2f2;} .bdr-r {border-right:1px solid #f2f2f2;} .bdr-t {border-top:1px solid #f2f2f2;} .bdr-b {border-bottom:1px solid #f2f2f2;}
  
/*color*/
	.c-3 {color:#333;} .c-6 {color:#666;} .c-8 {color:#888;} .c-9 {color:#999;}
	.c-rd {color: #F44336;} .c-bl {color: #0894EC;} .c-wt {color: #FFFFFF;} .c-gr {color: #4CD964;} .c-or {color: #FF6600;}
/*backgroud-color*/
	.bg-wt { background-color: #fff; }.bg-f5 { background-color: #f5f5f5; }
 
/*float & position*/
	.l {float: left;}.r {float: right;}
	.clearfix:before,.clearfix:after {display: table;content: " ";}.clearfix:after {clear: both;}
	.rel {position: relative;}.abs {position: absolute;}
/* align */
	.vt {vertical-align: top;}.vb {vertical-align: bottom;}.vm {vertical-align: middle;}
	.tc {text-align: center;} .tl {text-align: left;} .tr {text-align: right;}
/* overflow */
	.ovh{overflow:hidden;} .ova{overflow:auto;}
/* visibility */
	.vh{visibility:hidden;}.vv{visibility:visible;}
/*hide scrollbar*/
	.no-scroll {overflow: hidden !important; height: 100% !important;}.no-scroll body {overflow: hidden; height: 100%;}
/*divider line*/
	.dvd-x {display: block;font-size: 0; height: 1px; clear: both;}
	.dvd-y {display:inline-block; font-size: 0; width: 1px;}
/* ellipsis */
	.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
/*transition*/
	.trans{-ms-transition:all 0.2s; -webkit-transition:all 0.2s; transition:all 0.2s;}
分享到