速记属性是用来同时给多个属性赋值的属性。例如，font是一种简写属性，可用于设置各种字体属性。它指定字体样式、字体粗细、字体大小、字体高度和字体系列。字体：italicbold18px/1.2"Helvetica","Arial",sans-serif;还有如下属性：background是多个背景属性的简写属性：background-color、background-image、background-size、background-repeat、background-position、background-origin、background-chip、background-attachment。border是border-width、border-style和border-color的简写属性，这些属性也是简写属性。border-width是上、右、下、左四种边框宽度的简写属性。速记属性可以使代码简洁明了，但也隐藏了一些奇怪的行为。速记属性将默默地覆盖其他样式。大多数速记属性可以省略一些值，只指定我们关心的值。但请注意，这样做仍然会设置省略的值，即它们将被隐式设置为初始值。这会默默地覆盖其他地方定义的样式。例如，如果在为页面标题使用速记属性字体时省略字体粗细，则字体粗细将设置为正常。shorthand属性会将省略的值设置为其初始值，并添加以下CSS：h1{font-weight:bold;}.title{font:32pxHelvetica,Arial,sans-serif;}乍一看，可能会觉得将显示普通字体而不是粗体。这些样式还会覆盖从祖先元素继承的字体样式。在所有速记属性中，font的问题最严重，因为它设置了太多的属性值。因此，避免使用元素一般样式之外的字体。当然，其他速记属性也可能遇到同样的问题，所以要小心。理解速记值的顺序速记属性试图适应指定属性值的顺序。可以设置border:1pxsolidblack或border:black1pxsolid，两者都会生效。这是因为浏览器知道什么类型的值对应于宽度、颜色和边框样式。但是有许多属性的值不明确。在这种情况下，值的顺序很关键。了解这些速记属性的顺序很重要。1.Top,Right,Bottom,Left当遇到像margin,padding,border属性这样给一个元素的四个边分别指定值的属性时，开发者很容易搞错这些的顺序速记属性。这些属性的值是按顺时针顺序排列的，从顶部开始。记住顺序，以免出错。它的记忆公式是TRouBLe：top（上）、right（右）、bottom（下）、left（左）。使用此公式设置元素四个边的填充。下图链接，toppadding10px，rightpadding15px，bottompadding0，leftpadding5px。虽然这些填充看起来不太统一，但它们说明了速记属性的顺序。.nava{color:white;background-color:#13a4a4;padding:10px15px05px;/*top,right,bottom,leftpadding*/border-radius:2px;text-decoration:none;}在这种模式下的属性值也可以缩写。如果声明末尾没有指定四个属性值中的一个，则未指定的一侧将取相反一侧的值。当指定三个值时，第二个值用于左和右。当指定两个值时，第一个值用于top和bottom。如果只指定一个值，它将用于所有四个方向。因此下面的声明都是等价的。填充：1em2em；填充：1em2em1em；填充：1em2em1em2em；下面的声明也是等价的。填充：1em；填充：1em1em；填充：1em1em1em；填充：1em1em1em1em；对于许多开发人员来说，指定三个值比较困难。请记住，这种情况指定了顶部、右侧和底部值。由于没有指定左侧的值，因此它将取等于右侧的值。第二个值将应用于左侧和右侧。所以padding:10px15px0就是设置左右padding为15px，toppadding为10px，bottompadding为0。不过大多数情况下只需要指定两个值即可。特别是对于较小的元素，左右内边距应该大于顶部和底部内边距。这种风格非常适合网页上的按钮或导航链接，如下图所示。.nava{color:white;background-color:#13a4a4;padding:5px15px;/*topandbottompadding,thenleftandrightpadding*/border-radius:2px;text-decoration:none;}它使用速记属性添加先在垂直方向填充，然后在水平方向添加填充。由于许多属性都遵循这一点，因此最好记住这一点。2.水平和垂直的公式“TRouBLe”仅适用于分别为盒子的四个方向设置值的属性。还有一些属性最多只支持指定两个值。这些属性包括background-position、box-shadow和text-shadow（虽然它们不是严格意义上的速记属性）。这些属性值的顺序刚好和四值属性padding的顺序相反。例如padding:1em2em先指定垂直方向的top/bottom属性值，再指定水平方向的right/left属性值，而background-position:25%75%指定right/left属性值在首先是水平方向，然后是垂直向上/向下属性值。虽然反向定义顺序似乎违反直觉，但原因很简单：这两个值代表一个笛卡尔网格。笛卡尔网格测量一般按x、y（水平、垂直）的顺序进行。例如，如图1-15所示，要为元素添加阴影，必须首先指定x（水平）值。.nav.featured{background-color:orange;box-shadow:10px2px#6f9090;/*阴影向右移动10px，向下移动2px*/>
