Shulou(Shulou.com)06/02 Report--

This article mainly introduces "abbreviated attributes in CSS should pay attention to the order of TRouBLe". In daily operation, I believe that many people have doubts about the order of TRouBLe in CSS. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubt that "the order of TRouBLe in abbreviated attributes in CSS should be paid attention to". Next, please follow the editor to study!

An abbreviated attribute is an attribute used to assign values to multiple attributes at the same time. For example, font is an abbreviated property that can be used to set a variety of font properties. It specifies font-style, font-weight, font-size, font-height, and font-family.

Font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif

There are also the following attributes:

Background is an abbreviated attribute for multiple background attributes: background-color, background-image, background-size, background-repeat, background-position, background-origin, background-chip, and background-attachment.

Border is an abbreviated attribute for border-width, border-style, and border-color, all of which are also abbreviated.

Border-width is an abbreviated property of the top, right, bottom, and left border widths.

Abbreviated attributes can make the code concise, but it also hides some weird behavior.

Abbreviated properties silently override other styles

Most abbreviated properties can omit some values and specify only the values we care about. However, you should know that doing so will still set the omitted values, that is, they will be implicitly set to the initial values. This silently overrides styles defined elsewhere. For example, if you omit font-weight when using the abbreviated property font for page titles, the font weight will be set to normal.

The abbreviated property sets the omitted value to its initial value.

Add the following CSS:

H2 {font-weight: bold;} .title {font: 32px Helvetica, Arial, sans-serif;}

At first glance, you might think that the abbreviation of the CSS attribute will bold the title, but the result is not. The above code is equivalent to the following code:

H2 {font-weight: bold;} .title {font-style: normal; (the following five lines) the initial values of these attributes font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; font-size: 32px; font-family: Helvetica, Arial, sans-serif;}

Adding these styles will appear as normal fonts instead of bold fonts. These styles also override font styles inherited from ancestral elements. Of all the abbreviated properties, font has the most serious problem because it sets too many property values. Therefore, avoid using font outside the common style of the element. Of course, other abbreviated properties may encounter the same problem, so be careful.

Understand the order of abbreviated values

Shorthand attributes try to contain the order of the specified attribute values. You can set border: 1px solid black or border: black 1px solid, both of which will take effect. This is because the browser knows what type of value the width, color, and border style correspond to.

But there are many properties whose values are blurred. In this case, the order of values is critical. It is important to understand the order of these abbreviated attributes.

1. Top, right, bottom, left

When it comes to attributes such as margin and padding, and border attributes that specify values for each of the four edges of an element, developers can easily get the order of these abbreviated attributes wrong. The values of these properties are clockwise, starting at the top.

Remember that order can make fewer mistakes. Its memory formula is TRouBLe:top (top), right (right), bottom (bottom) and left (left).

Use this formula to set the inner margins of the four sides of the element. For the links shown in the following figure, the top inner margin is 10px, the right inner margin is 15px, the lower inner margin is 0, and the left inner margin is 5px. Although these inner margins do not look very uniform, they can indicate the order of the abbreviated attributes.

.nav a {color: white; background-color: # 13a4a4; padding: 10px 15px 0 5px; / * Top, right, bottom, left inside margins * / border-radius: 2px; text-decoration: none;}

Attribute values in this mode can also be abbreviated. If one of the four attribute values is left unspecified at the end of the declaration, the unspecified side takes the value of its opposite side. When you specify three values, the second value is used on both the left and right. When you specify two values, the first value is used above and below. If you specify only one value, that value is used in all four directions. So the following statements are equivalent.

Padding: 1em 2em; padding: 1em 2em 1em; padding: 1em 2em 1em 2em

The following declaration is also equivalent.

Padding: 1em; padding: 1em 1em; padding: 1em 1em 1em; padding: 1em 1em 1em 1em

For many developers, it is difficult to specify three values. Remember, this case specifies the top, right, and bottom values. Because no value is specified on the left, it takes a value equal to that on the right. The second value applies to the left and right. Therefore, padding: 10px 15px 0 sets the left and right inner margin to 15px, the upper inner margin to 10px, and the lower inner margin to 0.

In most cases, however, you only need to specify two values. Especially for smaller elements, the left and right inner margin is better than the upper and lower inner margin. This style is suitable for buttons or navigation links on a web page, as shown in the following figure.

.nav a {color: white; background-color: # 13a4a4; padding: 5px 15px; / * up and down inner margin, then left and right inner margin * / border-radius: 2px; text-decoration: none;}

It uses the abbreviated attribute to add an inner margin to the vertical direction and then to the horizontal direction.

Because many properties follow this, it's best to remember it.

two。 Horizontal, vertical

The "TRouBLe" formula only applies to properties that set values in four directions to the box. There are also properties that only allow you to specify up to two values, including background-position, box-shadow, and text-shadow (although they are not strictly abbreviated). The order of these attribute values is the opposite of the order of four-valued attributes such as padding. For example, padding: 1em 2em specifies the vertical up / subordinate value first, then the horizontal right / left attribute value, while background-position: 25% specifies the horizontal right / left attribute value before the vertical upper / subordinate value.

While it seems counterintuitive to define the opposite order, the reason is simple: these two values represent a Cartesian grid. The measurements of the Cartesian grid are generally in the order of x ~ (th) y (horizontal, vertical). For example, as shown in figure 1-15, to shadow an element, you must first specify an x (horizontal) value.

.nav .shadow offset {background-color: orange; box-shadow: 10px 2px # 6f9090; / * Shadows shift 10px to the right, 2px down to 2px * /} Home Coffees Brewers Specials

The first (larger) value specifies the offset in the horizontal direction, and the second (smaller) value specifies the offset in the vertical direction.

If the property needs to specify values in both directions from a point, think of the Cartesian grid. If an attribute needs to specify a value in four directions of an element, think of the clock.

At this point, the study on the "abbreviated attributes in CSS should pay attention to the order of TRouBLe" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.