[Reserved] Style Table Writing Efficiency Manual [Date: 2004-10-15] [From:
PLOD]
From
PositioniseVerysthing
How to write efficient CSS is an easy-to-understand CSS optimization technical teaching article, strong pragmatic, very beautiful, very classic, once jjgod has translated, but the link has been invalid, it has not been saved, so I don't have to translate my style. Come out, if you can reach the translation level of JJGod will be my unparallelast. Although I have worked hard to reserve the original original taste of the original author, it was found in the translation process. The vivid words used in the authors did not vividly translated into Chinese. To add their tone and speech habits, this should be re-translated Restore "vivid" :)
The level is limited, if there is a leaking, please enter the ax ...
Good efficiency
The most sought after CSS is to reduce the page volume, thereby reducing download time, whether it is downloaded directly from the cache when the page is downloaded. The fact is true, however, this is a large part of the volume in the first time being downloaded during the download. The reason is extremely redundant style sheet code.
Ok, everything is over, let us start. You will learn some highly efficient style sheets to write "secret techniques", starting to knock on your style sheet to the last droplets. Of course, you can't take this "huge" page volume, but for websites who survive in fierce competition, one byte is a byte, these save bytes are extremely Value.
There are such a range of "bytes slimming", including
Short write properties, multiple declarations, use defaults, attribute inheritance, and blank processing.
Shortest
How
Setting the page margin to zero (Zeroing Page Margins) A number of CSS short-write properties, but there are still many of this topic.
Commonly used shorthand properties include:
Font - font, control "font-size", "font-weight", "line-height", etc.
Background - background, control elements background, positioning, repetition, etc.
List-style - list styles, settings list item symbols properties
Margin, defined blank width left next to each frame of the box model
Border - Border, define the style properties of each frame of the box-like container, which will involve another shortclock attribute involving the border
Padding - inner margins, defining the whitewash width of the inside of the border of the box container
The above list items can be linked directly to
Conflict chapter in W3C CSS 2 Specifications.
For example, the Font property is set at the same time.
Font-style (font styles),
Font-Variant (font variant),
Font-weight (font pounds),
Font-size (font size),
Line-height (high) and
The font-family (字 字)) 简 简 属.. However, not all these attributes must be used simultaneously in the shorthand properties. When certain values in the discovery format are omitted, each "missing" attribute is actually specified using its default value, which can be
W3C Specifications
Font Property is found in the Content section. If you use a lot of font-related style control properties in a style file, use this shorthand property will be able to significantly reduce the volume of the style sheet.
Background and
List-style properties also have similar functions. Several unparalleled properties in the list involve four borders of a CSS box-shaped container, and different in the previous attributes.
The four borders (Divs-blocks, Tables-tables, Lists-lists, paragraphs-tables, Lists-lists, paragraphs-tables, Lists-lists, paragraphs-tables, Lists-lists, paragraphs-tables, etc.) have their own Margins, Borders and Padding properties, which can be Set their width separately. For Borders, each border can be independently assigned
Border-style (border model) and
Border-color (border color). If all these attributes are spell, it is very long enough, the set of rules is long enough! Use short-write rules to greatly reduce workload.
clock
If a border property of the four borders of the box-shaped container is the same, then, only the basic shorthand properties can be used, such as writing:
code:
Margin: 5px;
Border-width: 5px;
Padding: 5px;
code:
Note: Border-style must be set to display the border. To do this we can define the Border-style property or set the pattern in the Border property. Just use the Border-Width property that cannot be displayed on the border.
However, if there is a case where the value of several borders is not the same, this time, a CSS feature we call "clock" starts work. Let us imagine a box-shaped container into one clock. When the pointer is normally, they are referred to as the top edges of the box-shaped container, but also the first value of the discovery attribute. The next is the position of the three o'clock, which is equivalent to the right side of the cassette container. Then there is a 6 o'clock position, which is equivalent to the bottom side of the cassette container, and the last nine-point position refers to the left side.
Let's see an example. We want to put a box-like container on the page, its top distance is 10px, the right side distance is 5px, the bottom side distance is 3px, no left distance. So you can write this with margin's shorthand properties:
code:
Margin: 10px 5px 3px 0;
When declaring properties, these attribute values must only be separated by spaces. Also, each value must be marked in unless the value is zero.
Note that the margin is zero value is defined into 0, because no matter what is zero, the unit does not matter. The zero value of any unit (PX, EM,%, etc.) is equal to the zero value of any other unit.
Modification clock
When a few borders are the same, the border's abbot property can be concentrated to a greater degrees. As mentioned earlier, when all the bodes are consistent, all borders use the same value, but if the top and bottom are consistent, the right side and the left side are consistent, in which case the margin code can be written as follows. such:
code:
Margin: 10px 5px;
This way to write the margins of the top and bottom of the bottom to 10px, and the side distance from the sides is 5px. There is also a trick, it is the case where the top and the bottom is different and the side is consistent. The top distance is 10px, the left and right side are 5px, the bottom edge is 20px, we write this:
code:
Margin: 10px 5px 20px;
This all depends on the number of dealerships and the order used. Remember, a value = all borders; two values = top / bottom border, both sides; three values = top frame, both sides, bottom border; four values = follow the bell face principle. Ok, isn't it too difficult?
Border difference
Border Shorthand Properties (Border Short Blue Properties) and
The Padding is also useful to use this "clock" shortup method.
Border-width,
Border-color,
Border-style and
Padding and
Margin's manipulation method is the same. but,
There is still a difference between the Border attribute.
Border attributes can set up four borders of box-like containers at the same time.
Border-width,
Border-style and
Border-color.
When the four borders are all, it is very good, but if they are different? Do we have to return to the days before Border-Top, Border-Right? Ok, maybe it. Fortunately, we have tricks.
For example, the model and color of each frame of the box-shaped container are the same, and only the width is different. The most direct and effective way is to use basic
Border Shop Property Definition
Border-width,
Border-style and
Border-color, then use separately
Border-width property defines different border width to overwrite the settings in front, like this:
code:
Border: 10px solid Red;
Border-width: 10px 5px 3px 0;
If all the border properties of the four borders are different, then this approach will not send a big usage, but this situation is not often happened. If only Border-Style or Border-Color attribute changes, this property is handled like this by handling Border-Width with this approach.
Next, let's look at another situation to see what is different from efficient CSS writing methods.
Multiple statement
For example, we have six absolute positioning blocks (layers in Dreamweaver), which are all the same, where they are separated from each other at the top of the page. Since their page positioning is different, they must be given separate class names or IDs, except that their remaining properties are all.
With the typesette editor, you may write a style rule for each ID, including all font rules, text rules, positioning declarations, and more. Like this constantly repeating those completely the same rules look, not a wise move, isn't it? Yes. Here is how to minimize these rules:
code:
#first {Left: 0;}
#second {Left: 100px;}
#third {Left: 200px;}
#fouRTh {Left: 300px;}
#fiffh {left: 400px;}
#Sixth {Left: 500px;}
#first, #second, #third, #fourarth, #fiffh, #SIXTH {
Position: absolute;
TOP: 0;
Width: 75px;
Font-size: .9em;
Font-weight: bold;
TEXT-ALIGN: CENTER;
Line-height: 1.4em;
Background-color: Silver;
Color: navy;
Padding: 5px;
Border: 1px solid navy;
}
By listing the IDs of these same blocks one by one, and securely with one space with a comma, the styles rules of the rear large segment will be applied to all these six blocks. Obviously, if each ID is repeatedly defined these properties, the entire CSS will be bloated. This may be the only way to reduce the volume of the style.
code:
Note: Make sure that the last ID selector does not follow a comma, but should be written like a multi-ID rule set in the above. Some browsers still display these blocks, but some will give this consideration as code errors without displaying any block.
Use the default value
Most CSS properties have initial defaults, and when you redefine values for these properties of the elements, their default values are overwritten. For example, each attribute of the inner margin, Padding-top, padding-right, padding-bottom, and padding-left, their initial value is 0. If you do not want the target element to have an inner margin, then the inner margin attribute can omit.
code:
Note: The short-discussion attributes we have previously discussed itself does not have the default. Usually each value is taken from a single attribute in the absence of the image. Although the default values listed in CSS 2 Specification Property Index are None or 0, but browser usually sets different default values to certain properties according to different elements.
For example: Opera browser presets the inner side distance of the body element of 8px. H1-H6 title and paragraph element usually the default margins are not zero. Different browsers, the inner and outer margins default value preset for the Lists (list) and List-Items (list items) are not the same.
Attribute inheritance
Another way to avoid writing redundant code is that the attributes inherited from the parent elements from the parent element. It can be inherited inherited, but many of them are still uncommonly used, like Voice-Family. There are not many listed inherited attributes (in alphabetical order):
code:
Color - Color
Font (and relandated ") - font and related properties
Letter-spacing - word distance
Line-height - high travel
List-style (and related ") - list styles and related properties
Text-align - text alignment
Text-indent - Text indent
Text-Transform - Text Conversion
White-Space - blank
Word-spacing - word distance
There are many problems in the inheritance feature in some old browsers, and the current new browser is generally inherited correctly. As long as you understand which properties can be inherited, you will write a lot of extra code. Reiterate, see the full property list, please see
CSS 2 Property INDEX (CSS 2 property index).
Blank treatment
The blank said here is not the White-Space property in the CSS. It is said that the white interval exists in the style sheet file. These intervals come from a new line for generating a new row, and those space that helps improve readability in a single line. Although these intervals can be removed, several bytes can be saved, but it is usually omitted.
If these spaces are removed, the style sheet will become difficult to read, let alone make changes. If the project clearly requires deleting every extra byte, you'd better create a "master" style sheet file for easy reading, then copy one, remove all of the blank, this style sheet is in use "Live Edition" style sheet. If you want to modify in the future, modify it in the easy-to-read main style, then copy a copy and remove blank as above, continue as "live version".
code:
Be careful! Some spaces are required in the CSS encoding, if these spaces are removed, the CSS rules will also change and lead to some unexpected results. W3C's specification descriptions are used in such a word such as "Space Separate,", and these spaces are required. This situation is common between the various attribute values of the discovery attribute. It is often told that the container contains the choice, which is a space, it is a space, if all spaces in the selector are removed, it is not a good idea. Maybe remove the space for the space to give those fattle molecules, it's the most suitable, right?
to sum up
To this, you have learned how to make your style table more simple and efficient. The benefits of using these techniques are not only the volume of the style, which speeds up the download, and the style sheet is often clear and clean, and the code that is easy to understand is also easy to modify maintenance. Even if you use the Typographic Editor to create your style sheet, you can use these methods mentioned in this article to write your "finished product" more reasonable and more efficient!
Holly 'N John E-mail
© PositioniseVerything
Last Updated: July 3, 2004
Created November, 2003
Translated by Popoever on October 10, 2004 ---------- full text ----------
Translator Note: This article has some attention to my attention during the translation process. It is mainly how exclusive nouns are most appropriate. I have also had a lot of domestic Web Standards related translation works and Chinese local works, and this is some The nouns have been entangled, and each said, I will not take them, and Chinese is profound. It is often not an easy thing to unify one word, not to mention the term "shipping". For example, Padding, there is a "filled", there is a "filled", and there is also a "patch". For the next two, I feel acceptable, at least the harmony can easily memorize the friends of the foreign language, but I still Persevere to turn it into "inner margins", because this is the most visual figure, Padding is originally the distance between the border to internal text, not called "inner margin". As for Margin, it is translated "blank" or "left" or "gap", "margin", which is better, my mother has been an advanced editor, she told me should be called "white side "Since I have turned padding into" inner margins ", it seems that Margin can only make a pair of" margins ". Another one is Box, the most obvious is to turn into a "box model" or "box object", I am too lazy to go to Luo. Anyway, just a self-cultivation, but it is translated, but I will not be confused ~~~
--Popoever original translation, translation copyright, declined, original copyright belongs to the original author
Reference Notice Address (1):
http://www.loveyuki.com/trackback.asp?tbid=722
http://www.loveyuki.com/trackback.asp?tbid=722&cp=gbk
