asp.net - 设计一个 asp.net 按钮

Question

我是 Asp.net 的新手，很抱歉，如果这是初级的。我试图让按钮控件以某种方式显示。

我正在使用我之前用过的 CSS 文件，它会以某种方式设置我的标签的样式。

如果我使用的是 asp.net 按钮控件，如何将此样式应用到按钮控件？

我尝试设置 CSSClass='button' 但这不起作用。我将标签放在我的 asp.net 按钮控件周围，但这只会使 asp.net 位于我的程式化按钮内。

有什么想法我需要做什么吗？

感谢您的帮助。

/******************** Button ********************/
button,
.big-button {
    display: inline-block;
    border: 1px solid;
    border-color: #50a3c8 #297cb4 #083f6f;
    background: #0c5fa5 url(../images/old-browsers-bg/button-element-bg.png) repeat-x left top;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background: -moz-linear-gradient(
        top,
        white,
        #72c6e4 4%,
        #0c5fa5
    );
    background: -webkit-gradient(
        linear,
        left top, left bottom,
        from(white),
        to(#0c5fa5),
        color-stop(0.03, #72c6e4)
    );
    -moz-border-radius: 0.333em;
    -webkit-border-radius: 0.333em;
    -webkit-background-clip: padding-box;
    border-radius: 0.333em;
    color: white;
    -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    font-size: 1.167em;
    padding: 0.286em 1em 0.357em;
    line-height: 1.429em;
    cursor: pointer;
    font-weight: bold;
    }
    /* IE class */
    .ie button {
        overflow: visible;
    }
    /* IE class */
    .ie7 button {
        padding-top: 0.357em;
        padding-bottom: 0.214em;
        line-height: 1.143em;
    }
    button img,
    .big-button img {
        margin-bottom: -3px;
    }
    button:hover,
    .big-button:hover {
        border-color: #1eafdc #1193d5 #035592;
        background: #057fdb url(../images/old-browsers-bg/button-element-hover-bg.png) repeat-x left top;
        background: -moz-linear-gradient(
            top,
            white,
            #2bcef3 4%,
            #057fdb
        );
        background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(white),
            to(#057fdb),
            color-stop(0.03, #2bcef3)
        );
    }
    button:active,
    .big-button:active {
        border-color: #5b848b #b2def1 #b2def1 #68a6ba;
        background: #3dbfed url(../images/old-browsers-bg/button-element-active-bg.png) repeat-x top;
        background: -moz-linear-gradient(
            top,
            #89e7f9,
            #3dbfed
        );
        background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(#89e7f9),
            to(#3dbfed)
        );
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    button.red,
    .red button,
    .big-button.red,
    .red .big-button {
        color: white;
        border-color: #bf3636 #5d0000 #0a0000;
        background: #790000 url(../images/old-browsers-bg/button-element-red-bg.png) repeat-x top;
        background: -moz-linear-gradient(
            top,
            white,
            #ca3535 4%,
            #790000
        );
        background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(white),
            to(#790000),
            color-stop(0.03, #ca3535)
        );
        }
        button.red:hover,
        .red button:hover,
        .big-button.red:hover,
        .red .big-button:hover {
            border-color: #c24949 #9d3d3d #590909;
            background: #9d0404 url(../images/old-browsers-bg/button-element-red-hover-bg.png) repeat-x top;
            background: -moz-linear-gradient(
                top,
                white,
                #fe6565 4%,
                #9d0404
            );
            background: -webkit-gradient(
                linear,
                left top, left bottom,
                from(white),
                to(#9d0404),
                color-stop(0.03, #fe6565)
            );
        }
        button.red:active,
        .red button:active,
        .big-button.red:active,
        .red .big-button:active {
            border-color: #7c5656 #f7cbcb #f7cbcb #a15151;
            background: #ff5252 url(../images/old-browsers-bg/button-element-red-active-bg.png) repeat-x top;
            background: -moz-linear-gradient(
                top,
                #ff9d9d,
                #ff5252
            );
            background: -webkit-gradient(
                linear,
                left top, left bottom,
                from(#ff9d9d),
                to(#ff5252)
            );
        }

    button:disabled,
    button:disabled:hover,
    .big-button.disabled,
    .big-button.disabled:hover {
        color: #bfbfbf;
        border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2;
        background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top;
        background: -moz-linear-gradient(
            top,
            #f0f2f2,
            #c8c8c8
        );
        background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(#f0f2f2),
            to(#c8c8c8)
        );
        -moz-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
        -webkit-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        cursor: auto;
    }
    /* IE class */
    button.disabled,
    button.disabled:hover {
        color: #bfbfbf;
        border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2;
        background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top;
        cursor: auto;
    }

    button.grey,
    .big-button.grey {
        color: white;
        border-color: #a1a7ae #909498 #6b7076;
        background: #9fa7b0 url(../images/old-browsers-bg/button-element-grey-bg.png) repeat-x top;
        background: -moz-linear-gradient(
            top,
            white,
            #c5cbce 5%,
            #9fa7b0
        );
        background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(white),
            to(#9fa7b0),
            color-stop(0.05, #c5cbce)
        );
        -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }
        button.grey:hover,
        .big-button.grey:hover {
            border-color: #a1a7b0 #939798 #6e7275;
            background: #b1b5ba url(../images/old-browsers-bg/button-element-grey-hover-bg.png) repeat-x top;
            background: -moz-linear-gradient(
                top,
                white,
                #d6dadc 4%,
                #b1b5ba
            );
            background: -webkit-gradient(
                linear,
                left top, left bottom,
                from(white),
                to(#b1b5ba),
                color-stop(0.03, #d6dadc)
            );
        }
        button.grey:active
        .big-button.grey:active {
            border-color: #666666 #ffffff #ffffff #979898;
            background: #dddddd url(../images/old-browsers-bg/button-element-grey-active-bg.png) repeat-x top;
            background: -moz-linear-gradient(
                top,
                #f1f1f1,
                #dddddd
            );
            background: -webkit-gradient(
                linear,
                left top, left bottom,
                from(#f1f1f1),
                to(#dddddd)
            );
        }

    button.small,
    .big-button.small {
        font-size: 0.833em;
        padding: 0.2em 0.3em 0.3em 0.2em;
        vertical-align: 0.2em;
        }
        /* IE class */
        .ie button.small {
            padding: 0.5em 0.3em;
            vertical-align: 0.1em;
        }

    .ie7 button + button {
        margin-left: 0.25em;
    }

按钮:

<asp:Button ID="LoginButton" runat="server"  CommandName="Login" 
                        Text="Log In" type="button"
                        ValidationGroup="mainLogin" onclick="LoginButton_Click" CSSClass='button'/>

Answer 1

在调查你的 CSS 之后，下面的行有问题，以及 css 不适合你的原因 asp:CssClass 中的按钮

button,
.big-button {

你必须这样使用css

.button,
.big-button {

so the issue is that you missed period operator . before the button,

类选择器使用 HTML 类属性，并用“.”定义。 http://www.w3schools.com/css/css_id_class.asp