css如何定义button

html-css018

css如何定义button,第1张

给按钮添加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文件的路径">

可以使用属性选择器,而不用类选择器,因为属性选择器要求严格匹配,因此"btn"和"btn btn-info"在类选择器中都能匹配到"btn",但在属性选择器中却是不匹配的。

比如这样即可只匹配到class="btn"的button,而不会匹配到class="btn btn-info"的:

button[class=btn]

1、新建HTML文件。

2、创建HTML标签和内容。

3、预览效果如图。

4、设置右边框的颜色border-right-color:#30C。

5、预览效果如图。

6、设置右边框的颜色border-right-color:rgb(204,0,102)。

7、预览效果如图。