search
HomeWeb Front-endCSS Tutorial9 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.


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
What does margin: 40px 100px 120px 80px signify?What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PM

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

What are the different CSS border properties?What are the different CSS border properties?Apr 28, 2025 pm 05:30 PM

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

What are CSS backgrounds, list the properties?What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PM

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.

What are CSS HSL Colors?What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PM

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.

How can we add comments in CSS?How can we add comments in CSS?Apr 28, 2025 pm 05:27 PM

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.

What are CSS Selectors?What are CSS Selectors?Apr 28, 2025 pm 05:26 PM

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.

Which type of CSS holds the highest priority?Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PM

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.

In how many ways can we add CSS to our HTML file?In how many ways can we add CSS to our HTML file?Apr 28, 2025 pm 05:24 PM

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)

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)