请教个关于调用CSS方式的问题

stanley8315 2007-12-24 02:39:05

<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上呢，是否有办法呢，请指教下。

...全文

86 11 打赏收藏举报

写回复

11 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

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
仅仅是扩展一个类名，对原样式没有任何影响！

打赏
举报

回复赞

stanley8315 2007-12-24

谢谢了，其实我最想知道的是input有没有办法调用a的CSS属性呢，如果可以怎么修改呢？因为提交的是链接形式，
而CSS中对链接的hove，active，link，visited都设了属性，如果不能调用，那么为了保持风格一致，必须为
input再设置CSS属性。

打赏
举报

回复赞

yixianggao 2007-12-24

现在一样了！
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>
提交键的代码在这里，这个是什么原因呢？

打赏
举报

回复赞

yixianggao 2007-12-24

或者去掉一点儿也行，反正要改，哈
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



<!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

<!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>

打赏
举报

回复赞