I. Use CSS abbreviations
Using abbreviations can help reduce the size of your CSS file and make it easier to read. Ii. Clearly define unit unless the value is 0 and the unit that forgets to define the size is a common error 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 the class and ID. When you write an element to define the class or ID, you can omit the element limitation, because the ID is unique on a page, class can be used multiple times on the page. It makes no sense to limit an element. For example, div # Content {/* declarations */} TD. details {/* declarations */} can be written as # Content {/* declarations */}. details {/* declarations */} can save some bytes. 5. The default value is usually 0 for padding and transparent for background-color. 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. If you do not need to repeatedly define the value that can be inherited in CSS, the child element automatically inherits the attribute value of the parent element, such as color and font, which has already been defined in the parent element, sub-elements 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, if there is such a piece of code in the CSS file, you have defined the element P and defined another class updatep {margin: 1em 0; font-size: 1em; color: #333 ;}. in the two definitions of update {font-weight: bold; color: #600;}, class = update will be used because the class is closer to P. 8. Multiple Classes define one label and multiple classes can be defined at the same time. For example, we first define two styles. The first style background is #666, and 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 <Div class = one two> </div> in this way, the final display effect is that this Div has both a background of #666 and a border of 10 PX. Yes. You can try it. 9. When using the sub-selector (descendant selectors) CSS, beginners do not know that using the sub-selector is one of the reasons that affect their efficiency. The sub-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 </> </LI> </ul> </div> the CSS definition of this Code is as follows: div # subnav ul {/* some styling */} Div # subnav ul Li. subnavitem {/* some styling */} Div # subnav ul Li. subnavitem. subnavitem {/* Some styling */} Div # subnav ul Li. subnavitemselected {/* some styling */} Div # subnav ul Li. subnavitemselected. 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 </> </LI> </ul> the style definition is: # subnav {/* some styling */} # subnav Li {/* some styling */} # subnav A {/* Some s Tyling */} # subnav. sel {/* some styling */} # subnav. sel A {/* some styling */} use a sub-selector to make your code and CSS simpler and easier to read. 10. You do not need to quote the path of the background image. To save bytes, we recommend that you do not quote the path of the background image because the quotation marks are not required. Example: Background: URL (images /***. GIF) #333; can be written as background: URL (images /***. GIF) #333; if you add quotation marks, some browser errors may occur. 11. Group selectors when some element types, classes, or IDs all have common attributes, you can use group selectors to avoid 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 {color: #333; margin: 1em 0 ;} if an independent style needs to be defined for some elements during use, you can add a new definition to overwrite the old one, for example, H1 {font-size: 2em ;} h2 {font-size: 1.6em;} 12. Specify the link style in the correct order. When you use CSS to define multiple state styles of the link, pay attention to the order in which they are written, the correct sequence is: Link: visited: hover: active. The first letter is lvha. You can remember it as love hate ). If your user needs to use a keyboard to control the focus of the current link, you can also define the focus attribute.: The effect of the Focus attribute depends on the position you write. If you want the focus element to display the hover effect, you can write the focus before the hover. If you want the focus effect to replace: for hover effect, you can put: Focus behind: hover. 13. Center horizontally (centering) This is a simple technique, but it is worth repeating: How do CSS center horizontally? You need to define the element width and the horizontal margin. If your layout is included in a layer (container), it is like this: <! -- Your layout starts here --> you can define it to center horizontally: # wrap {width: 760px;/* change it to the width of your Layer */margin: 0 auto ;} however, ie5/win cannot correctly display this definition. We use a very useful technique to solve this problem: Use the text-align attribute. Like this: body {text-align: center ;}# wrap {width: 760px;/* modify the width of your Layer */margin: 0 auto; text-align: left;} the text-align: center of the first body. The rule defines that all the elements of the body in ie5/win are centered (other browsers only center the text), and the second text-align: left is to place the text in # warp to the left. 14. debugging skills: How big is the layer? When a CSS debugging error occurs, it is necessary to analyze the CSS code line by line like a typographical worker. I usually define a background color on the problematic layer, so that it is obvious that the layer occupies a lot of space. Some people suggest using border, which is acceptable in general, but the problem is that sometimes border will increase the element size. Border-top and boeder-bottom will destroy the vertical margin value, therefore, it is safer to use background. Another frequently problematic attribute is outline. Outline looks like a boeder, but does not affect the size or position of the element. 15. CSS code writing style when writing CSS Code, everyone has the writing habits of indentation, broken lines, and spaces. After continuous practice, I decided to adopt the following Writing Style: selector1, selector2 {property: value;} when using the joint definition, I usually write a single row for each selector, in this way, you can find them in the CSS file. Add a space between the last selector and braces {, and each definition also writes a line separately. The semicolon directly adds no space after the attribute value. I used to add points after each attribute value. Although the rule allows the last attribute value to be followed by a semicolon, if you want to add a new style, it is easy to forget to add a semicolon to generate an error, therefore, it is better to add both. Finally, close braces} write a single row. Spaces and line breaks help and read.
