CSS代码缩写，占用更少的带宽

曾经终败给现在 2022-06-14 02:23 142阅读 0赞

## 1 盒模型代码简写 ##

还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;

3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

注意：padding、border的缩写方法和margin是一致的。

## 2 颜色值缩写 ##

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：

p{color:#000000;}

可以缩写为：

p{color: #000;}

例子2：

p{color: #336699;}

可以缩写为：

p{color: #369;}

## 3 字体缩写 ##

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{
        font-style:italic;
        font-variant:small-caps; 
        font-weight:bold; 
        font-size:12px; 
        line-height:1.5em; 
        font-family:"宋体",sans-serif;
    }

这么多行的代码其实可以缩写为一句：

body{
        font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
    }

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
        font:12px/1.5em  "宋体",sans-serif;
    }

只是有字号、行间距、中文字体、英文字体设置。

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关关于3db带宽

dB带宽指幅值等于最大值的二分之根号二倍时对应的频带宽度。 **幅值的平方即为功率**，平方后变为1/2倍，在**对数坐标中就是-3dB的位置**了，也就是**半功率点...

爱被打了一巴掌/ 2024年04月19日 14:18/ 0 赞/ 66 阅读

相关 pcie总线带宽

总线带宽简介在计算机系统中，总线的作用就好比是人体中的神经系统，它承担的是所有数据传输的职责，而各个子系统间都必须藉由总线才能通讯，例如，CPU和北桥间有前端总线、北桥

矫情吗；*/ 2023年06月18日 15:55/ 0 赞/ 29 阅读

相关 mysql游标少循环_掌握更少的后卫和循环

mysql游标少循环 In the [previous article][] we learned the basics of the Less mixin guards a

素颜马尾好姑娘i/ 2022年12月03日 01:54/ 0 赞/ 172 阅读

相关 Editplus 代码自动完成代码片段代码缩写

\T=ll ob\_start(); echo "<pre>"; print\_r(^!); echo "</pre>"; $a=ob\_get\_contents(

布满荆棘的人生/ 2022年09月30日 07:05/ 0 赞/ 199 阅读

相关 Rust更适合经验较少的程序员？

随着 Rust被亚马逊、谷歌等大厂青睐，越来越多的开发者加入学习大军，但接触之后，不少人纷纷嗟叹，Rust 太难了。在2020年Rust调查报告中，当被问及为什么会停止使用Ru

我就是我/ 2022年09月14日 13:28/ 0 赞/ 185 阅读

相关 Carson带你学数据结构：堆排序，内存占用最少的排序算法

![e42c52b9af8d79486a0f3cd0e50df7b7.png][] -------------------- 目录 ![示意图][d5dc9caf6b

比眉伴天荒/ 2022年08月28日 05:41/ 0 赞/ 138 阅读

相关 CSS代码缩写，占用更少的带宽

1 盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具

曾经终败给现在/ 2022年06月14日 02:23/ 0 赞/ 143 阅读

相关浅谈CSS中的缩写

盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应

约定不等于承诺〃/ 2022年06月12日 01:19/ 0 赞/ 239 阅读

相关信息图：究竟什么在占用我们的带宽

![http://www.gbtags.com/gb/networks/uploadimg/02cc598f-1821-4efa-ba08-1a4a3ac5eb00.jpg][

超、凢脫俗/ 2022年05月26日 08:38/ 0 赞/ 146 阅读

相关 network 网络带宽

网络[带宽][Link 1]是指在单位时间（一般指的是1秒钟）内能传输的数据量。网络和高速公路类似，带宽越大，就类似高速公路的车道越多，其通行能力越强。网络带宽作为衡量网络特征

ゝ一纸荒年。/ 2022年05月19日 01:54/ 0 赞/ 210 阅读