当前位置：网站首页 >> 建站知识 >> 网站技术 >>


网页制作中常用的一些DIV+CSS代码简写的技巧

来源：郑州凯讯网站    发布人：郑州凯讯公司    发布日期：2015-02-12】

在网站建设的网页编码中，DIV+CSS网页制作技术是非常常用的技术，熟练掌握DIV+CSS技术对网页制作可以说是非常重要。使用DIV+CSS做网页时当前的主流技术，对网站有很多好处，比如可以减小网页体积并加快网页的打开速度、有利于搜索引擎抓取、同时也方便网站改版等等。在使用DIV+CSS的时候也有很多技巧，其中合理使用DIV+CSS的简写技巧可以让代码看起来更加简洁明了，提高网页编码效率。下面，郑州网站建设专家凯讯公司整理了一些关于DIV+CSS网页制作中的代码简写技巧，在下面列出来，可供网站建设技术人员在网站制作时参考使用。

1、border和margin的简写：
例如：div{
border-top:1px solid #AAAAAA;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
border-bottom:1px solid #AAAAAA;
}
上面的代码可以简写为：div{border:1px solid #cccccc}

例如：div{
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
上面的代码可以简写为：div{margin:5px 10px 15px 20px}

2、同一个标签可以指定多个class属性：
当一个标签具有多重class属性时，我们可以将class属性并列起来，来达到简写的目的，而没有必要重新创建一个具有多重属性的class。比如，这里有两个class属性a和b：
CSS：
.a{maigin-left:20px;}
.b{display:block;}

而如果一个span标签同事具备a 和 b 的属性时，我们可以这样写：<span class=“a b”></span>，这样span标签就同时具备了a和b两种属性了。没必要创建一个.c{maigin-left:20px; display:block;}属性，并将c的 class属性指定给span标签。注意：多个规则之间要用空格分开。

3、CSS的最近优先作用规则：
如果对一个html元素定义了多次样式，则以最近的一次为优先起作用，最近一次的样式将覆盖先前的其他样式。
例如：
span{color:red}
.blue{color:blue}
.yellow{color:yellow}

则这里的代码：<span class="blue" style="color:green;">此处显示为绿色</span>，代码中的文字显示为绿色，因为style="color:green;"为最近定义的样式，green颜色将覆盖blue颜色。

再如代码：<span class="blue yellow">此处显示为黄色</span>，虽然在class里同时指定了两个属性，然而这两个属性都是作用于color的，所以二者不能同时其作用，只有最近的yellow起了作用。

一般的，css的优先级顺序如下：下面几个css优先顺序(优先级由上至下递减)：
高优先级：元素style设定
中优先级：head区<style></style>中的设定
低优先级：外部引用css文件

这些优先级中同时又遵循最近作用原则。知道了这些，我们在写css代码时，就没必要再重复无用的代码了，只需要简写即可。

4、ul和li在定义样式时也可以减少class的定义：
例如：html代码如下：
.myclass{line-height:20px;}

<div id="div1">
<ul>
<li class="myclass">11111</li>
<li class="myclass">22222</li>
<li class="myclass">33333</li>
<li class="myclass">44444</li>
</ul>
</div>

上面的代码可以简写为如下代码：
#div1 ul li{line-height:20px;}

<div id="div1">
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</div>

5、相同样式的各种html元素可以并列起来，而不必每个元素都进行定义：

如 h1{font-size:16px;font-weight:bold}
h2{font-size:16px;font-weight:bold}
h3{font-size:16px;font-weight:bold}
div{font-size:16px;font-weight:bold}

以上h1、h2、h3、div等几个元素的样式都相同，那么我们可以合并他们，上面的代码可以简写为如下代码：
h1,h2,h3,div{font-size:16px;font-weight:bold}