The optimization and skills of CSS when making Web pages

css| Skills | website | optimization

Using abbreviations with CSS abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules for CSS abbreviations refer to the common CSS abbreviation syntax summary, which does not expand the description.

　　Explicitly define units unless the value is 0

Forgetting to define the size of the unit is a common error for CSS Novice. In HTML you can write only width=100, but in CSS you have to give an exact unit, such as: width:100px width:100em. Only two exceptions can be defined without a unit: row height and 0 value. In addition, other values must follow the unit, note, do not add a space between the number and the unit.

　　Case sensitive

The element names defined in CSS,CSS are case-sensitive when used in XHTML. To avoid this error, I recommend that all defined names be lowercase.

The values of class and ID are case-sensitive in HTML and XHTML, and if you have to mix the case, carefully verify that your definition of CSS is consistent with the tags in XHTML.

　　To cancel the element qualification before class and ID

When you write an element to define class or ID, you can omit the previous element qualification because the ID is unique on a page and class can be used more than once in the page. You define an element without meaning. For example:

div#content {/* declarations */}
Fieldset.details {/* declarations */}

can be written

#content {/* declarations */}
. details {/* declarations */}

This can save some bytes.

　　Default value

Usually the default value for the padding is transparent, which is the default value for 0,background-color. However, the default values for different browsers may be different. If you are afraid of conflict, you can define the margin and padding values for all elements at the beginning of the stylesheet as 0, like this:

* {
margin:0;
padding:0;
}

　　You do not need to repeat the definition of inheritable values

In CSS, child elements automatically inherit the attribute values of the parent element, such as color, font, and so on, that are already defined in the parent element and can be directly inherited in child elements, without having to repeat the definition. Note, however, that the browser may overwrite your definition with some default values.

　　Recent priority principles

If there are multiple definitions of the same element, the closest (least level) definition is the highest priority, such as a piece of code
Update:lorem ipsum dolor set in the CSS file, you have defined the element p and defined a classupdate

p {
Margin:1em 0;
Font-size:1em;
Color: #333;
}
. Update {
Font-weight:bold;
Color: #600;
}

Of these two definitions, class=update will be used because class is closer than P. You can find out more about the calculating a selector's specificity of the consortium.

　　Multiple class definitions

A label can define more than one class at a time. For example, we first define two styles, the first style background is #666, and the second style has an PX border.

