让CSS可以更加简洁去掉多余代码

发布日期：2017/6/9

    CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。

    网页设计好初是用HTML标记来定义页面文档及格式，例如题目<h1>、段落<p>、表格<table>、链接<a>等，但这些标记不能知足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括javascript、Vbscript等)、支撑动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

    注重：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支撑，有些效果需要更高版本的浏览器支撑。

本篇文章适合css新手学习，对于已经掌握了css的同伙们也可以通过本片文章来复习知识。

作者通过实践，认为在有些情况下css的代码是可以更加简洁的，多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。

精简的代码对于网页是有莫大的益处的，对于浏览者访问速度会有一定的提拔，另外对于搜索引擎也更加可以抓取网页关键内容。废话不说了，下面就看看笔者总结的可以精简的代码:

1.Margin & Padding

例1：

.div {

margin-top:10px;

margin-right: 5px;

margin-bottom:30px;

margin-left:0px;

}

精简子女码如下：

.div { margin:10px 5px 30px 0;})

例2：

.div {

margin-top:10ox;

margin-right:20px;

margin-bottom:0;

margin-left:20px;

}

精简子女码：

.div {

margin:10px 20px 0;

}

例3：

.div {

margin-top:0;

margin-right:auto;

margin-bottom:0;

margin-left:auto;

}

精简子女码：

.div {

margin:0 auto;

}

例4：

.div {

margin-top:50px;

margin-right:50px;

margin-bottom:50px;

margin-left:50px;

}

精简子女码：

.div { margin:50px; }

2.border的缩写

例1：

.div {

border-width:5px;

(thin,thick,medium,set vaule)(default=medium)

border-style:dotted;

(solid,dashed,dotted,double,etc)(default=none)

border-color:blue;

(named,hex,rgb or 0-255)(default=value of elements/elements parent color property)