1. Make good use of CSS abbreviation can reduce the size of the page file, increase the download speed, and simply read the code. Can be written as Another example: Can be rewritten as: (For details, please refer to: CSS2 reference manual, commonly used CSS abbreviation summary) 2. It can set multiple rules for the Class attribute of a HTML element at the same time (multiple Class definition). This element also includes styles set in A and B 3. Clarify the unit, unless the value is 0 Note: Do not add an empty grid between numerical and units. 4. Differentiated manuscripts in XHTML. The element name defined by CSS is distinguished. The values of Class and ID are also distinguished in HTML and XHTML. Therefore, in order to avoid errors, it is recommended to use a lowercase. Can't show 1 pixel edge line 5. CSS's recent priority principles If you define multiple styles on a element, the latest first -level first -level style will be defined by other styles. This shows red here This shows blue here It shows green here Here is yellow It is also displayed as yellow because the .yllow is behind .blue. 6. Definitions of using sub -selectors to reduce ID and class, for example: Can be changed to: 7. Don't add the background picture path to change the background: url ("xxx.gif") to background: url (xxx.gif) 8. The path of the background picture is relative to the current CSS page. For example: 9. The use of different elements to apply the same style such as H1, H2, H3, div {font-size: 16px; font-weight: bold} 10. Write the correct link style. When defining the various states of the link with CSS, be sure to pay attention to its writing order, that is, :: link: visited: hold: active. 11. Forbidden content changes and compulsory content changes in tables or layers We may hope that the content will not be changed or forced to change the line. We can meet these requirements through some CSS attributes. 12. Difference Relative, the writing in CSS is: Position: Relative; he means absolutely relatively positioning. He is the original point of the parent -level original point, and the father -level is based on the original point of Body. When there are CSS attributes such as padding in the parent -level, the current level of the current level is located with reference to the original point of the parent content area. 13. Differential div and span 14. Differential Display and Visibility
like:
DIV {
border-top: 1px solid #ccccccc;
border-left: 1px solid #ccccccc;
border-right: 1px soli #ccccccc;
Border-Bottom: 1px solid #ccccccc;
}
p {border: 1px solid #ccccccc}
DIV {
margin-top: 10px;
Margin-Right: 20px;
Margin-Bottom: 30px;
margin-heft: 40px;
}
/*Pay attention to the order of writing up, right, down, and left*/
div {margin: 10px 20px 30px 40px}
/*Note that the value and the unit cannot have a space, and the space is separated by space between each value*/
Usually we write:
In fact, we can specify multiple rules for the P element, such as:
CSS:
.a {...}
.b {….}
Html:
Note: Separate with spaces between multiple rules.
Forgot to define the size is a common problem in CSS beginners. We can write width = "100" in html, but a accurate unit should be given in CSS. Such as: width: 100px; height: 50px; FONT-SIZE: 9pt, except 0, because no matter any unit. The size of the 0 value is equal.
Such as #AAA, which is different from #aaa. In XHTML, P and P are also different. They will not cover between them.
If #AAA is defined in CSS, the use of AAA in HTML elements to apply it will not be able to obtain the style defined in #AAA.
Example code:
CSS:
#AAA {border: 1px solid #ccc}
Html:
like:
CSS:
p {color: red}
.blue {color: blue}
.yllow {color: YELLOW}
Html:
Notice:
(1) Pay attention to several priority sequences of styles (priority decreases from top to bottom):
--Nele style settings
--Head area settings
-In external reference CSS files (2) Priority is not set in the order of access, but the order order in the CSS is set.
As shown in the above example, it shows yellow
#Contain {..}
#Contain_ul {...}
.contail_li {...}
#Contain {..}
#Contain ul {...}
.contain ul li {...}
Because adding quotes for some browsers can cause errors.
It is the following directory structure-iMages
-xxx.gif
-CSS
--xx.css
--DDex.html
Code content
Index.html references the xx.css file.
XX.CSS wants to quote xxx.gif pictures.
Then H1, H2, H3, DIV elements are all 16 pixels, thick fonts
If you do not write in this order, you may not be able to achieve the effect of your hope. In order to remember this order, we extract the first letters of each word: LVHA, you can remember the order by memory love, hero, two words.
Forbidden to change: White-Space: NOWRAP
Compulsory change: word-wrap: break-word; word-break: normal;
Absolute, the writing in CSS is: Position: Absolute; he means absolute positioning. He refer to the upper left corner of the browser, with TOP, Right, Bottom, Left (hereinafter referred to as TRBL) for positioning. Based on the original point of the parent -level bids as the original point. If the TRBL is set and the parent level does not set the Position attribute, then the current Absolute is positioned with the original point in the upper left corner of the browser, and the position will be determined by TRBL.
DIV is a block -level element that can contain paragraphs, tables and other content for placing different content. Generally, we lay out every block on the webpage to lay out every block in the webpage.
SPAN is an internal associated element, without practical significance. Its existence is purely to apply styles, adding a section of the content to set the style on the SPAN to set its content.
Display: None and Visibility: Hidden can hide an element but Visibility: Hidden just hides the content of the element, but the location space used is still retained.
Display: None is quite removed from the page, and its occupation position will also be deleted.