1、首先创建一个txt文件,修改后缀名:把.txt改为.html,用记事本打开添加如下代码:打开浏览器,这是一个没有添加样式的button,外观不美观,而且在不同的浏览器下显示的外观是不一样的,所以我们要添加统一的样式。
2、按钮样式比较多,这样写让代码不整洁,可阅读性差,就要用style标签。
3、<style type="text/css"></style>样式表。style标签里面表示的是一个样式表,我们所有的样式都可以写到标签中去。这段代码的意思是:凡是button标签都使用这个样式。
4、把 样式表中的 button{}改成了.ui_button{},然后在button标签里面加了class属性,这样做的意思是,这个button标签使用了名字为ui_button的样式。
5、通过javascript动态修改样式,为了避免用户多次点击提交按钮重复提交信息,在用户点击提交按钮之后,禁用按钮,并设置按钮字体的颜色为灰色。
6、修改样式的其他方法:obj.style.cssText = "color:#E1E1E1background-color:black"cssText可以写多个样式样式属性。
7、修改样式的其他方法:obj.setAttribute("class", "style2")直接更改按钮标签的class属性,把指向名为ui_button的样式改为指向名为style2的样式。
8、修改样式的其他方法:<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>obj.setAttribute("href","css2.css")修改引用外部的样式表文件,这样就可以对整个页面的样式进行全部更新。
因为是这样的你的css对hover的设定是#button a:hover 也就是id为button内的<a>超链
但是你真正想实现效果的是button
所以应该这么写css:
#button:hover
也就是#button的hover 而不是a的hover
:)
1、设置一个长度与宽度,使用到的CSS代码。
2、经过给它设置长度与宽度后,变成了下图所示,相比与没有任何样式,它会好出很多。
3、接下来,可以去掉它自带默认的边框,将它边框设置为0PX,观察一下效果。
4、添加了红色的背景后,它显示如下图所示的样式。
5、除了使用颜色设置背景外,也可以使用图片作为背景。
6、还可以设置它的其他更多样式,方法是直接添加CSS代码即可。