初学者对CSS速记的指南

圣,18vs.Dr.这些只是您在编写博客帖子，明信片或文本时可能使用的常见缩写的一些示例。缩写可以帮助您节省空间和时间，并避免重复长单词和短语。

那样的速记也存在编码语言CSS。它可以通过避免冗余来保存开发人员的时间和空间，并使CodeBase查看清洁器。并非所有CSS属性都可以以速记写成，但有些重要的属性可以。

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

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

CSS保证金速记

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

• margin-top
• 边缘右边
• margin-bottom
• 边缘左边

所以我可以在龙手中写下以下声明：

边缘 - 顶级：20px;

边缘 - 右：30px;

边缘：70px;

margin-left: 80 px;

或使用速记边缘属性的一个声明：

边缘：20px 30px 70px 80px;

价值的顺序物质。在上面的示例中，它们从顶部开始并顺时针移动。除了订单外，指定的值数。

• 如果仅定义一个值，则它适用于元素的所有边。
• 如果定义了两个值，那么第一个值表示上下边距，第二个值表示左右边距。
• 如果定义了三个值，则第一个值表示顶部边距，第二个值表示左右，第四个表示底部边距。
• 如果定义了四个值，则它们分别表示顶部，右侧，底部和左侧。

让我们看看下面的例子。

看笔CSS保证金速记由克里斯蒂娜百科（@hubspot.） 在Codepen.。

填充速记

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

• padding-top
• 填充 - 右侧
• padding-bottom
• 填充填充

所以我可以在龙手中写下以下声明：

填充 - 顶部：10px;

填充右：20px;

填充底部：20px;

填充左：40px;

或者在一个声明中使用简单的background属性:

填充：10px 20px 40px;

关于margin属性值的顺序和数量的规则也适用于padding属性。

下面是例子。

看笔CSS填充速记由克里斯蒂娜百科（@hubspot.） 在Codepen.。

请注意引导CSS框架用于余量和填充性能略有不同的速度。例如，余量由“M”和“p”表示。您可以了解更多信息Bootstrap的文档中的符号。

CSS背景速记

后台属性为以下各个属性是：

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

background-color和background-image属性设置元素的背景颜色和图像。你可以使用background-repeat属性来控制图像的重复方式，或者是否重复，background-attachment属性来设置图像是固定的还是滚动的。background-position属性设置背景图像在页面上的位置。

所以我可以在龙手中写下以下声明：

background - color: # CCCCCC;

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

平铺方式:不再重演;

background-attachment:固定;

背景位置:右上角;

或者在一个声明中使用简单的background属性:

背景：#CCCCC URL（https://cdn.pixabay.com/photo/2017/03/15/15/36/15/15/36/15/15/36/15/15/36/15/15/36/15/15/36/15/15/36/15/15/36/15/15/36/15/15/36/720.png）无重复固定右上角;

使用速记属性时，必须按上面的顺序放置值：颜色，图像，重复，附件，位置。但是，您不必定义所有这些属性。如果缺少值，只要值的顺序正确，仍将适当地应用速度。如果要使用另一个后台属性，如背景尺寸属性，则必须单独定义它。

看下面的例子。

看笔CSS背景速记由克里斯蒂娜百科（@hubspot.） 在Codepen.。

CSS边界速记

边境属性是以下各个边境属性的速记：

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

所以我可以在龙手中写下以下声明：

边界宽度：10px;

边界风格：坚实;

边框颜色:# AA88FF;

或者在一个声明中使用简单的background属性:

边框：10px solid＃aa88ff;

必须定义border-style属性的值，否则将无法呈现边框，但宽度和颜色的值是可选的。没有这些值，线将被渲染为黑色和大约3px宽。您还可以使用border-top、border-right、border-bottom或border-left为元素的一侧指定这三个边框属性。

让我们看看下面的例子。

看笔CSS边境速记由克里斯蒂娜百科（@hubspot.） 在Codepen.。

CSS字体速记

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

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

font-style属性指定文本的样式;它可以是正常的，斜体的，斜体的。font-weight指定文本的权重，可以有以下任意值:普通、粗体、粗体、轻体或100-900。通过使用font-variant属性，您可以将文本设置为以小大写字体显示，以便所有小写字母将被转换为大写字母，但以较小的字体大小显示。

