Original author: Roger Johansson Author: Lives in Gothenburg, Sweden, in 1994, came into contact with and involved in web design, 456 Berea Street was his home address, so the use of this name as his personal home domain ORIGINAL: www.456bereastreet.com originally published Time: March 15, 2005 Abie Description: This article "CSS TIPS AND TRICKS", 2 articles, I merged them into this article.
Recently, there are often friends asking me some CSS issues encountered. They can't control CSS very well, affecting the efficiency of CSS. Let me analyze the error, help everyone easier to use CSS.
This article summed up all the skills and compatibility programs I have started using the CSS layout method. I am willing to share these with you, I will focus on the mistakes of some novices (including myself also committed), if you are already CSS Master, these experience skills may already know, if you have more, I hope I can help me.
1. Use CSS abbreviation
Using abbreviations can help reduce the size of your CSS file, easier to read. The main rules of CSS abbreviations are given to "Common CSS Abblast Summary Summary", which is not expanded here.
II. Clearly defined units unless the value is 0
Forgetting the unit of defined size is a universal error in CSS. In HTML, you can write only width = "100", but in CSS, you must give an accurate unit, such as: Width: 100px Width: 100em. Only two exceptions may not be defined: rows and 0 values. In addition, other values must keep up with the unit, not to add binding between the values and units.
Size case
When using CSS in XHTML, the element name defined in CSS is case sensitive. In order to avoid this error, I recommend that all definition names use lowercase.
The values of Class and ID are also case sensitive in HTML and XHTML. If you must write a mixed write, please make a closer to confirm that you are in the definition of CSS and the labels in XHTML are consistent.
4. Cancel the element defined before the Class and ID
When you write to an element definition class or id, you can omit the previous elements define because the ID is unique in one page, while Clas S can be used multiple times in the page. You define a certain element. E.g:
Div # content {/ * Declarations * /} fieldset.details {/ * declarations * /}
Can write
#content {/ * declarations * /} .details {/ * declarations * /}
This saves some bytes.
V. Default
Usually the default value of Padding is 0, and the default value for Background-Color is Transparent. But the default value of different browsers may be different. If you are afraid of conflict, you can define all the size of the margin and padding values of all elements in the style table:
* {margin: 0; Padding: 0;
6. No need to repeat the definition of the inheritable value
In CSS, the child element automatically inherits the attribute value of the parent element, the color, font, etc., which have been defined in the parent element, and can be inherited directly in the child element, and no repeat definition is required. But note that the browser may override your definition with some default values.
7. Recent priority principles
If there is a variety of definitions of the same element, the definition of the closest (minimum level) is best, for example, such a code
Update: Lorem Ipsum Dolor Set
In the CSS file, you have defined element P and define a class "update" p {margin: 1em 0; font-size: 1em; color: # 333;} .update {font-weight: bold; color: # 600;}
In these two definitions, class = "update" will be used because the Class is closer than p. You can check out the W3C's "Calculating A Selector's Specificity" to learn more.
Eight. Multiple Class definitions
A tag can define multiple Class at the same time. For example: Let's define two styles, the first style background is # 666; the second style has a border of 10 px.
.one {width: 200px; Background: # 666;}. Two {border: 10px solid # f00;}
In the page code, we can call this way
Such a final display is the background of this DIV existing # 666, and there is a 10px border. Yes, this is ok, you can try it.
Nine. User selectors (Descendant Selectors)
CSS beginners don't know if the use of sub-selectors is one of the reasons that affect their efficiency. Subsets can help you save a lot of Class definitions. Let's look at the following code:
The CSS definition of this code is:
Div # Subnav UL {/ * Some Styling * /} Div # Subnav Ul li.subnavitem {/ * Some Styling * /} Div # Subnav UL li.subnavitem a.subnavitem {/ * Some Styling * /} Div # Subnav UL Li .subnavitemselected {/ * some style * /} div # Subnav Ul li.subnavitemselected a.subnavitemselected {/ * Some style * /}
You can replace the code above with the following method
#Subnav {/ * Some style * /} #Subnav Li {/ * Some style * /} #Subnav a {/ * some style * /} #Subnav .sel {/ * some style * /} #subnav .sel a { / * Some style * /}
The use of child selectors can make your code and CSS more simple and easier to read.
Ten. No need to give background image path plus quotation
In order to save bytes, I recommend not add quotes to the background image path because quotes are not required. E.g:
Background: URL ("Images / ***. GIF") # 333;
Can be written as
Background: URL (images / ***. gif) # 333;
If you add quotation marks, it will cause a number of browsers' errors.
XI. Group Selector (Group Selectors)
When some element types, Class or IDs have a common attribute, you can use the group selector to avoid multiple repetition definitions. This saves a lot of bytes.
For example: Define all the fonts, colors and margins of all titles, you can write this:
H1, H2, H3, H4, H5, H6 {Font-Family: "Lucida Grande", Lucida, Arial, Helvetica, Sans-Serif; Color: # 333; Margin: 1EM 0;
If you are in use, individual elements need to define a stand-alone style, you can add new definitions to overwrite the old definition, for example:
H1 {font-size: 2em;} h2 {font-size: 1.6em;
Twelve. Specify links in the correct order
When you use CSS to define multiple status styles of links, pay attention to the order of their writing, the correct order is :: link: visited: Hover: Active. The first letter is "LVHA", you can remember "love hate" (like hate). Why is this definition, you can refer to Eric Meyer's "Link Specificity".
If your users need to use the keyboard to control, you need to know the focus of the current link, you can also define: FOCUS properties. : The effect of the FOCUS property also depends on the location written by you if you want the focus element to display: Hover effect, you will write: FOCUS in front of: Hover; if you want the focus effect, you will put: FOCUS At: hover.
Thirteen. Clear floating
A very common CSS problem, when the positioning is floating, the following layer is covered by floating layer, or the nestled sublayer is outside the outer layer.
The usual solution is to add an additional element behind the floating layer, such as a DIV or a Br, and define its style to Clear: Both. This approach is a bit far away, and fortunately there is a good way to solve, see this article "How to Clear Floats without Structural Markup" (Note: This site will translate this article as soon as possible). The above two methods can solve the problem of floating exceeded, but if you really need to do Clear in the layer or layer? A simple way is to use overflow properties, this method is initially published in "Simple Clearing Of Floats" and is widely discussed in "Clearance" and "Super Simple Clearing Floats".
The Clear method is more suitable for you, to see the specific situation, no longer discusses. In addition, some excellent articles have been very clear, recommend you to read: "floatutorial", "containing floats" and "float layouts"
14. Centering
This is a simple skill, but it is worth mentioning again, because I saw too many novice problems asking this: how CSS is in late living? You need to define the wide elements and define the landscape margin, if your layout is included in a layer (container), like this:
You can define this to open it laterally:
#Wrap {width: 760px; / * Modify the width of your layer * / margin: 0 auto;
But IE5 / Win does not display this definition correctly, we use a very useful technique to resolve: use the text-align property. Just like this:
Body {text-align: center;} #wrap {width: 760px; / * Modified to your layer width * / margin: 0 auto; text-align: left;}
The first Body's text-align: center; the rule defines all the elements of the body in IE5 / WIN to cure (other browsers just in the text), the second text-align: left; is the word in #WARP.
Fifteen. Import (Import) and hidden CSS
Because the old version of the browser does not support CSS, a usual practice is to use @Import skills to hide CSS. E.g:
@Import URL ("main.css");
However, this method does not work on IE4, which makes me very headache for a while. Later I used this way:
@Import "main.css";
This will also hide CSS in IE4, huh, huh, saved 5 bytes. Want to understand the detailed description of @Import grammar, you can see "Centricle's CSS Filter Chart"
XVI. Optimization of IE
Sometimes, you need to define some special rules for the bug of IE browser. There are too many CSS skills (Hacks), I only use two methods, regardless of whether Microsoft is better in the upcoming IE7 Beta version. Support CSS, both of which are the safest.
Note method
(a) Hide a CSS definition in IE, you can use the child selector: html> body p {/ * defined content * /} (b) Below this way is only IE browser can understand (other browsing Substant hidden) * HTML P {/ * Declarations * /} (c) Otteen, you want IE / WIN to be valid and IE / Mac hide, you can use "anti-sliding line" skills: / * / * / * HTML P {Declarations} / * * / 2. Conditional Comments is another way, I think more tests than CSS Hacks is a Conditional Comments. With this method you can define some styles separately without affecting the definition of the main style sheet. Just like this: sevente. Debugging skill: How big is the layer?
When the debug CSS has an error, you have to analyze the CSS code by line. I usually define a background color on the layer of the problem, so it will be clearly seen that there are more spaces that occupy the layer. Some people suggest that Border, the general situation is also possible, but the problem is that Border-top and Boeder-Bottom will break the values of the portrait margin, so Border-top and Boeder-Bottom will be safer.
Another regular problematic attribute is Outline. Outline looks like Boeder, but does not affect the size or position of the elements. Only a few browsers support Outline properties, I know only Safari, OmniWeb, and Opera.
Eighth eight .CSS code writing style
When writing CSS code, for indentation, break, space, each person has a writing habit. After continuous practice, I decided to use the following writing style:
Selector1, selector2 {property: value;
When using a joint definition, I usually write each selector separately, so that they are found in the CSS file. Add a space between the last selector and the braces {, each definition is written separately. After the semicolon is directly at the attribute value, do not add air.
I am used to adding a division behind each attribute value, although it allows the last attribute value to allow the semicolon after the last attribute value is allowed, but if you want to add a new style, it is easy to forget to make a semicolon, so it is still added. Better.
Finally, the closing braces} are written separately.
Space and wrap help and read.
