CSS 代码冗余多了, 项目代码看起来就像一个 "粽子", 看着不舒服. CSS 为我们提供了几个简写属性, 利用好他们, 可以提高代码可读性, 减少代码体积, 有着不小的好处.
● border 属性
● margin,padding 属性
● background 属性
● font 属性
● border-radius 属性
定义
简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性. 使用简写属性, 可以编写更简洁, 更具可读性的样式表, 节省时间和精力.(推荐学习: CSS 视频教程 https://www.html.cn/css/ )
CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起.
1,Border 属性
对于 border 来说, 宽度, 颜色和类型是可以被简写到一个声明里的. 比如:
- border-width: 1px;
- border-style: solid;
- border-color: #fff;
可以简写成:
border: 1px solid #000;
2,Margin 和 Padding 属性
margin 和 padding 值的简写版本类似. 請看下面的 CSS 声明:
- margin-top: 10px;
- margin-right: 5px;
- margin-bottom: 10px;
- margin-left: 5px;
- padding-top: 10px;
- padding-right: 5px;
- padding-bottom: 10px;
- padding-left: 5px;
和下面的声明是一样的 (注意, 值是从 top 顺时针开始的: top,right,bottom, 接着是 left)
- margin: 10px 5px 10px 5px;
- padding: 10px 5px 10px 5px;
3,Background 属性
- background-color: #000;
- background-image: url(images/bg.gif);
- background-repeat: no-repeat;
- background-position: top right;
可以简写成一行声明:
background: #000 url(images/bg.gif) no-repeat top right;
4,Font 属性
- font-style: italic;
- font-weight: bold;
- font-size: .8em;
- line-height: 1.2;
- font-family: Arial, sans-serif;
可以简写成下面的:
font: italic bold .8em/1.2 Arial, sans-serif;
5,border-radius 属性
- border-top-left-radius: 1em 5em;
- border-top-right-radius: 1em 5em;
- border-bottom-right-radius: 1em 5em;
- border-bottom-left-radius: 1em 5em;
可以简写成下面的:
border-radius: 1em/5em;
来源: http://www.css88.com/qa/css3/15539.html