. One{width:200px;background: #666;}
. two{border:10px solid #F00;}

In the page code, we can call

<div Class=one two></div>

The final display effect is that the DIV has both a #666 background and a 10px border. Yes, it's OK, you can try it.

　　Using a descendant (selectors)

CSS beginners do not know that using a child selector is one of the reasons that affects their efficiency. A child selector can help you save a lot of class definitions. Let's look at the following code:

<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>

The CSS definition for 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

<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>

The style definition is:

#subnav {/* Some styling */}
#subnav Li {/* Some styling */}
#subnav a {/* Some styling */}
#subnav. Sel {/* Some styling */}
#subnav. SEL a {/* Some styling */}

Use a sub selector to make your code and CSS more concise and easy to read.

　　You don't need to quote a background picture path

To save bytes, I recommend that you do not enclose the background picture path with quotes, because the quotation marks are not required. For example:

Background:url (images/***.gif) #333;

can be written as

Background:url (images/***.gif) #333;

If you add quotes, it can cause some browser errors.

　　. Group Selector (selectors)

When some element types, classes, or IDs have common attributes, you can use the group selector to avoid multiple duplicate definitions. This can save a lot of bytes.

For example, to define the font, color, and margin of all headings, 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 there are individual elements that need to be defined as separate styles when used, you can add new definitions to cover old definitions, such as:

h1 {font-size:2em;}
h2 {Font-size:1.6em;}

　　Specify the style of the link in the correct order

When you use CSS to define multiple state styles for a link, be aware of the order in which they are written, in the correct order: link:visited:hover:active. The first letter is LVHA, you can remember it as love hate (like hate). Why 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: the focusing attribute. : The effect of the focus attribute also depends on where you write, if you want the focused element to display: hover effect, you put: focus on: hover front; If you want focused effects to replace: hover effect, you put: focus on: hover behind.

　　Clear floating

A very common CSS problem, when positioning using a float, the layer below is covered by the floating layer, or the layer nesting of the child layer beyond the outer range.

The usual solution is to add an extra element behind the floating layer, such as a div or a BR, and define its style as Clear:both. This method is a little far-fetched, fortunately there is still a good way to solve, see this article "How to clear floats without structural Markup" (Note: This site will soon translate this article).

The above 2 methods can solve the problem of floating out well, but what if you really need to clear the objects in the layers or layers? An easy way is to use the overflow attribute, which was originally published in Simple clearing of floats, and was widely discussed in clearance and Super simple clearing floats.
The above clear method is more suitable for you, depending on the situation, no longer discussed here. In addition to the application of Float, some excellent articles have been very clear, recommend you to read: "Floatutorial", "containing floats" and "float Layouts"

　　Center Horizontally (centering)

It's a simple trick, but it's worth saying again because I see so many novice questions asking: How is css horizontally centered? You need to define the width of the elements and define the horizontal margin, if your layout is contained in a layer (container), like this:

<!--your layout here to start-->
You can define this so that it is centered horizontally:
#wrap {
width:760px; /* Modify the width of your layer * *
margin:0 Auto;
}

But Ie5/win does not correctly display this definition, we use a very useful technique to solve: using the Text-align attribute. Just like this:

Body {
Text-align:center;
}
#wrap {
width:760px; /* Modify the width of your layer * *
margin:0 Auto;
Text-align:left;
}

The first body of the text-align:center; The rule defines that all elements of the body are centered in the Ie5/win (other browsers simply center the text), the second text-align:left is the left of the text in the #warp.

　　Importing (import) and hiding CSS

Since older browsers do not support CSS, a common practice is to use the @import technique to hide the CSS. For example:

@import URL (main.css);

However, this method does not work for IE4, which makes me very headache for a while. Later I used the following wording:

@import main.css;

This can also be hidden in the IE4 CSS, hehe, also saved 5 bytes. To learn more about @import syntax, see here "Centricle ' CSS Filter Chart"

　　The optimization for IE

There are times when you need to define some special rules for IE bugs, there are too many CSS tips (hacks), and I use only two of these methods, and whether or not Microsoft is better at supporting CSS in the upcoming IE7 Beta, both of these are the safest.

1. Method of annotation

(a) to hide a CSS definition in IE, you can use the selector (child-selector):

Html>body p {
/* Definition Content * *
}

(b) The following wording is only understandable by IE browser (hidden from other browsers)

* HTML P {
* Declarations * *
}

(c) There are times when you want Ie/win to be effective and ie/mac hidden, and you can use the backslash technique:

/* */
* HTML P {
Declarations
}
/* */

2. Method of conditional annotation (conditional comments)

Another way, I think, than the CSS hacks more withstand the test is the use of Microsoft's private attribute condition annotation (conditional comments). In this way you can define some styles for IE without affecting the definition of the main style sheet. Just like this:

<!--[If ie]>
<link rel=stylesheet type=text/css href=ie.css/>
<! [endif]-->

　　Debugging tips: How big is the layer?

When debugging CSS errors, you need to be like a typesetting worker, parsing CSS code line by row. I usually define a background color on the problem layer so that it's clear how much space the layer occupies. Some people suggest using border, the general situation is also possible, but the problem is, sometimes border will increase the size of elements, Border-top and Boeder-bottom will destroy the value of vertical margin, so it is safer to use background.

Another often problematic attribute is outline. Outline looks like a boeder, but does not affect the size or position of the element. Only a few browsers support outline properties, and all I know is Safari, OmniWeb, and opera.

　　CSS Code writing style

In writing CSS code, for indentation, line breaks, spaces, everyone has the writing habits of everyone. After continuous practice, I decided to use the following writing style:

Selector1,
Selector2 {
Property:value;
}

When working with federated definitions, I usually write each selector in a single line, so it's easy to find them in a CSS file. Add a space between the last selector and the curly brace {Each definition is written separately, and the semicolon is directly after the attribute value, without spaces.

I'm used to adding a semicolon after each property value, although the rule allows the last attribute value to be followed by a semicolon, but if you want to add a new style, it's easy to forget to make up the semicolon and create an error, so it's all better.

Finally, close the curly brace to write a single line. Spaces and line-wrapping help and read