首先创建一个txt文件，修改后缀名：把.txt改为.html，用记事本打开添加如下代码：
打开浏览器，这是一个没有添加样式的button，外观不美观，而且在不同的浏览器下显示的外观是不一样的，所以我们要添加统一的样式！
CSS：style属性设置。如下代码所示：按钮的样式是不是好看多了，在其他浏览器也会一样的显示这个效果。
注：如果按钮样式比较少、样式只对该按钮有效，那么就可以用style属性。
如下图代码所示，该按钮样式比较多，这样写让代码不整洁，可阅读性差，那么怎么解决这个问题呢，这就要用style标签了！
CSS：<style type="text/css"></style>样式表。如下代码所示：
style标签里面表示的是一个样式表，我们所有的样式都可以写到标签中去。这段代码的意思是：凡是button标签都使用这个样式。
注：如果希望这个页面所有的按钮(button)都使用这个
CSS：<style type="text/css"></style>样式表 加 class属性。如下代码所示：
注意看到代码的变化，我们把 样式表中的 button{}改成了.ui_button{}，然后在button标签里面加了class属性，这样做的意思是，这个button标签使用了名字为ui_button的样式。
注：这是开发中比较常用的添加样式的方式，我们可以对需要添加样式的按钮指定一个样式。
JS：通过javascript动态修改样式。如下代码所示：
很多适合我们需要动态的改变样式，比如用户提交个人信息的适合，为了避免用户多次点击提交按钮重复提交信息，我们可以在用户点击提交按钮之后，禁用按钮，并设置按钮字体的颜色为灰色。
JS：修改样式的其他方法：
obj.style.cssText = "color:#E1E1E1background-color:black"
cssText可以写多个样式样式属性。
如下面代码：
JS：修改样式的其他方法：
obj.setAttribute("class", "style2")
直接更改按钮标签的class属性，把指向名为ui_button的样式改为指向名为style2的样式。
如下面代码：
JS：修改样式的其他方法：
<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
obj.setAttribute("href","css2.css")
修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新！
如下面代码：
在css中，主要通过border属性的设置，实现去掉边框。以代码编辑器：zend studio 10.0为例，可参考以下步骤去掉button（按钮）的边框：
1、新建一个html文件，命名为test.html，用于讲解。
2、在test.html文件内，使用button标签创建一个按钮，用于测试。
3、在test.html文件内，给button按钮添加一个id属性，用于样式的设置。
4、在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内。
5、在css标签中，通过id设置button的样式，定义其背景颜色为蓝色，文字颜色为白色，最后，将border属性设置为none，实现去掉button的边框。
6、在浏览器打开test.html文件，查看实现的效果。
方法和详细的操作步骤如下：
1、第一步，打开软件并创建一些默认复选框，见下图，转到下面的步骤。
2、第二步，执行完上面的操作之后，在顶部样式标签上设置输入样式，将输入的显示属性设置为none，删除默认的单选框，然后设置每个单选框的边距，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，继续设置下面的样式，设置“label”标签的伪元素before和after，然后将原始复选框更改为状态属性，“
checked + label”设置为红色的实心框，并取消选中状态，“ label :: after”为白色空心框，见下图，转到下面的步骤。
4、第四步，执行完上面的操作之后，打开浏览器，可以看到设置的样式，去掉了默认样式，见下图。这样，就解决了这个问题了。
