Eighteen CSS skills that I have collected for a long time_Experience exchange

• Item 1>


• Item 1


• Item 1

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 styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

You can use the following method to replace the above code

• Item 1


• Item 1


• Item 1

The style definition is:
# subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling * / }
#subnav .sel a { /* Some styling */ }

Using subselectors can make your code and CSS more concise and easier to read.
10. No need to add quotes to the background image path

In order to save bytes, I recommend not to add quotes to the background image path, because the quotes are not necessary. For example:
background:url("images/***.gif") #333;

can be written as
background:url(images/***.gif) #333;

If you add quotation marks, it will cause Some browser errors.
11. Group selectors

You can use this when some element types, classes or ids have common attributes. Group selector to avoid multiple repeated definitions. This can save a lot of bytes.

For example: to define the font, color and margin of all titles, you can write:
h1,h2,h3. ,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

If there are individual elements that need to define independent styles when using it, you can add new definitions or overwrite the old definitions, for example:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
12. Specify link styles in the correct order

When you use CSS to define multiple state styles of a link, Pay attention to the order in which they are written. The correct order is: :link :visited :hover :active. The first letter extracted is "LVHA". You can remember it as "LoVe HAte" (like it), you can refer to it. "Link Specificity" by Eric Meyer.

If your users need to use keyboard control and need to know the focus of the current link, you can also define the :focus attribute. The effect of the :focus attribute also depends on what you write. Position, if you want the focus element to display the :hover effect, you put :focus before :hover; if you want the focus effect to replace the :hover effect, you put :focus after :hover. 13. Clear floats

A very common CSS problem is that when floating is used for positioning, the lower layer is covered by the floating layer, or the sub-layers nested in the layer exceed the outer layer. Scope.
The usual solution is to add an extra element after the floating layer, such as a div or a br, and define its style as clear: both. This method is a bit far-fetched, but luckily there is. A good solution can be found in 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 overflow very well, but what if you really need to clear the layer or the objects in the layer? A simple method is to use the overflow attribute. This method was originally published in "Simple Clearing of Floats" and has been widely discussed in "Clearance" and "Super simple clearing floats".

Which clear method above is more suitable for you? It depends on the specific situation and will not be discussed here. In addition, some excellent articles have made it very clear about the application of float. It is recommended that you read: "Floatutorial", "Containing Floats" and "Float Layouts"

14. Horizontal centering (centering)

This is a simple trick, but it’s worth saying again because I see too many newbie questions asking this: How to horizontally center CSS? You need to define the width of the element and define the horizontal margin. If your layout is contained in a layer (container), like this:
You can define it like this to center it horizontally:
#wrap {
width:760px; /* Modify to the width of your layer*/
margin:0 auto;
}

But IE5/Win cannot display this definition correctly, we use a Very useful trick to solve: use text-align attribute.Like this:
body {
text-align:center;
}
#wrap {
width:760px; /* Change to the width of your layer */
margin :0 auto;
text-align:left;
}

The first body’s text-align:center; rule defines that all elements of the body in IE5/Win are centered (other browsers just Center the text), the second text-align:left; is to center the text in #warp to the left.
15. Import and hide CSS

Because older browsers do not support CSS, a common approach is to use the @import technique to hide CSS. For example:
@import url("main.css");

However, this method does not work for IE4, which gave me a headache for a while. Later, I wrote it like this:
@import "main.css";

This way I can hide CSS in IE4. Haha, I also saved 5 bytes. If you want to know the detailed explanation of @import syntax, you can see here "centricle's css filter chart"
16. Optimization for IE

Sometimes, you need to optimize the IE browser Bugs define some special rules. There are too many CSS hacks here. I only use two of them. Regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version, these two methods are The safest.

* 1. Comment method
o (a) To hide a CSS definition in IE, you can use a child selector:
html>body p {
/ * Definition content */
                                                                                                                                                                                                                                                                     ​>                                                                                                                        ( 🎜>       declarations
                                                                                                                    Use Microsoft's private attribute conditional comments (conditional comments). Using this method you can define some styles separately for IE without affecting the definition of the main style sheet. Like this:








17. Debugging Tips: How big are the layers?


When an error occurs when debugging CSS, you have to be like a typewriter and analyze the CSS code line by line. I usually define a background color on the layer in question so it's obvious how much space the layer takes up. Some people suggest using border, which is generally possible, but the problem is that sometimes border will increase the size of the element, and border-top and boeder-bottom will destroy the vertical margin value, so it is safer to use background.

When writing CSS code, everyone has their own writing habits for indentation, line breaks, and spaces. After constant practice, I decided to use the following writing style:
selector1, selector2 {
property:value; }

When using union definitions, I usually Write each selector on its own line so it's easier to find them in the CSS file. Add a space between the last selector and the curly braces {. Also write each definition on its own line. The semicolon should be placed directly after the attribute value. Do not add spaces.

I am used to adding a semicolon after each attribute value. Although the rules allow you to leave out the semicolon after the last attribute value, it is easy to forget to add the semicolon when you want to add a new style. Error, so it’s better to add them all. Finally, the closing brace} is written on a line by itself.