商业网站开发入门上机指导

技术支持：河北工业大学梦云智软件开发团队

View on GitHub Download .zip

第七节：引用CSS层叠样式表

•

如果你也也像我一样懒的话，相信在前面两个小节中对(相片)盒子进行设置时，书写大量的重复代码的时候。你一定想如何能够减少这样的不必要的重复劳动。

在软件工程的领域中，有一句话是：不造重复的轮子。意思是说，我们不要去写重复的代码。一是这样将带来很多不必要的重复劳动，二是将来哪天这个轮子出问题的时候，由于你造了不止一个。那么改起来就费劲了。

鉴于此，Cascading Style Sheets --- CSS 层叠样式表 出现了。

我们在html文档中，是这样写使用CSS的:

<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    
    <!-- 以下是CSS代码，放到<style>标签中 -->
    <style type="text/css">
        
    </style>
</head>

设置CSS

比如我们可以这样设置一个CSS

    <style type="text/css">
        .left {
            float: left;
        }
    </style>

其中.是固有写法, {}是一对闭合标签, 而标签中的内容就是我们在前面使用到的style中的值。 定义后，我们可以在html这样使用:

    <div class="left">

上述代码与下面的代码完全等价：

    <div style="float: left;">

/WebCourse2017/assets/image/chapter3/34.png

此时，在css中定义的.left就作用于class的属性值为left的盒子上了。

或是，我们选可以这样定义：

    <style type="text/css">
        .photo {
            border-width: 10px; 
            border-style: solid; 
            border-color: #060504
        }
    </style>

然后这样使用:

    <div class="photo">

这和下述代码也是完全等价的：

    <div style="border-width: 10px; 
                border-style: solid; 
                border-color: #060504">

当我们这样使用的时候呢？

    <div class="photo left">

等价于：

    <div style="border-width: 10px; 
                border-style: solid; 
                border-color: #060504;
                float:left;">

是的，我们可以在class属性中，写入多个样式表定义的样式。

代码重构

我们对文档使用css后，重构如下：

<!DOCTYPE html>
<html lang="zh-hans">

<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    
    <!-- 以下是CSS代码，放到<style>标签中 -->
    <style type="text/css">
        /* 这里是样式表中的注释 */
        /* 左浮动 */
        .left {
            float: left;
        }
        
        /* 清除浮动影响 */
        .clear {
            clear: left;
        }
        
        /* 为照片设置统一border */
        .photoBorder {
            border-width: 10px;
            border-style: solid;;
            border-color: #060504;
        }
    </style>
</head>

<body>
    <!-- 画一个大框 -->
    <div>
        <!-- 行1 -->
        <div>
            <!-- 1.1 -->
            <div class="left">
                <!-- 1.1.1 -->
                <div>
                    <!-- 1.1.1.1 -->
                    <div class="left photoBorder"><img src="1.png" /></div>
                    <!-- 1.1.1.2 -->
                    <div class="left photoBorder"><img src="2.png" /></div>
                    <!-- clear -->
                    <div class="clear"></div>
                </div>
                <!-- 1.1.2 -->
                <div class="photoBorder"><img src="3.png" /></div>
            </div>
            <!-- 1.2 -->
            <div class="left">
                <!-- 1.2.1 -->
                <div class="photoBorder"><img src="4.png" /></div>
                <!-- 1.2.2 -->
                <div class="photoBorder"><img src="5.png" /></div>
            </div>
            <!-- 1.3 -->
            <div class="left photoBorder"><img src="6.png" /></div>
            <!-- clear -->
            <div class="clear"></div>
        </div>
        <!-- 行2 -->
        <div>
            <!-- 2.1 -->
            <div class="left photoBorder"><img src="7.png" /></div>
            <!-- 2.2 -->
            <div class="left photoBorder"><img src="8.png" /></div>
            <!-- 2.3 -->
            <div class="left photoBorder"><img src="9.png" /></div>
            <!-- 2.4 -->
            <div class="left photoBorder"><img src="10.png" /></div>
            <!-- clear -->
            <div class="clear"></div>
        </div>
    </div>
</body>

</html>

最终显示效果与上节相同，未发生任何变化。但代码量去降低了一个数量级。没错，我们要的，就是这种效果。