CSS 样式类合并神器 classnames

在前端项目中写样式，往往会根据不同的情况给 DOM 元素不同的样式类来实现一些效果。用 React 项目举例，比如定义一个按钮：

再比如定义一个元素是否被激活：

区分这种样式常规的写法：

这种写法让人感觉非常的啰嗦，不优雅。而且如果判断条件和存在的样式类特别多，会写的很长很恶心。

如最常见的 Button 组件，它会有不同的样式、尺寸、显示方式、ghost 等等，这时候使用拼接和判断语句的方式都显得特别麻烦。

此时 classnames 闪亮登场！下面是它的用法：

classnames 很好的解决了按需使用不同样式类的问题。下面是一个 React 例子：

前后对比，明显优雅了很多。

回到按钮的问题，有了 classnames 就可以很好的解决样式类拼接麻烦的问题了。

墙裂推荐 classnames！

html+css表格的边框显示是双线，想要变成像和word中的表格一样可以在table加一个样式：border-collapse: collapse;

一、边框样式值如下：

none :无边框。与任何指定的border-width值无关

hidden :隐藏边框。IE不支持

dotted :在MAC平台上IE4+与WINDOWS和UNIX平台上IE55+为点线。否则为实线（常用）

dashed :在MAC平台上IE4+与WINDOWS和UNIX平台上IE55+为虚线。否则为实线（常用）

solid :实线边框（常用）

double :双线边框。两条单线与其间隔的和等于指定的border-width值

groove :根据border-color的值画3D凹槽

ridge :根据border-color的值画菱形边框

inset :根据border-color的值画3D凹边

outset :根据border-color的值画3D凸

二、相关设置

单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离。具体代码如下：

<table border='1'cellspacing="0" cellpadding="0" > <tr> <td width="200">1</td> <td width="200">2</td> <td width="200">3</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>中国</td> <td>我</td> <td>爱你</td> </tr> </table>

三、文字居中设置

代码如下：

<style type="text/css">onecenter{text-align:center;width:200px;}</style><table border='1'cellspacing="0" cellpadding="0" > <tr> <td class='onecenter'>1</td> <td class='onecenter'>2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter'> b</td> <td class='onecenter' > c</td> </tr > <tr> <td class='onecenter' >中国</td> <td class='onecenter' >我</td> <td class='onecenter' >爱你</td> </tr> </table>

使用纯css制作扇形图，合并起来形成饼图：

应该知道css3中引入了圆角属性（border-radius），一旦设置这个值，边框即会出现圆角。同样，我们对正方形设置圆角，即可得到饼状图

html：<div id="circle">11</div>

css：

#circle{

width:0;

height:0;

border-radius:100px;

border-width:100px;

border-style:solid;

border-color: red blue green yellow;

line-height:99em;

overflow:hidden;

cursor:pointer;

margin: 30px auto;

}

效果：

4同样我们对其中三个边框设置透明色即可得到扇形

html：<div id="fan">11</div>

css:

#fan{

width:0;

height:0;

border-radius:100px;

border-width:100px;

border-style:solid;

border-color:red transparent transparent transparent;

line-height:99em;

overflow:hidden;

cursor:pointer;

margin: 30px auto;

}

效果：

命名一个新的样式文件，比如stylecss，里面引用上面四个样式文件，代码可以这样写：

@import url（__PUBLIC__/css/basecss）

@import url（__PUBLIC__/css/navcss）

@import url（__PUBLIC__/css/columnscss）

@import url（__PUBLIC__/css/maincss）