5.9w+
社区成员
- 主页
- 问答
请教个关于调用CSS方式的问题
<input type="reset" value="重置" class="button" />
页面中有这么一个reset按键
a.shortButton
{
display:block;
background-color: transparent;
background-image: url(images/short-button.jpg);
background-repeat: no-repeat;
width: 63px;
height: 19px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
CSS中设置有这么一个属性，那么我该如何把这个a的属性用在这个input上呢，是否有办法呢，请指教下。
页面中有这么一个reset按键
a.shortButton
{
display:block;
background-color: transparent;
background-image: url(images/short-button.jpg);
background-repeat: no-repeat;
width: 63px;
height: 19px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
CSS中设置有这么一个属性，那么我该如何把这个a的属性用在这个input上呢，是否有办法呢，请指教下。
...全文
请发表友善的回复…
发表回复
cloudgamer 2007-12-24
lz不要太转牛角尖了
stanley8315 2007-12-24
好的 ，谢谢你耐心的回答了。
曹长科 2007-12-24
a.shortButton, .button
yixianggao 2007-12-24
如果是 a.shortButton 的形式很困难，除非用js遍历那个样式，
否则没戏，不过用脚本代价太大了，没必要！
所以说css也要设计！很明显现在滴问题是楼主滴css设计出现了问题！
就用3楼滴方法吧
a.shortButton, .button
仅仅是扩展一个类名，对原样式没有任何影响！
否则没戏，不过用脚本代价太大了，没必要！
所以说css也要设计！很明显现在滴问题是楼主滴css设计出现了问题！
就用3楼滴方法吧
a.shortButton, .button
仅仅是扩展一个类名，对原样式没有任何影响！
stanley8315 2007-12-24
谢谢了，其实我最想知道的是input有没有办法调用a的CSS属性呢，如果可以怎么修改呢？因为提交的是链接形式，
而CSS中对链接的hove，active，link，visited都设了属性，如果不能调用，那么为了保持风格一致，必须为
input再设置CSS属性。
而CSS中对链接的hove，active，link，visited都设了属性，如果不能调用，那么为了保持风格一致，必须为
input再设置CSS属性。
yixianggao 2007-12-24
现在一样了！
L@_@K
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
.shortButton
{
border-width: 0px;
display:block;
background-color: yellow;
background-image: url(images/short-button.jpg);
background-repeat: no-repeat;
width: 63px;
height: 19px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://community.csdn.net/" class="shortButton">csdn</a><br />
<input type="reset" id="btnReset" value="重置" class="shortButton" /><br />
<a href="javascript:form();"class="shortButton">submit</a>
</body>
</html>
stanley8315 2007-12-24
谢谢你的回答。不过这么改好后有个奇怪的问题，在这个重置键后面还有个提交，是使用了a.shortbutton的属性，但是两者的效果完全不同。
<a href="javascript:form();"class="shortButton">[@s.text name='message.form.submit'/]</a>
提交键的代码在这里，这个是什么原因呢？
<a href="javascript:form();"class="shortButton">[@s.text name='message.form.submit'/]</a>
提交键的代码在这里，这个是什么原因呢？
yixianggao 2007-12-24
或者去掉一点儿也行，反正要改，哈
L@_@K
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
.shortButton
{
display:block;
background-color: yellow;
background-image: url(images/short-button.jpg);
background-repeat: no-repeat;
width: 63px;
height: 19px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://community.csdn.net/" class="shortButton">csdn</a><br />
<input type="reset" id="btnReset" value="重置" class="shortButton" />
</body>
</html>
yixianggao 2007-12-24
更正：改一点儿就行！
一点儿都不改滴方法俺不会，哈
L@_@K
一点儿都不改滴方法俺不会，哈
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
a.shortButton, .button
{
display:block;
background-color: transparent;
background-image: url(images/short-button.jpg);
background-repeat: no-repeat;
width: 63px;
height: 19px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<input type="reset" id="btnReset" value="重置" class="button" />
</body>
</html>
stanley8315 2007-12-24
我试试，谢谢，不过如果不修改CSS的情况下是否可以调用呢？
yixianggao 2007-12-24
复制、粘贴，哈
L@_@K
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
a.shortButton
{
display:block;
background-color: transparent;
background-image: url(images/short-button.jpg);
background-repeat: no-repeat;
width: 63px;
height: 19px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
.shortButton
{
display:block;
background-color: transparent;
background-image: url(images/short-button.jpg);
background-repeat: no-repeat;
width: 63px;
height: 19px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<input type="reset" value="重置" class="shortButton" />
</body>
</html>