0

私はCSSに慣れようとしています。かなりの数のページで繰り返す必要があるボタン スタイルがあります。bigbutton次の html ファイルで使用しているというクラスを作成しました。他の HTML ページでも同じクラスを使用しています。

このボタンの外観を定義する css ファイルも表示されます。私が抱えている問題は、css ファイルを定義すると、.bigbuttonこれらの設定が無効になることです。css ファイルを定義すると#big_button_container .bigbutton、すべてが完全に機能します。残念ながら、他の html ファイルでは、このクラスが必ずしもこのbig_button_containerdiv にラップされるとは限らないため、この方法では実行できません。

それで、私の質問は、このbigbuttonクラスに望ましい効果をもたらすようにcssセレクターをどのように書くのですか? ありがとう！

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Dashboard</title>
    <link rel="stylesheet" type="text/css" href="styles/mystyles.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="styles/bigbuttons.css" media="screen" />

                <style media="screen" type="text/css">
                    #big_button_container{
                        margin-left:85px;
                        width:809px;
                        padding:14px;
                    }
                </style>
</head>

<body>

    <div id="frame">
        <div id="page">
            <img id="mainpic" src="images/banner.png" height="390" width="982">

            <div id="big_button_container">        
                <table>
                    <tr>
                        <td>
                            <form action="coaches.html">
                                <input type="submit" value="COACHES" class="bigbutton"> 
                            </form>
                        </td>

                        <td>
                                <input type="button" value="GROUPS" class="bigbutton" onclick="()"</td>
                        <td><input type="button" value="WORKOUTS" class="bigbutton" onclick="()"</td>
                        <td><input type="button" value="ATHLETES" class="bigbutton" onclick="()"</td>
                    </tr>

                    <tr>
                        <td><input type="button" value="PACE GROUPS" class="bigbutton" onclick="()"</td>
                        <td><input type="button" value="USER TYPES" class="bigbutton" onclick="()"</td>
                        <td><input type="button" value="WORKOUT TYPES" class="bigbutton" onclick="()"</td> 
                    </tr>
            </div>

        </div>
    </div>

</body>

</html>

CSS

//#big_button_container .bigbutton{    <--this works, but only for this html file
.bigbutton{
    clear:both;
    margin-right:3px;
    margin-top:3px;
    border-style:none; 
    width:200px;
    height:125px;
    background:#c1d72e;
    text-align:center;
    line-height:50px;
    color:#444444;
    font-size:16px;
    font-weight:bold;
}
4

1 に答える 1

0

さて、私はそれを働かせました。この行を変更しました：

<div id="big_button_container">

に

<div class="big_button_container">

次に、このコンテナーの css を同じ「bigbuttons.css」ファイルに移動しました。したがって、私の css ファイルは次のようになります。

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}

.big_button_container{
    margin-left:85px;
    width:809px;
    padding:14px;
}

.bigbutton{
    clear:both;
    margin-right:3px;
    margin-top:3px;
    border-style:none; 
    width:200px;
    height:125px;
    background:#c1d72e;
    text-align:center;
    line-height:50px;
    color:#444444;
    font-size:16px;
    font-weight:bold;
}

以前に big_button_container をクラスにしようとしたことがあるので、なぜこれが機能するのか本当にわかりません。ただし、このファイルだけでなく、同じボタン スタイルを使用する他の html ファイルでも機能します。このようなことを偶然に解決するのは好きではありませんが、少なくとも解決されています。以前は機能しなかったのに、なぜこれが機能するのかを誰かが教えてくれるなら、ぜひ聞いてみたい.

皆様ありがとうございました。お手数をおかけして申し訳ありません。私はあなたの助けに感謝します！

于 2013-06-30T04:09:55.647 に答える