css css2 css3_CSS捷径

css css2 css3

Many CSS properties can be written in a shortened firm. Writing CSS "longhand" isn't wrong, it just takes more time… and with more writing comes greater opportunities for errors, more code to read through, and increased development time. Shortcuts are a good practice to incorporate in your CSS.

许多CSS属性可以用缩短的公司形式编写。 编写CSS是“正确的”并没有错，它只需要花费更多的时间……而编写更多的文章会带来更多的错误机会，更多的代码可读取性以及更长的开发时间。 快捷方式是合并到CSS中的一种好习惯。

You've probably been using CSS shortcuts without knowing it: border is itself a shortcut. We often take this declaration:

您可能一直在不了解CSS快捷方式的情况下使用： border本身就是快捷方式。 我们经常会这样声明：

img {
	border-thickness: 2px;
	border-color: black;
	border-style: solid;
}

And turn it into this:

并将其转换为：

img { 
	border: 2px solid #000;
}

(Related: a useful illustration of how various browsers render border values.)

(相关： 各种浏览器如何呈现边框值的有用说明 。)

Similarly, margin can be written as separate properties:

同样，可以将margin写为单独的属性：

div {
	margin-top: 3em;
	margin-right: 2em;
	margin-bottom: 1em;
	margin-left: 2em;
}

Or as values proceeding from the top of the element's box and proceeding clockwise:

或者，当值从元素框的top并按顺时针方向进行时：

div {
	margin: 3em 2em 1em 2em;
}

(To remember the order: think TRBL, trouble).

(要记住顺序：想想TRBL，麻烦)。

The style declaration above could also be written as:

上面的样式声明也可以写成：

div { 
	margin: 3em 2em 1em; 
}

(Meaning: margin-top 3em, left and right 2em, bottom 1em)

(含义： margin-top 3em， left和right 2em， bottom 1em)

If the margin-left and right values share the same value, and the margin-top and bottom have different values from those, but also shared between the two, you could write:

如果margin-left和right值共享相同的值，并且margin-top和bottom值与此不同，但两者之间也共享，则可以编写：

div#sidebar {
	margin: 3em 1em;
}

(Meaning: margin-top and bottom 3em, margin-left and right 1em. You'll often see this used to center a <div> or other block element as margin: 0 auto; )

(含义： margin-top和bottom 3em， margin-left和right 1em。您经常会看到它用于将<div>或其他块元素居中，作为margin: 0 auto; )

Finally, if all sides share the same value, you can simply write:

最后，如果各方共享相同的值，则可以简单地编写：

div#container { margin: 2em; }

It is possible to follow a general property with a specific one to create exceptions: for example, padding: 2em; padding-left: 0; will create 2em padding for the element to which it is applied on all sides except for the left, where padding will be 0.

可以在常规属性后面加上特定属性来创建异常：例如， padding: 2em; padding-left: 0; padding: 2em; padding-left: 0; 将为所有元素应用2em填充，左侧除外 ，其中padding为0 。

background is also a shortcut for either background-color, background-image, or a combination of both, optionally combined with other background properties:

background还是background-color ， background-image或两者结合的快捷方式，可以选择与其他背景属性结合使用：

header { 
	background: #777 url(assets/images/grid.png) no-repeat top right; 
}

Meaning: background-color of grey, a background-image that is not repeated, and placed in the top right corner of the element to which it is applied.

含义：灰色的background-image background-color ，一种不重复的background-image ，放置在要应用该元素的元素的右上角。

更多捷径 (Further shortcuts)

It is possible to follow a general property with a specific one to create exceptions. For example:

可以在常规属性后面加上特定属性来创建异常。 例如：

h1 {
	padding: 2em;
	padding-left: 0;
}

Will create 2em padding for the >h1> element on all sides except for the left, where padding will be 0. Note the order of properties in the declaration.

将在所有侧面为>h1>元素创建2em填充，左侧除外 ，其中padding为0 。 注意声明中属性的顺序。

It is also possible to specify pairs of properties at the same time: top combined with bottom, and left combined with right:

还可以同时指定成对的属性： top和bottom组合在一起， left和right组合在一起：

a {
	padding: 1em 0;
}

In the example above, links will have padding of 1em on the top and bottom, and 0 padding on the left and right.

在上面的示例中，链接的顶部和底部填充为1em ，左侧和右侧填充为0 。

Alternatively, sides may be specified in a sequence. going clockwise: top, right, bottom, left. (It can be helpful to remember the word TRouBLe as a mnemonic.)

或者，可以按顺序指定边。 顺时针方向：上，右，下，左。 (记住单词TRouBLe作为助记符可能会有所帮助。)

h2 {
	padding: 0 5px 2em 10px;
}

Will provide padding for >h2> elements: none on top, 5px on the right, 2em on the bottom, and 10px on the left. Note that units of measurement can be mixed.

将为>h2>元素提供填充：顶部无，右侧5px ，底部2em ，左侧10px 。 注意，度量单位可以混合。

Finally, it is also possible to combine padding distances as { padding: top leftandright bottom; }. For example:

最后，也可以将填充距离组合为{ padding: top leftandright bottom; } { padding: top leftandright bottom; } 。 例如：

div {
	border: 1px solid black;
	padding: 2em 0 2em;
}

…produces an internal space of 2em at the top and bottom of all <div> elements, and 0 on the left and right.

...产生的内部空间2em所有的顶部和底部<div>元素，并且0上的左侧和右侧。

翻译自: https://thenewcode.com/437/CSS-Shortcuts

css css2 css3