Share 9 practical tips for making CSS web pages

This article shares 9 practical techniques for making CSS web pages to lay the foundation for website reconstruction. I hope you can learn something useful.

1. Use css abbreviation Using abbreviations can help reduce the size of your CSS files and make them 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 Forgot to define the unit of size is CSS Novice Pop

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 sensitive
When using CSS in XHTML, the element name defined in CSS is case-sensitive. To avoid this error, I recommend that all definition names be lowercase.
Class and id values ​​are also case-sensitive in HTML and XHTML. If you must use mixed case, Please carefully confirm that your definition in CSS is consistent with the tags in XHTML
4. Cancel the element restrictions before class and id
When you write to define class or id for an element, You can omit the previous element qualification, because the ID is unique in a page, and it can be used multiple times in the page. It is meaningless for you to limit an element. For example:
p#content { /* declarations. */ }
fieldset.details { /* declarations */ }
can be written as
#content { /* declarations */ }
.details { /* declarations */ }
This can save some bytes.
5. Default value
Usually the default value of padding is 0, and the default value of background-color 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. It can be directly inherited in child elements without repeated definition. But be aware that the browser may override your definition with some default values.
7. Closest first principle
If there are multiple definitions of the same element, the closest (minimum level) definition will be the highest priority. For example, there is this 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;
}
Of 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 has a background of #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
＜p class="one" two＞＜/p＞
The final display effect is that the p has both a #666 background and a 10px border. Yes, it is possible to do this, 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. Subselectors can help you save a lot of class definitions. Let’s look at the following code:
＜p 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＞
＜/p＞
The CSS definition of this code is:
p#subnav ul { /* Some styling */ }
p#subnav ul li.subnavitem { /* Some styling */ }
p#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
p#subnav ul li.subnavitemselected { /* Some styling */ }
p#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 subselectors to make your code and CSS more concise and easier to read.                                                                                                

The above is the detailed content of Share 9 practical tips for making CSS web pages. For more information, please follow other related articles on the PHP Chinese website!