* Original Author: Roger Johansson * About the author: live 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 page domain name * ORIGINAL: www.456bereastreet. COM * Originally Published: March 15, 2005 * Abie Description: This article "CSS TIPS AND TRICKS", 2 articles, I combined them into translation in 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 the CSS abbreviation usage to 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 of 0 forgotting the 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. 3. Size mode is used in XHTML using CSS, and 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. IV. Cancel the element before the Class and ID define 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. For example: div # content {/ * declarations * /} fieldSet.details {/ * Declarations * /} can be written into a #content {/ * declarations * /} .details {/ * declarations * /} can save some bytes. 5. The default value is 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 elements of the margin and padding values in the style table, like this: * {margin: 0; padding: 0;} 6. No need to repeat the definition of the inherited value CSS In the middle, the child element automatically inherits the attribute value of the parent element, the color, font, etc. But note that the browser may override your definition with some default values.
7. Recent priority principles If there are a variety of definitions of the same element, the definition of the close (minimum level) is best, for example, there is such a code UPDATE: Lorem Ipsum Dolor Set in the CSS file, you have defined Element P, also defined a class "update" p {margin: 1em 0; font-size: 1em; color: # 333;}. Update {font-weight: bold; color: # 600;} 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 Defines a tab to simultaneously define multiple Class. 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;}. two {border: 10px solid # f00;} In the page code, we can call this final display effect is this DIV existing # 666 background, there is 10px Border. Yes, this is ok, you can try it. Nine. User selectors CSS beginners do not know that 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:
For example: Define all titles of font, color, and margin, you can write: 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, some 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;} 12. 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. XIII. Clearing a very common CSS problem in floating, when the positioning is floating, the following layer is covered by floating layers, or the nestled sub-layers beyond the range of outer layers. 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 is a simple skill, but it is worth it. Again again, because I saw too many novice problems, asking this: How does CSS are in horizontally? You need to define the wide elements and define horizontal margins, if your layout is included in a layer (container), like this: You can define this 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 skill to resolve: use the text-align property.
Just like this: body {text-align: center;} # wrap {width: 760px; / * Modify to your layer width * / margin: 0 auto; text-align: left;} The first body of Text- Align: Center; Rules Defines all Elements of Body in IE5 / WIN Central (other browsers just in the text), the second text-align: left; is the word in #ARP. Fifteen. Imports (Import) and hidden CSS Because the old version browser does not support CSS, a usual practice is to use @Import skills to hide CSS. For example: @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 can also hide CSS in IE4, huh, huh, save 5 bytes. Want to understand the detailed description of @Import grammar, you can see "Centricle's CSS Filter Chart". 16. For IE Optimization, you need to define some special rules for the IE BUG, here there are too many CSS skills ( Hacks), I only use two methods, whether Microsoft supports whether CSS is better in the upcoming IE7 Beta version, both of which are the safest. * 1. Method O (a) Hide a CSS definition in IE, you can use child selector: HTML> Body P {/ * defined content * / o} (b) below this method only IE Browser can understand (hide other browsers) * HTML P {/ * declarations * / o} ©, you want IE / WIN to be valid and IE / Mac hide, you can use "anti-slope" skills: / * / * / * Html p {declarations} / * * / 2. Conditional Comments method * Another method, I think more than CSS Hacks is more experienced in Microsoft's private attributes ( Conditional Comments). With this method you can define some styles separately without affecting the definition of the main style sheet. Just like this: 17.Nay: 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, breaking, space, everyone has a book habit of everyone.
