Why css styles don't work

Reasons why css style does not work: 1. The browser has cache; 2. The html tags are not completely written, missing "", "/", etc.; 3. css syntax Errors, such as wrongly writing the attribute name, using Chinese or full-width symbols; 4. The external CSS style sheet is not associated or the associated path is wrong; 5. The encoding of the style sheet saved is wrong; 6. The styles are cascaded.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Browser cache problem

If you check repeatedly and think there is no problem with the code, then it may be a browser cache problem.

If the user has visited the system before, the browser will cache the CSS and JS of the system. Before these CSS and JS caches expire, the browser will only read the CSS and JS from the cache. If the css and js are modified on the server, these modifications will not change in the user's browser.

Solution:

Review the ‘F12’ element of the browser to see which styles are not applied.

2. The html tag is not completely written, missing "" or "/" etc.

This is one of the most common reasons why layout design fails. It’s always surprising when we learn how many delicate layout designs fail because of this.

3. CSS syntax errors

General syntax errors include:

1) Wrong attribute names and attribute values ​​that do not meet the specifications ;

2), the following symbols use Chinese or full-width symbols:

，；｛｝：

4, the external CSS style sheet is not associated or the association path is wrong

This is a very embarrassing mistake, but I have encountered it before. I worked hard to write the code, but found that none of the styles took effect. I worked stupidly for a long time, and finally found that I forgot to associate external styles or paths. Something went wrong, my mood at that time was really. .

If all your styles do not take effect, first confirm whether the style sheet is associated, or whether the associated style position and name are correct

<link rel="stylesheet" href="css/index.css"/>

5. The encoding of the style sheet saved is wrong

Encoding format issue

Save CSS and HTML web page files in UTF-8 format; that is, add in the header tag

Because generally web pages use UTF-8 encoding format, and external CSS files default to ANSI encoding format. Generally, there will be no problem. However, problems may occur when the CSS file contains Chinese comments.

6. Styles are cascaded

Check if there is a problem with your css priority. The higher priority will overwrite the lower one and the style will not be visible;

If the style is set itself, the style inherited from the parent will not take effect; css style priority sorting:

!important > Inline style>ID selector> class Selector> Tag> Wildcard> Inheritance> Browser default attribute (when the priority is the same, the later cascades the previous style);

Troubleshooting order:

(Learning video sharing: css video tutorial)

The above is the detailed content of Why css styles don't work. For more information, please follow other related articles on the PHP Chinese website!