常用CSS样式缩写语法

<h2>缩写CSS样式的好处：</h2>
对于浏览者而言，缩写可以减少CSS代码量，进而减少CSS文件体积，有利于访问者更快的打开网页；对于开发者而言，CSS代码量少，阅读简洁明了；对于网站服务器而言，在相同带宽下可以承受更多的访问请求。
<h2>常用CSS样式表缩写语法总结</h2>
<span style=“color: #e91e63;font-size: 20px;”><strong>盒尺寸(padding、margin)</strong></span>
常见margin与padding边距缩写margin外边距与padding内边距是制作布局时常用到的两个属性，在传统写法上，我们通常使用以下形式：
<pre class=“line-numbers language-css”><code class=“language-css”>.box{
width:300px;
height: 300px;
background: #eee;
margin-left: 20px;
margin-right: 30px;
margin-top: 40px;
margin-bottom: 50px;
}</code></pre>
padding也是如此，而在css缩写中，可以使用缩写的编写方式，margin及padding的缩写在默认状态下需要提供4个参数，按顺序分别为上、右、下、左。例：
<pre class=“line-numbers language-css”><code class=“language-css”>.box{
width:300px;
height: 300px;
background: #eee;
/外边距连写/
margin:20px 30px 40px 50px;
}</code></pre>
<span style=“color: #ff0000;”><strong id=“margin”>注意：margin及padding的缩写比较特殊一点，方便的记忆方法是顺时针，上右下左。
通常有下面四种书写方法(这里拿margin做例子):</strong></span>
<pre class=“line-numbers language-css”><code class=“language-css”>/顺序/
/从上开始，顺时针转；margin:上 右 下 左/
/上下左右都相等: margin: 5px(上下左右)/
margin: 5px;
/上下相等, 左右相等: margin: 5px(上下) 15px(左右)/
margin: 5px 15px 5px 15px;
/上下不等，左右相等： margin: 5px(上) 10px(左右) 20px(下)/
margin: 5px 10px 20px 10px
/上下左右都不相等: margin: 20px（上） 30px（右） 40px（下） 50px（左）/
Margin: 20px 30px 40px 50px;
</code></pre>
<br >
<span style=“color: #e91e63;font-size: 20px;”><strong>边框(border)</strong></span>
border边框缩写border对象本身是一个非常复杂的对象，包含了四条边的不同宽度、不同颜色及不同样式，所以border对象提供的缩写形式相对来说也要丰富很多，不仅可以对整个对象进行border缩写，也可以对单独某一个边进行缩写，
<strong>对于整个对象而言，可以使用如下的格式进行缩写： </strong>
<pre class=“line-numbers language-css”><code class=“language-css”>border:border-width border-style border-color </code></pre>
<strong>代码示例：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>.box{border:5px solid red;}</code></pre>
<strong id=“border”>通过上面的属性，我们就可以把样式针对整个对象或者每一个边都设置不同的样式</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>
.box{
width: 300px;
height: 390px;
background: #999;
border-top-style: solid; /线型/
border-top-color: #ff0000; /边框颜色/
border-top-width: 5px; /宽度/
/边框属性连写/
border-top: #ff0000 solid 5px;
/四个边框值相同的写法/
border:12px solid red;
/单独边框并且设置不同的样式/
border-top: red solid 5px;
border-right: 12px dotted #ffc0cb;
border-buttom: 12px dotted #191970;
border-left: 5px dashed #00ffff;
}
</code></pre>
<span style=“color: #ff0000;”><strong>注意：border缩写样式没有顺序要求，但线型(border-style)为必写项。</strong></span>
<br >
除了对于边框整体及4个边单独的缩写之外，border还为我们提供了对于
border-style、border-width以及border-color的单独缩写方式，语法格式如下：
<pre class=“line-numbers language-css”><code class=“language-css”>border-width:top right bottom left;
border-color:top right bottom left;
border-style:top right bottom left; </code></pre>
<strong>代码示例： </strong>
<pre class=“line-numbers language-css”><code class=“language-css”>.box{
border-width:1px 2px 3px 4px;
border-color:blue white red green;
border-style:solid dashed;
}</code></pre>
<br >
<span style=“color: #e91e63;font-size: 20px;”><strong>背景(Background)</strong></span>
<strong>背景的属性如下：</strong>
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
<br >
<strong>背景缩写用于针对背景控制的相关属性进行缩写，其语法格式如下：</strong>
background:background-color background-image background-repeat background-attachment background-position
<strong>根据以上语法，可以缩写为一句：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>.box{background:#f00 url(background.gif) no-repeat fixed 0 0;} </code></pre>
<span style=“color: #ff0000;”><strong>注意：background属性连写的时候没有顺序要求，但url为必写项。</strong></span>
<br >
color颜色缩写css对于颜色代码也提供了简单的缩写模式，主要针对16进制颜色代码。
16进制代码传统写法一般使用#ABCDEF，ABCDEF分别代表6个 16进制数，css的颜色缩写必须符合一定要求，
当A与B数字相同，C与D数字相同，E与F数字相同时，可以使用颜色缩写，
<strong>例：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>
p{color：#ffffff；}
/* 可以缩写为*/
p{color：#fff；}
p{color：#2255bb；}
/* 可以缩写为*/
p{color：#25b；}
</code></pre>
<br >
<span style=“color: #e91e63;font-size: 20px;”><strong>字体(fonts)</strong></span>
<strong>字体的属性如下：</strong>
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:“Lucida Grande”,sans-serif;
<br >
font字体缩写字体缩写是针对字体样式的缩写形式，包含字体、字号等属性，使用方法如下：
<pre class=“line-numbers language-css”><code class=“language-css”>font:font-style font-variant font-weight font-size line-height font-family </code></pre>
<strong>根据以上语法，可以缩写为一句：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;</code></pre>
<span style=“color: #ff0000;”><strong>注意：font:后边写属性的值。一定按照书写顺序。文本属性连写文字大小(font-size)和字体(font-family)为必写项。</strong></span>
<br >
<span style=“color: #e91e63;font-size: 20px;”><strong>列表(lists)</strong></span>
取消默认的圆点和序号可以这样写list-style:none;,
<strong>list的属性如下:</strong>
list-style-type:circle;
list-style-position:inside;
list-style-image:url(image.gif);
<br >
list列表缩写list缩写是针对list-style-type、list-style-position等用于ul的list属性，
<strong>语法格式如下：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>list-style:list-style-type list-style-position list-style-image </code></pre>
<strong>代码示例：</strong>
根据以上语法，可以缩写为一句
<pre class=“line-numbers language-css”><code class=“language-css”>ul {list-style:disc outside none;} </code></pre>
<br >
<span style=“color: #009688;font-size: 16px;”><strong>这里顺便提一句，有很多样式都涉及到了四边的问题，这里统一说明。
四边的简写一般如下：selector {property: value}
value：top | right | bottom | left </strong></span>
<span style=“color: #e91e63;font-size: 16px;”>具体可以参考上面的<a href=“#margin” style=“color: #e91e63;font-size: 16px;”>margin</a>和<a href=“#border” style=“color: #e91e63;font-size: 16px;”>border</a>属性！(←这里的<a href=“#margin” style=“color: #e91e63;font-size: 16px;”>margin</a>和<a href=“#border” style=“color: #e91e63;font-size: 16px;”>border</a>属性可以点击噢(〃‘▽’〃))</strong></span>
<br >
<span style=“color: #ab47bc;font-size: 20px;”><strong>最后，偷偷告诉大家，学好css最需求的就是多看多写多实践，
那样才能学的好，记得住。٩(๑❛︶❛๑)۶</strong></span>