W3 school 菜鸟教程 我要自学网 信息学奥赛NOI 花哥的博客 不逼自己一把,怎知自己有多优秀——校长语录

关于CSS设置样式的一点建议

  在一个网页中有多个控件,每一个控件也可能有多种型号,还可能想有多种颜色配置,那么我们在设置css样式的时候可以把宽度、高度设为一类,把颜色设为一类,把公共样式设为一类,最终每一个控件可根据需要包含三个类。

比如我们的样式表设置如下:

<style type="text/css">
    .small{width: 500px;height: 40px;font-size: 8px}
    .normal{width: 500px;height: 60px;font-size: 20px}
    .large{width: 500px;height: 100px;font-size: 40px}
    .red{background: red}
    .blue{background: blue}
    .com{border: 1px solid;font-family: 楷体;color:#fff;}
</style>

前台控件设置如下

<body>
    <div class="small red com">small red</div>
    <div class="small blue com">small blue</div>
    <div class="normal red com">normal red</div>
    <div class="normal blue com">normal blue</div>
    <div class="large red com">large red</div>
    <div class="large blue com">large blue</div>
</body>

显示效果

small red
small blue
normal red
normal blue
large red
large blue
posted @ 2020-04-21 16:36  耍人  阅读(162)  评论(0编辑  收藏  举报