我们在【wǒ men zài】设计CSS时可以【shí kě yǐ】使用css缩写🐯,这样可以减少🤛你CSS文件的🍷大小【dà xiǎo】，而且更【ér qiě gèng】😑加容易阅读和查找【chá zhǎo】🚞。

css缩写的主要规则如下：

margin/padding

通常写法,会遇到以下三种情况

margin-top:1px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;

margin-top:5px;
margin-right:5px;
margin-bottom:5px;
margin-left:5px;

margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;

那么我【nà me wǒ】们进行🥂CSS缩写后会让你【huì ràng nǐ】目惊口【mù jīng kǒu】🤲呆的效果.如下📻

margin:1px 10px 5px 20px;

margin:5px;

margin:0 10px 0 5px;

书写顺序是【xù shì】😧 margin:上【shàng】 右 下📴 左 ,

在CSS中.值为0的时候【de shí hòu】🐮可以将【kě yǐ jiāng】单位省略不写😨就像第【jiù xiàng dì】三种写💭法一样.

其中padding和【hé】🍪margin基本是【jī běn shì】一样的写法🍛

怎么样.是不是大吃一惊【jīng】㊙.是的⛺.CSS缩写就【suō xiě jiù】是这样做到的【zuò dào de】🎤.

border

通常写【tōng cháng xiě】法🎎:

border-width:1px;
border-style:solid;
border-color:#000;

缩写后:

border:1px solid #000;

书写顺序:border:宽度【kuān dù】 边框线👫种类【zhǒng lèi】⛲ 颜色;

Background

通常写法:

background-image:url(bg.png);
background-color:#00f;
background-repeat:no-repeat;
background-position:0 0;

缩写后:

background:url(bg.png) #00f no-repeat 0 0;

书写顺⛄序【xù】:background:背景图【bèi jǐng tú】🦇片 颜色🈚 重复类型  定位【dìng wèi】;
         background:image   color  repeat   position;

Font

通常写🐤法【fǎ】:

font-family:"宋体";
font-size:2em;
line-height:180%;
font-weight:800;


缩写后【suō xiě hòu】🌝：

font:800 2em/180% "宋体【sòng tǐ】⛎";

书写顺序:font:加粗【jiā cū】 字体【zì tǐ】大💕小【xiǎo】/行高🐮 字体【zì tǐ】😀;

在使用【zài shǐ yòng】Font缩写时【suō xiě shí】至少要有 字体【zì tǐ】大⛰小【xiǎo】和字体【zì tǐ】📹这两项🍾

font:字体【zì tǐ】大⛰小【xiǎo】 字体【zì tǐ】📹;

Color

通常写法:

color:#000000;
color:#001188;

缩写后:

color:#000;
color:#018;

16进制的🎫色彩值👅时🔼，如果每【rú guǒ měi】两位的值相同【zhí xiàng tóng】，可以缩写一个【xiě yī gè】