CSS速记的初学者指南

圣月1日博士这些只是您在撰写博客文章，明信片或文本时可能会使用的常见缩写的一些示例。缩写可以帮助您节省空间和时间，并避免重复长词和短语。

这样的速记也存在于编码语言CSS。它可以节省开发人员的时间和空间，并通过避免冗余使代码库看起来更加干净。并非所有CSS属性都可以用速记书写，但是有些重要的属性可以。

在这篇文章中，我们将定义CSS速记是什么，然后查看如何使用不同的速记属性。

除了CSS边框属性外，边缘，填充，背景，字体，动画，过渡和Flex属性都具有速记。让我们仔细看看下面的这些速记属性。

CSS保证金速记

保证金属性是以下各个属性的速记：

• 保证金顶
• 边缘权利
• 边缘底
• 边缘左

因此，我可以在Longhand中写下以下声明：

保证金顶：20px;

边缘右：30px;

保证金底：70px;

左键：80px;

或使用速记保证金的一份声明中：

保证金：20px 30px 70px 80px;

值的顺序很重要。在上面的示例中，它们从顶部开始并顺时针移动。除顺序外，还指定事项的值数量。

• 如果仅定义一个值，则适用于元素的所有侧面。
• 如果定义了两个值，则第一个值代表顶部和底部边缘，第二个值表示右侧和左边缘。
• 如果定义了三个值，则第一个值代表最高边缘，第二个值表示左和右，而第四个则表示底部边缘。
• 如果定义了四个值，它们分别表示顶部，右，底部和左侧。

让我们看看下面的示例。

看到笔CSS保证金速记克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

填充速记

这填充属性是以下各个属性的速记：

• 填充
• 填充权
• 填充底
• 左衬里

因此，我可以在Longhand中写下以下声明：

填充：10px;

垫右：20px;

填充底：20px;

左衬里：40px;

或使用速记背景属性的一份声明中：

填充：10px 20px 40px;

关于保证金属性的顺序和值数量的规则也适用于填充属性。

这是下面的示例。

看到笔CSS填充速记克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

请注意Bootstrap CSS框架具有边缘和填充性能的速记略有不同。例如，边距由“ M”表示，填充为“ p”。您可以了解更多有关Bootstrap文档中的符号。

CSS背景速记

背景属性是以下各个属性的速记：

• 背景颜色
• 背景图片
• 背景重复
• 背景 - 附件
• 背景位置

背景色和背景图像属性设置了元素的背景颜色和图像。您可以使用背景重复属性来控制图像的重复方式，或者是否是完全重复的，以及为设置图像固定还是滚动的背景属性。背景位置属性设置了背景图像位于页面上的位置。

因此，我可以在Longhand中写下以下声明：

背景色：#cccccc;

背景图：URL（https://cdn.pixabay.com/photo/2017/03/15/15/15/15/36/outline-2146544_960_720.png）;

背景重复：无重复；

背景 - 固定；

背景位置：右上角；

或使用速记背景属性的一份声明中：

背景：#CCCCCC url（https://cdn.pixabay.com/photo/2017/03/15/15/15/15/15/15/15/15/36/outline-2146544_960_720.png）no-repeat固定固定的右上方；

使用速记属性时，您必须将值放在上面的顺序中：颜色，图像，重复，附件，位置。不过，您不必定义所有这些属性。如果缺少一个值，只要值正确，速记仍将正确应用。如果您想使用另一个背景属性，例如背景大小属性，则必须单独定义它。

查看下面的示例。

看到笔CSS背景速记克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

CSS边境速记

边境财产是以下各个边界财产的速记：

• 边缘宽度
• 边界风格
• 边框颜色

因此，我可以在Longhand中写下以下声明：

边缘宽度：10px;

边界风格：固体；

边界色：＃aa88ff;

或使用速记背景属性的一份声明中：

边界：10px实心＃AA88FF;

必须定义边框式属性的值或边框不会呈现，但是宽度和颜色的值是可选的。没有这些值，该线将呈现为黑色和约3px宽。您还可以通过使用边框，边框，边框底或边界左侧指定元素的一侧的这三个边界属性。

让我们看看下面的示例。

看到笔CSS边境速记克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

CSS字体速记

这字体属性是以下各个属性的速记：

• 字体样式
• 字体重量
• 字体变化
• 字体大小 /线路高
• 字体系列

字体式属性指定文本的样式；它可能是正常的，斜体的，倾斜的。字体重量指定文本的重量，并且可以具有以下任何值：正常，大胆，更轻，更轻或100-900。使用字体变体属性，您可以将文本设置为以小型字体显示，以便将所有小写字母转换为大写字母，但以较小的字体大小出现。

您可以使用字体大小属性用关键字，长度值或百分比设置文本大小。或者，您可以改为设置行高属性。最后，使用字体家庭属性，您可以定义多个字体，以防浏览器不支持您的首选。建议您首先指定想要的家庭字体的名称，并以“ sans-serif”或“草书”之类的通用姓氏结尾。

