CSS代码缩写,占用更少的带宽/字体缩写/盒模型代码简写/颜色值缩写

2024-06-01 04:54:13

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;
}

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

CSS代码缩写,占用更少的带宽/字体缩写/盒模型代码简写/颜色值缩写相关推荐

如何使Xcode占用更少的空间 Xcode占用空间太大解决方法
最近突然发现我的128G SSD硬盘只剩下可怜的8G多,剩下这么少的一点空间连Xcode都无法更新.怎么办呢?如果升级硬盘的话,第一要花钱,毕竟SSD硬盘还是不便宜,第二是升级比较麻烦,要拆机和迁移系 ...
HarmonyOS内存占用,华为HarmonyOS对比EMUI11：内存占用更少系统更流畅
互联网/电商, 互联网/电商,华为HarmonyOS对比EMUI11:内存占用更少系统更流畅华为HarmonyOS对比EMUI11:内存占用更少系统更流畅,华为HarmonyOS对比EMUI11: ...
【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )
文章目录一.Banner 栏测量 1.盒子模型尺寸测量 2.背景测量切图二.Banner 盒子模型代码 1.HTML 标签结构 2.CSS 样式 3.显示效果绘制下图矩形框内容 : 一.Bann ...
数学建模代码速成~赛前一个月~matlab~代码模板~吐血总结~三大模型代码（预测模型、优化模型、评价模型）
目录一.预测模型 1.BP神经网络预测 2.灰色预测 3.拟合插值预测(线性回归) 4.时间序列预测 5.马尔科夫链预测 6.微分方程预测 7.Logistic 模型二.优化模型 1.规划模型(目 ...
数学建模常用方法 | matlab代码 | 二十三种数学建模方法 |2022赛前突击 |模型代码 |比赛比用、简单高效| 分享
为是赛前突击,所以就不过多的介绍理论知识了,直接上案例,matlab代码更加详细例题解析: 公众h:露露IT 目录 1.类比法 2.二分法 3.量纲分析法 4.图论法 5.差分法 6.变分法 7.数 ...
qml 时间控件_Qt6官方最新消息：桌面样式Qt quick Controls 2支持大多控件，委托更少，运行更流畅...
Qt是一个跨平台框架,通常用作图形工具包,它不仅创建CLI应用程序中非常有用.而且它也可以在三种主要的台式机操作系统以及移动操作系统(如Symbian,Nokia Belle,Meego Harmat ...
Qt6官方最新消息：桌面样式Qt quick Controls 2支持大多控件，委托更少，运行更流畅
Qt是一个跨平台框架,通常用作图形工具包,它不仅创建CLI应用程序中非常有用.而且它也可以在三种主要的台式机操作系统以及移动操作系统(如Symbian,Nokia Belle,Meego Harmat ...
常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录从零开始学前端:程序猿小白也可以完全 ...

最新文章

热门文章