Web page making tips for using CSS abbreviations to speed up your website

The key indicator of Web site availability is speed, or rather, how fast a page can appear in a visitor's browser window. There are many factors that affect speed, including the speed of the web server, the Internet connection of the visitor, and the file size that the browser must download. Although you cannot control the speed of the server and the connection, you can control the file size of the Web pages that make up your website. In order to make websites faster, Web builders routinely compress and optimize every image file on the website, which often makes it necessary to sacrifice image quality in order to reduce the file size by several percentage points. Because CSS stylesheets are plain text files and relatively small compared to images, web builders rarely consider taking steps to reduce the size of their CSS stylesheet files. However, by using CSS abbreviations and some other simple tricks, you can greatly reduce the size of your style sheets. In an informal special test of my style sheet, I reduced the file size by about 25-50%. Zh
Create a new front-end learning qun438905713, most of them are zero-based learners in the group. Everyone helps each other, answers each other, and also prepares a lot of learning materials. Welcome zero-level friends to exchange together.

Abbreviated properties using CSS

CSS shorthand properties are specialized property names that are used to replace multiple collections of related properties. For example, the padding property is an abbreviation of padding-top, padding-right, padding-bottom, and padding-left. Zh
Using sketched properties allows you to compress multiple property / attribute pairs into a single line of code in a CSS style sheet. For example, consider the following code:
.sample1 {
Margin-top: 15px;
Margin-right: 20px;
Margin-bottom: 12px;
Margin-left: 24px;
Padding-top: 5px;
Padding-right: 10px;
Padding-bottom: 4px;
Padding-left: 8px;
Border-top-width: thin;
Border-top-style: solid;
Border-top-color: # 000000;
}
Replace it with some abbreviated properties to reduce the code to the following, the actual effect of the two is exactly the same:
.sample1 {
Margin: 15px 20px 12px 24px;
Padding: 5px 10px 4px 8px;
Border-top: thin solid # 000000;
}
It should be noted that the abbreviation property also has multiple attributes, and each (attribute) corresponds to a general property that is combined into the abbreviation property. Properties are separated by white space. Zh
属性 When the properties have similar values, such as for linear measurement of the margin property, the order of the properties following the abbreviated property is important. The order of attributes starts at the top (the top border is blank), and then continues clockwise around the box. Zh

If all attributes of the abbreviated nature are the same, then you can simply list a single attribute and then copy it four times before. Therefore, the following two properties are equal:
Margin: 5px 5px 5px 5px;
Margin: 5px;
Similarly, you can use the two attributes following the border blank or spacing properties to represent top / bottom and right / left attribute pairs. Zh
Margin: 5px 10px 5px 10px;
Margin: 5px 10px;
The order of attributes is not important when they are dissimilar values. Therefore, attributes such as border color, border style, and border width can follow the outline property in any order. Ignoring an attribute is equivalent to ignoring the corresponding general properties from the style rules. Zh

List of CSS Abbreviations

Below is a list of CSS abbreviated properties and the general properties they represent. Zh
Background: background attachment, background color, background image, background position, background repeat
Border: border color, border style, border width
border-bottom (bottom border): bottom border color, bottom border style, bottom border width
border-left: color of left border, style of left border, width of left border
border-right: right border color, right border style, right border width
border-top (top border): top border color, top border style, top border width
cue (sound prompt): front prompt, rear prompt
font (font): font, size, font style, font thickness, font variant, line height, font size adjustment, font stretching
list-style (list style): list style image, list style position, list style type
margin: top margin, right margin, bottom margin, left margin
outline: outline color, outline style, outline width
padding: top, right, bottom, left
pause: post-pause, pre-pause]

Reduce white space

的 Another way to reduce the size of CSS style sheets is to remove most useless whitespace from your documents. In other words, breaking each rule into a single line of code means deleting the newline and indent characters that were originally inserted into the code to separate each property / attribute into different lines. Zh
For example, the following code example is the same in content, but the second one is much more refined:
h1 {
Font-size: x-large;
Font-weight: bold;
Color: # FF0000;
}

h1 {font-size: x-large; font-weight: bold; color: # FF0000}

Delete comments

删 Removing comments from your CSS code is another way to reduce file size. Although comments are useful for reading code, they don't help browsers generate your Web pages. Many web builders are used to commenting every line of code, or at least every rule statement. Such generous comments are rarely needed in CSS style sheets, because most CSS properties and attributes are easy to read and understand. If you use meaningful names for classes, IDs, and other selectors, you can save most of the comments, while still keeping your code readable and maintainable. Zh
h1 {/ * Heading 1 style * /
Font-size: x-large; / * x-large size * /
Font-weight: bold; / * Bold * /
Color: # FF0000; / * Red * /
}
Using the shorthand nature, removing useless white space, and omitting comments can greatly reduce the size of your CSS style sheet file. This, in turn, will make a small, but perhaps obvious, contribution to the overall goal of accelerating the speed of your Web site.
————————————————
Copyright statement: This article is the original article of the CSDN blogger "html basic tutorial", which follows the CC 4.0 BY-SA copyright agreement. Please reprint the original source link and this statement.
Original link: https://blog.csdn.net/html168/article/details/104416933