我可以在Longhand中写下以下声明：

字体风格：斜；

字体重量：400;

字体变化：小帽子；

字体大小：24px;

字体家庭：时代，衬线；

或使用速记背景属性的一份声明中：

字体：倾斜400个小帽24倍，衬线；

必须指定字体大小和字体家庭属性的值，或者速记可能不会在某些浏览器中呈现。如果未针对字体重量，字体式或字体变化指定值，则它们将默认为正常。

您应该声明字体大小（和/或线路高）的值，并按照上述顺序为font。否则，该订单无关紧要。

让我们看看下面的示例。

看到笔CSS字体速记克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

CSS动画速记

动画属性是以下各个属性的速记：

• 动画效果
• 动画名称
• 动画延迟
• 动画方向
• 动画填充模式
• 动画识别计数
• 动画游戏状态
• 动画态度功能

需要指定动画序列的时间长度的动画效率属性的值，并且需要指定动画类型的动画名称属性。如果未指定其他属性，则将它们设置为默认值。以下简要介绍了每个属性的作用。

使用动画 - 延迟属性，您可以使用毫秒或秒以及正值或负值来指定动画何时启动，使用毫秒或秒。动画方向属性定义了动画的方向。使用动画填充模式功能，您可以在动画播放之前或之后使用动画样式。动画材料计数属性指定动画播放的次数。使用动画播放状态属性，您可以暂停并恢复动画序列。最后，动画定时功能设定了动画的节奏。

要了解有关这些属性及其可能值的更多信息，请查看CSS动画的最终指南。

我可以在Longhand中写下以下声明：

动画效果：5s;

动画名称：示例;

动画 - 赛：2s;

动画方向：替代；

动画填充模式：正常；

动画题计：无限；

动画播放状态：跑步；

动画态度功能：轻松脱颖而出；

或使用速记背景属性在一份声明中。注意：动画填充模式和动画播放状态属性已设置为默认值，因此我将其排除在下面的速记之外：

动画：5s示例2S替代无限的轻松脱离；

让我们看看下面的示例。

看到笔CSS动画速记克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

CSS过渡速记

过渡属性是以下各个属性的速记：

• 过渡范围
• 过渡
• 过渡态度功能
• 过渡延迟

这些属性类似于上述动画属性。过渡 - 延迟属性指定何时开始过渡效应。过渡 - 持续性属性指定了完成过渡效果完成的时间长度。过渡范围指定过渡效果的CSS属性名称。因此，例如，如果将此属性设置为“宽度”，那么当用户徘徊在元素上并且其宽度开始变化时，将发生过渡效果。最后，过渡 - 定时功能设定了过渡效应的速度。

如果您想知道何时使用CSS动画或过渡属性，请查看CSS动画与过渡之间的主要区别。

我可以在Longhand中写下以下声明：

过渡范围：背景，颜色；

过渡 -  1s；

过渡态度功能：易于出现；

过渡 - 延迟：60ms；

或使用速记背景属性的一份声明中：

过渡：背景颜色1S易于省60ms；

让我们看看下面的示例。

看到笔CSS过渡速记克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

CSS弹性速记

Flex属性是以下各个属性的速记：

• 屈曲生长
• 屈曲
• 弹性基础

使用Flex Grow属性，您可以指定弹性项目相对于其他Flex项目或Flex容器中的可用空间的生长多少。或者，您可以指定Flex项目以使用Flex-Shrink属性收缩。Flex-BASIS属性设置了Flex项目的初始大小，该项目可以是百分比或长度单元。

我可以在Longhand中写下以下声明：

柔性增长：1;

屈曲：1;

弹性基础：1EM；

或使用速记背景属性的一份声明中：

弹性：1 1 1em;

可以使用一个，两个或三个值指定Flex属性。关于值及其订单数量的规则比保证金或填充属性的规则要棘手。

• 如果有一个值，则可以是设置Flex Grow属性的数字或关键字。假定Flex-Shrink属性的值为1，并且假定Flex-Basis属性的值为0。
• 如果有两个值，则必须是设置Flex Grow属性的数字。第二个必须是设置Flex-Shrink属性的数字或Flex-Basis属性的宽度值。两值语法
• 如果有三个值，则第一个必须是Flex Grow属性的数字，第二个数字是Flex-Shrink属性的第二个数字，而第三个数字是Flex-Basis属性的第三个值。

您可以通过阅读了解更多有关Flex属性的信息这是Flexbox，CSS Grid和Bootstrap之间的区别。

让我们看下面的一个示例。

看到笔CSS弹性速记克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

用速记编码

使用CSS速记可以帮助您节省时间和空间，并使代码库看起来更干净。虽然有一些关于您定义的值的顺序和数量的规则，但您可以通过一些练习来掌握它们。