css中如何去掉button(按钮)的边框

html-css016

css中如何去掉button(按钮)的边框,第1张

在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文件,查看实现的效果。

在html中给button写了css之后会不显示原因如下。

1、未关联外部样式表,确认关联了样式表没有,或者关联的样式位置、名字是否正确。

2、怀疑CSS表的编码错误,可以直接将css文件以utf-8的编码另存一下文件。

3、选择器写错写后代子代选择等,涉及多个标签,类名、id等,子选择器的顺序、名字等写错了,均可能导致出错。

给按钮添加css样式有以下三种方法:

1,直接在元素上定义style,如下:

<input type="button" style="这里定义样式">

2,页面中内嵌样式,如下:

<style>

    .btn{需要添加的样式}

</style>

<input type="button" class="btn">

3,外部引用css文件,如下:

<link rel="stylesheet" type="text/css" href="这里是css文件的路径">