css按钮链接样式,css外部链接样式

CSS可否改变设置按钮的样式？怎么做呢？菜鸟求教~

1、首先创建一个txt文件，修改后缀名：把.txt改为.html，用记事本打开添加如下代码：打开浏览器，这是一个没有添加样式的button，外观不美观，而且在不同的浏览器下显示的外观是不一样的，所以我们要添加统一的样式。

我们提供的服务有：成都网站设计、做网站、微信公众号开发、网站优化、网站认证、玄武ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的玄武网站制作公司

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:#E1E1E1;background-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做一个按钮，怎么添加链接？

用CSS做一个按钮，添加链接，首先给这个按钮一个id或者是class，然后我们在通过css的width，height来改变这个按钮的默认宽度和高度，在用一个a标签将这个按钮包裹起来，就能实现链接的添加，通过代码来理解下：

html

head

style

#but{

widht:220px;

height:300px;

}

/style

/head

body

a href='地址'

input type='button' id='but' value='我是一个链接'

/a

/body

/html

按钮式链接的CSS

首先:

遨游用的是IE的内核,你在IE里看到的效果跟遨游应该是完全一样的.

其次:

DW不是所见即所得.所以一切以浏览器为准.

第三:

a:hover{ =表示鼠标经过的时候.

color:#ecd8db; =表示字体的颜色

padding:4px 10px; =表示内容和边框之间的距离.

background-color:#ecd8db; =表示背景的颜色.

你没注意到字体的颜色跟背景的颜色一样吗?当然看不到字.

解决办法:把color:#ecd8db;删了或改其他颜色

第四:

没仔细研究为什么出不来效果.

不过可以这样解决.

把上面的

a{font:18px Arial, Helvetica, sans-serif;

text-align:center;

margin:3px;}

修改成:

a{font:18px Arial, Helvetica, sans-serif;

text-align:center;

margin:3px;

float:left;

display:block;

width:100px;

}

完整代码如下(直接复制进DreamWeaver就可以了)

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title无标题文档/title

style

a{font:18px Arial, Helvetica, sans-serif;

text-align:center;

margin:3px;

float:left;

display:block;

width:100px;

}

a:link,a:visited{

color:#a62020;

padding:4px 10px;

background-color:#ecd8db;

text-decoration:none;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #eeeeee;

border-right-color: #717171;

border-bottom-color: #717171;

border-left-color: #eeeeee;

}

a:hover{

padding:4px 10px;

background-color:#ecd8db;

text-decoration:none;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #717171;

border-right-color: #eeeeee;

border-bottom-color: #eeeeee;

border-left-color: #717171;

}

/style

/head

body

a href="#"首页/a

a href="#"心情日记/a

a href="#"学习心得/a

a href="#"工作笔记/a

a href="#"生活琐碎/a

a href="#"其他/a

/body

/html