6 个 CSS 简写属性，助您提升 Web 应用程序

我为什么要关心简写属性？🎈

什么是简写属性？

CSS 背景速记

CSS 边框简写

CSS 字体速记

CSS 插入简写

CSS 填充简写

CSS 边距简写

结论

我为什么要关心简写属性？🎈

CSS 是一种用于描述网页外观的语言。使用 CSS，我们可以设置 HTML 页面中每个元素的位置、颜色、字体和布局。🌈

在这篇博文中，我将分享一些改进 CSS 代码和 Web 应用程序性能的技巧。⚠️

优化 CSS 文件的方法有很多种。编写 CSS 代码时，你应该注意的一件事就是尽量减少代码行数。💥

有几个原因需要关心代码行数😲：
👉提高代码可读性
👉提高网页的加载速度
👉提高搜索引擎的排名（例如谷歌搜索、Bing 等），因为排名取决于应用程序的加载速度和优化级别

减少代码行数的一个有趣技巧如下：

尽可能使用 CSS 简写属性

在这篇博文中，我将向您展示什么是简写属性以及如何使用它们来优化您的 CSS 代码。

感兴趣吗？继续阅读！！！😊💻

什么是简写属性？

简写属性允许您同时设置多个其他 CSS 属性的值。

CSS 支持多种简写属性。本文将介绍最常用的几种。✈️

CSS 背景速记

背景属性div允许您在一行 CSS 中设置 HTML 元素（例如）的不同背景属性。

背景是以下内容的简写：

• 背景颜色
• 背景图像
• 背景位置
• 背景尺寸
• 背景重复
• 背景原点
• 背景剪辑
• 背景附件

因此，我们可以使用单个属性，而不必为 HTML 元素定义 background-color、background-image、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment。😍

嗯，困惑了吗？😱😕

一张图片胜过千言万语：

这就是诀窍。得益于background速记属性，我们将 8 行 CSS 代码压缩成了一行。

现在让我们想象一个复杂的 Web 应用程序，其中包含数十个 CSS 文件，每个文件有数千行。😱

毫无疑问，这会让您的 Web 应用程序的文件更小、代码更简洁、加载时间更快。😄

CSS 边框简写

我要向你展示的第二个简写属性是Border。Border 简写用于设置 HTML 元素的边框。

它是以下内容的简写：

• 边框宽度
• 边框样式
• 边框颜色

以下是一个例子：

一次买下三处房产。还不错！！！😏 🔥

CSS 字体速记

字体简写用于设置以下字体属性：

• 字体样式
• 字体变体
• 字体粗细
• 字体大小/行高
• 字体系列

CSS 插入简写

Inset属性与 HTML 元素的定位有关。它是以下内容的简写：

• 顶部
• 正确的
• 底部
• 左边

简单又高效！☺️🌺

CSS 填充简写

填充 (Padding)是一种在元素周围添加空间的方法。更准确地说，它允许你在元素与其边框之间添加空间。

要完整设置 HTML 元素的填充，我们需要设置四个值：

• 顶部填充
• 右填充
• 填充底部
• 左填充

这些值的含义非常直观：

• padding-top是元素与其边框之间的空间
• padding-right是元素与其右边框之间的空间
• padding-bottom是元素与其底部边框之间的空间
• padding-left是元素与其左边框之间的空间

所有这些属性都可以使用padding简写在单个声明中指定。🌻

语法很简单：

padding: <padding-top> <padding-right> <padding-bottom> <padding-left>

以下是一个例子：

CSS 边距简写

Margin属性与 padding 类似。Margin 是元素周围、边框之外的空间。

要指定边距，您需要提供四个不同的值：

• margin-top是元素顶部边框与其他元素之间的空间
• margin-right是元素右边框与其他元素之间的空间
• margin-bottom是元素底部边框与其他元素之间的空间
• 左边距是元素左边框与其他元素之间的空间

语法很简单🌹：

margin: <margin-top> <margin-right> <margin-bottom> <margin-left>

以下是一个例子：

结论

我们已经结束了。🌼我想强调以下几点：

尽可能使用 CSS 简写属性

因为它们有助于减少 CSS 代码行数并提高可读性。

减少 CSS 文件大小也会提高我们网页的加载速度，因为 CSS 文件更小了。这也会提高我们在搜索引擎中的排名，因为搜索引擎算法倾向于奖励优化的网页。🌈 🚀

我希望我能说服你关注 CSS 代码行数。😜

如果您喜欢这篇文章，请考虑在 Twitter 上关注我@cscarpitta94和 dev cscarpitta 😍