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 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.

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.

Article discusses three methods to add CSS to HTML: inline, internal, and external. Each method's impact on website performance and suitability for beginners is analyzed.(159 characters)


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

SublimeText3 Chinese version
Chinese version, very easy to use

WebStorm Mac version
Useful JavaScript development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SublimeText3 Mac version
God-level code editing software (SublimeText3)
