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>

jsFiddle

4

1 回答 1

2

你可以使用这个简单的 CSS Cleaner。这个网站很棒，非常适合清理未来的 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 中的最佳实践，如果你有一种风格，你将使用类似的风格。例如文本对齐和字体大小以及列。像这样在你的 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>

这样 use 可以应用您一遍又一遍地使用的样式，而无需将 . 添加到每个 css 类中。然后，如果您想更改特定的样式，请更具体地调用您的 css，它将覆盖默认样式。例如：

.container .onethird { width:100%; }

将覆盖.onethird { width:33.33333%; }

这就是我在 css 中的工作方式，它对我帮助很大。希望这可以帮助！

于 2012-12-04T04:34:21.720 回答