CSS code clearer and more efficient experience

I. Use css abbreviations

Using abbreviations can help reduce the size of your CSS file and make it easier to read. For the main rules of css abbreviations, see common css abbreviations syntax summary, which is not described here.

 

Ii. Define the unit unless the value is 0

Unit that forgets to define the size is a common mistake for beginners of CSS. In HTML, you can write only width = 100, but in CSS, you must give an accurate unit, for example, width: 100px width: 100em. There are only two exceptions. The unit is not defined: the Row Height and the 0 value. Other values must follow the unit. Note that do not add spaces between values and units.

 

Iii. Case Sensitive

When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that all definition names be in lower case.

The values of class and id are also case-sensitive in HTML and XHTML. If you must write them in combination with uppercase and lowercase, make sure that your CSS definition is consistent with the tags in XHTML.

 

4. Cancel the element limitation before class and id

When you write an element to define a class or id, you can omit the previous element limitation, because the ID is unique in a page, and las s can be used multiple times on the page. It makes no sense to limit an element. For example:

Div # content {/* declarations */}

Fieldset. details {/* declarations */}

 

Can be written

# Content {/* declarations */}

. Details {/* declarations */}

 

This saves some bytes.

 

5. Default Value

Generally, the default value of padding is 0, and the default value of background-color is transparent. However, the default values may be different in different browsers. If there is a conflict, You can first define that the margin and padding values of all elements are 0 at the beginning of the style sheet, as shown in the following code:

*{

Margin: 0;

Padding: 0;

}

 

6. Do not need to repeatedly define the value that can be inherited

In CSS, the child element automatically inherits the attribute values of the parent element, such as color and font. defined in the parent element, the child element can be inherited directly without repeated definitions. However, the browser may use some default values to overwrite your definition.

 

VII. Recent priority principle

If there are multiple definitions of the same element, the closest (minimum level) is the highest priority. For example, there is such a piece of code.

Update: lorem ipsum dolor set

In the CSS file, you have defined the element P and a classupdate.

P {

Margin: 1em 0;

Font-size: 1em;

Color: #333;

}

. Update {

Font-weight: bold;

Color: #600;

}

 

8. multi-class definition

A tag can define multiple classes at the same time. For example, we first define two styles, the first style background is "http://www.28600.com/article1/#" 666; the second style has a border of 10 PX.

. One {width: 200px; Background: "http://www.28600.com/article1/#" 666 ;}

. Two {border: 10px solid "http://www.28600.com/article1/#" F00 ;}

In the Page code, we can call:

<Div class = one two> </div>

So the final display effect is that this div has both "http://www.28600.com/article1/#" 666 background, also has a 10px border. Yes. You can try it.

========================================================== ========================================================

ReferenceCSSStatement at 12:44:00: LZ and CSS are not programs. They should not be summarized by the program concept, but can be used for reference. This is not supported. Reason: Is CSS a language? Such as HTML, XML, and SQL. They are all high-level languages. To put it bluntly, they are silly languages. Just like a car with automatic transmission, a driver only needs a few simple operations. But it does not mean that this car is not a car. It only encapsulates various complex logics and automatically completes the tasks. As a language, it must involve some abstract ideas. However, because it is encapsulated and packaged, even internal logic is fixed. Therefore, outsiders feel that there is no abstract concept. Here is a simple example: We define a span to float (float: left ). This seems to have no logic, but after the browser sees the flag, it first determines what logic block span is, then calls the corresponding module, and then judges what logic float is, determine the logic of the surrounding elements, and finally decide where to draw the span object on the screen. It seems very simple, but if there are many accumulated elements, especially the logic of these elements is very different and intertwined, it is time to test people. Maybe you don't think we can interfere with the computation in the browser. However, if we understand the underlying things, you know the internal operation rules of them. This is just as the Circuit Breaker must understand the circuit diagram.