你可以使用字体大小属性使用关键字，长度值或百分比设置文本大小。或者您可以设置Line-Height属性。最后，使用Font-Family属性，您可以在浏览器不支持您的首选时定义多个字体。建议您指定首先您想要的家庭字体的名称，并以“SAN-SERIF”或“FURSIVE”等通用姓氏结尾。

我可以在龙手中编写以下声明：

字体风格：斜;

字体重量：400;

FONT-VARIANT：小帽;

字体大小：24px;

Font-Family：Times，Serif;

或者在一个声明中使用简单的background属性:

字体:斜体400小楷24px Times, serif;

必须指定font-size和font-family属性的值，否则在某些浏览器中可能无法显示简写。如果没有为font-weight、font-style或font-variant指定值，那么它们将默认为normal。

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

让我们看看下面的例子。

看笔CSS字体速记由克里斯蒂娜百科（@hubspot.） 在Codepen.。

CSS动画速记

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

• 动画持续时间
• animation-name
• 动画延迟
• 动画方向
• animation-fill-mode
• 动画迭代计数
• 动画播放状态
• 动画 - 时序功能

animation-duration属性(指定动画序列的时间长度)和animation-name属性(指定动画类型)的值是必需的。如果没有指定其他属性，那么它们将被设置为默认值。下面简要介绍一下每个属性的作用。

使用动画延迟属性，您可以使用毫秒或秒开始动画，以及正面或负值来指定。动画方向属性定义动画的方向。使用动画填充模式函数，您可以在动画播放之前或之后应用应用的动画样式。动画迭代-count属性指定动画将播放的次数。使用Animation-Play状态属性，您可以暂停并恢复动画序列。最后，动画 - 时序函数设置动画的速度。

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

我可以在龙手中编写以下声明：

动画持续时间：5s;

动画名称：示例;

动画延迟：2S;

动画方向：替代;

animation-fill-mode:正常;

动画 - 迭代计数：无限;

动画播放状态：跑步;

动画时序 - 功能：易燃;

或使用速记背景属性的一个声明。注意：动画填充模式和动画播放状态属性设置为其默认值，以便我将它们留出下面的速记：

动画：5S示例2S替代无限易燃;

让我们看看下面的例子。

看笔CSS动画速记由克里斯蒂娜百科（@hubspot.） 在Codepen.。

CSS过渡速记

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

• 过渡财产
• 过渡持续时间
• transition-timing-function
• 过渡延迟

这些属性类似于上述动画属性。转换延迟属性指定转换效果开始时。Transition-Duration属性指定转换效果完成的时间长度。Transition-属性指定转换效果的CSS属性的名称。因此，例如，如果此属性设置为“宽度”，则当用户悬停在元素上时，将发生转换效果，并且其宽度开始更改。最后，转换定时函数集到过渡效果的步伐。

如果您想知道何时使用CSS动画或转换属性，请退房CSS动画与转换之间的主要区别。

我可以在龙手中编写以下声明：

过渡性：背景，颜色;

transition-duration: 1;

transition-timing-function:打发走;

transition-delay: 60 ms;

或者在一个声明中使用简单的background属性:

过渡:背景色1s ease-out 60ms;

让我们看看下面的例子。

看笔CSS速度过渡由克里斯蒂娜百科（@hubspot.） 在Codepen.。

Flex CSS速记

flex属性是以下单个属性的简写:

• flex-grow
• Flex-Shrink.
• 弯曲基础

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

我可以在龙手中编写以下声明：

flex-grow: 1;

Flex-Shrink：1;

弯曲基础：1EM;

或者在一个声明中使用简单的background属性:

Flex：1 1 1 em;

flex属性可以使用一个、两个或三个值来指定。关于值的数量及其顺序的规则比关于margin或padding属性的规则要稍微复杂一些。

• 如果有一个值，它可以是一个数字或关键字来设置flex-grow属性。假定flex-shrink属性的值为1,flex-basis属性的值为0。
• 如果有两个值，则第一个必须是要设置Flex-Grow属性的数字。第二个必须是要设置Flex-Chrink属性的数字或Flex-Caperity的宽度值。两个值语法
• 如果有三个值，那么第一个必须是Flex-Grow属性的数字，第二个是Flex-Shrink属性的第二个数字，以及Flex-Basit属性的第三个值。

你可以通过阅读了解更多关于flex属性的信息这是FlexBox，CSS网格和Bootstrap之间的区别。

让我们来看看下面的一个例子。

看笔CSS Flex速记由克里斯蒂娜百科（@hubspot.） 在Codepen.。

速记中的编码

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