9 practical tips for making css web pages

This article summarizes some common CSS techniques to lay the foundation for website reconstruction. I hope you can learn something useful.

　1. 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 abbreviation, please refer to "CSS Basic Syntax".

　 2. Define the unit clearly, unless the value is 0

　 Forgetting to define the unit of the size is a common mistake among CSS newbies. In HTML you can just write ;100, but in CSS you have to give an exact unit, like: "width:100em." There are only two exceptions to not defining the unit: line height and 0 value. Otherwise, All other values ​​must follow the unit. Be careful not to add a space between the value and the unit.

　 3. Case sensitivity

When using CSS in XHTML, the element names defined in CSS are case-sensitive. For this kind of error, I recommend that all definition names be lowercase. The values ​​of class and id are also case-sensitive in HTML and XHTML. If you must use mixed case, please carefully confirm your definition and definition in CSS. The tags in XHTML are consistent.

4. Cancel the element qualification before class and id

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

　div#content { /* declarations */ }

　fieldset.details { /* declarations */ }

　

　 #content { /* declarations */ }

　 .details { /* declarations */ }

　 This can save some bytes

　 5. Default value

Usually the default value of padding is 0, background-color. The default value is transparent, but the default value may be different in different browsers. If you are afraid of conflicts, you can define the margin and padding values ​​of all elements as 0 at the beginning of the style sheet, like this:

　 * {

　 margin :0;

　padding:0;
　}

　6. No need to repeatedly define inheritable values ​​

　 In CSS, child elements automatically inherit the attribute values ​​​​of the parent element, such as color, font, etc., which have been defined in the parent element Yes, it can be directly inherited in child elements without repeated definitions. However, be aware that the browser may overwrite your definition with some default values. 7. Recent first principle

If there are multiple definitions of the same element. , the closest (minimum level) definition is given 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 also defined a classupdate

　p {

　　margin:1em 0;

　font-size:1em;

　color:#333;

　}
　.update {
　font-weight:bold;
　color:#600;
　}

　Among these two definitions, class ="update will be used because class is closer than p. You can check out W3C's "Calculating a selector's specificity" to learn more.

8. Multiple class definitions

A tag can define multiple classes at the same time. For example: We first define two styles, the first style background is # 666; The second style has a 10 px border.

　.one{;background:#666;}

　.two{border:10px solid #F00;}

　 In the page code, we can call it like this

　＜ div class="one" two＞＜/div＞

　The final display effect is that this div has both a #666 background and a 10px border. Yes, this is possible, you can try it.

9. Use descendant selectors

CSS beginners don’t know that using descendant selectors is one of the reasons that affects their efficiency. Let’s look at the following code:

　 ＜div id="subnav＞"

　 ＜ul＞

　 ＜li class="subnavitem＞" ＜a href="http://www.php1.cn/">　 ＜li class="subnavitemselected＞" ＜ a href="http://www.php1.cn/">　＜li class="subnavitem＞"＜a href="http://www.php1.cn/">　＜/ul＞

　＜/ div＞

　The CSS definition of this code is:

　div#subnav ul { /* Some styling */ }

　div#subnav ul li.subnavitem { /* Some styling */ }

　div#subnav ul li.subnavitem you can Replace the above code with the following method

　＜ul id="subnav＞"
　＜li＞ ＜a href="http://www.php1.cn/">　＜li class="sel＞" ＜a href="http://www.php1.cn/"> ＜li＞ ＜a href="http://www.php1.cn/"> ＜/ul＞

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.