CSS样式应该怎么简写缩写整理优化？
admin
2023-04-02 20:03:08
深度了解CSS的前端老鸟应该都知道，CSS样式代码有很多简写缩写方式。比如，定义字体、定义背景等，都可以把CSS代码缩写到一行。CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅读。为了能更好的搞清楚CSS缩写方法，小编收集整理了一些有关CSS简写的参考资料，现在就给大家分享10个常见的CSS简写规则：
</p>
<p>边框的属性如下：</p>
<p>border-width:1px;</p>
<p>border-style:solid</p>
<p>border-color:#000;</p>
<p>可以缩写为一句：1border:1px solid #000;语法 border:width style color;</p>
<p>三、背景(Backgrounds)</p>
<p>背景的属性如下:</p>
<p>background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:00;可以缩写为一句：</p>
<p>background:#f00 url(background.gif) no-repeat fixed 0 0;</p>
<p>语法是background:color image repeat attachment position;</p>
<p>你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：</p>
<p>color: transparent</p>
<p>image: none</p>
<p>repeat: repeat</p>
<p>attachment: scroll</p>
<p>position: 0% 0%</p>
<p>四、字体(fonts)</p>
<p>字体的属性如下：</p>
<p>font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:”Lucida Grande”,sans-serif;</p>
<p>可以缩写为一句：</p>
<p>font:italic small-caps bold 1em/140%”Lucida Grande”,sans-serif;</p>
<p>注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。</p>
<p>五、列表(lists)</p>
<p>取消默认的圆点和序号可以这样写list-style:none;,<br />list的属性如下:</p>
<p>list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);可以缩写为一句：<br />list-style:square inside url(image.gif);六、颜色(Color)</p>
<p>16进制的色彩值，如果每两位的值相同，可以缩写一半。例如：</p>
<p>Aqua: #00ffff ——#0ff<br />Black: #000000 ——#000<br />Blue: #0000ff ——#00f<br />Dark Grey: #666666 ——#666<br />Fuchsia:#ff00ff ——#f0f<br />Light Grey: #cccccc ——#ccc<br />Lime: #00ff00 ——#0f0<br />Orange: #ff6600 ——#f60<br />Red: #ff0000 ——#f00<br />White: #ffffff ——#fff<br />Yellow: #ffff00 ——#ff0</p>
<p>七、属性值为0</p>
<p>书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:</p>
<p>padding:10px 5px 0px 0px;试试这样吧:<br />padding:10px 5px 00 ;八、最后一个分号</p>
<p>最后一个属性值后面分号可以不写，如：</p>
<p>#nav{border-top:4px solid #333;font-style: normal;font-variant:normal;font-weight: normal;}</p>
<p>可以简写成:</p>
<p>#nav{border-top:4px solid #333;font-style: normal;font-variant:normal;font-weight: normal}九、字体粗细(font-weight)</p>
<p>你可能会这样写:</p>
<p>h1{font-weight:bold;}p{font-weight:normal;}</p>
<p>可以简写成:</p>
<p>h1{font-weight:700;}p{font-weight:400;}</p>
<p>十、圆角半径(border-radius)</p>
<p>border-radius是css3中新加入的属性，用来实现圆角边框。</p>
<p>-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;border-bottom-left-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;</p>
<p>可以简写成:</p>
<p>-moz-border-radius:6px 6px 0;-webkit-border-radius:6px 6px 0;border-radius:6px 6px 0;</p>
<p>语法 border-radius:topleft topright bottomright bottomleft</p> <!--end::Text-->
</div>
<!--end::Description-->
<div class=)
相关内容
热门资讯
原创 白...
白宫枪击案的嫌疑人身份曝光，他是一名教师，毕业于加州理工学院，还是一名独立游戏开发者，曾开发一款名为...
王者荣耀魔丸哪吒皮肤什么时候出...
大家好，王者荣耀魔丸哪吒的联动皮肤即将上线游戏，玩家将能够在游戏中体验电影中的魔丸哪吒，众多皮肤特效...
原创 T...
北京时间2026年4月25日，英雄联盟LPL第二赛段将在这一天分别迎来NIP对阵TES、JDG对阵W...
LPL第二赛段：JDG、WBG...
4月25日，LPL第二赛段组内赛将迎来一个超级比赛日，三场焦点战无缝衔接，不仅关乎季后赛席位的归属，...
原创 L...
英雄联盟LPL第二赛段的比赛，于4月4日正式拉开序幕。基于2026年第一赛段的排名，14支队伍将划分...