1

HTML、CSS、および JavaScript で記述された Windows 8 用のアプリに取り組んでいます。CSSのフォーマット部分に苦労しています。アプリをフォーマットすることができたので、見た目はいくらか希望どおりに見えますが、CSS をクリーンアップする方法を知りたいですか? 必要なレイアウトが得られるまで「グーグル」して実験しましたが、CSS でフォ​​ーマットするための適切で好ましい方法を知りたいですか?

以下は私のコードです：

     <style type="text/css">
     .quiz p {
        margin-left: 120px;
    }



    .quizDiv2 {
        margin-top: 220px;
        width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .cenDiv {
        text-align: center ;

    }

    .cenDiv2 {
        text-align: center ;
         font-size:250%;
    }

    .alignleft {
      float: left;
      width:33.33333%;
      text-align:left;
    }
    .aligncenter {
      float: left;
      width:33.33333%;
      text-align:center;
    }
    .alignright {
     float: left;
     width:33.33333%;
     text-align:right;
    }​

     .alignleft2 {
        float: left;
    }
    .alignright2 {
        float: right;
    }


    .container {
        width:320px;
    }

    .first,
    .second {
        width:100%;
        text-align:right;
        display:table;
        font-size:250%;
    }
    .plus {
        width:auto;
        float:left;
    }
    .number {
        width:auto;
        float:right;
    }
    .third {
        width:100%;
        text-align:right;
        border-top:2px solid black;
        border-color:black;
    }
    ​ .correct {
     font-size:250%;
    }
     </style>
    </head>

    <body>
     <div class="quizDiv2">

                <div id="textbox">
     <p class="alignleft" id="statQuestionDiv">1/10</p>
     <p class="aligncenter" id="statTimerDiv">02:27</p>
     <p class="alignright" id="statScoreDiv">100%</p>
     </div>
     <div style="clear: both;"></div>



            <div class="container">
        <div class="first" id="mathProblemDiv1">1,483</div>
        <div class="second">
            <div class="plus">+</div>
            <div class="number" id="mathProblemDiv2">4,573</div>
        </div>
        <div class="third">
            <div class="result"></div>
        </div>
    </div>



            <div class="cenDiv">
                <!-- Fill in the blank div -->
                <div id="fillBlankDiv">
                <input id="userAnswer" type="text" />
                <p>
                <button id="btn7">7</button>
                <button id="btn8">8</button>
                <button id="btn9">9</button>
                </p>
                <p>
                <button id="btn4">4</button>
                <button id="btn5">5</button>
                <button id="btn6">6</button>
                </p>
                <p>
                <button id="btn1">1</button>
                <button id="btn2">2</button>
                <button id="btn3">3</button>
                </p>
                <p>
                <button id="btn0">0</button>
                <button id="btnNeg">+/-</button>
                <button id="btnOk">OK</button>
                </p>
                </div>
                </div>
            <div class="cenDiv2">
                <div id="checkDiv">CORRECT!</div>
       </div>
                 </div>

    </body>
    </html>

jsフィドル

4

1 に答える 1

2

この簡単な CSS クリーナーを使用できます。このサイトは素晴らしく、将来の CSS スタイルをクリーンアップするのに最適です。

スタイルをコピーして CSS 入力に貼り付け、出力のサイズを選択するだけです。ハイおすすめです。

http://www.cleancss.com/

お役に立てれば！

クリーンアップ後のコードは次のとおりです。

<style>
.quiz p{margin-left:120px;}
.quizDiv2{margin-top:220px;width:320px;margin-left:auto;margin-right:auto;}
.cenDiv{text-align:center;}
.cenDiv2{text-align:center;font-size:250%;}
.alignleft{float:left;width:33.33333%;text-align:left;}
.aligncenter{float:left;width:33.33333%;text-align:center;}
.alignright{float:left;width:33.33333%;text-align:right;}
.alignleft2{float:left;}
.alignright2{float:right;}
.container{width:320px;}
.first,.second{width:100%;text-align:right;display:table;font-size:250%;}
.plus{width:auto;float:left;}
.number{width:auto;float:right;}
.third{width:100%;text-align:right;border-top:2px solid #000;border-color:#000;}
.correct{font-size:250%;}
</style>

更新: css のベスト プラクティスについては、スタイルがある場合は、同様のスタイルをかなり使用することになります。たとえば、text-aligning と font-sizes、および列。CSS でクラスを次のように作成します。

 .onethird { width:33.33333%; }
 .alignleft { text-align:left; }
 .aligncenter { text-align:center; }
 .alignright { text-align:right; }

 .largefont { font-size:250%; font-family: arial,tahoma; font-weight:normal;}

次に、html にクラスを追加します。たとえば、次のようになります。

 <div class="container">
      <div class="first alignleft onethird">
      </div>
      <div class="second aligncenter onethird">
      </div>
      <div class="third alignright onethird">
      </div>
 </div>

そうすれば、各 css クラスに を追加することなく、何度も使用するスタイルを適用できます。そして、特定のものを変更したい場合は、css をより具体的に呼び出すと、デフォルトのスタイルが上書きされます。例えば：

.container .onethird { width:100%; }

オーバーライドします.onethird { width:33.33333%; }

これが私がcssで作業する方法であり、とても役に立ちました。お役に立てれば！

于 2012-12-04T04:34:21.720 に答える