Solve the problem that HTML external reference CSS files do not take effect

Solve the problem that HTML external reference CSS files do not take effect

As a front-end hacker, I have been busy with the front-end for a few days .. Today I suddenly found something I believe in, and something went wrong .. For example, I wrote a css style document under the css Directory: style.css. There is only one sentence:

Body {background-color: # ddd ;}

Then introduce the external css in my html file:

Refresh in the browser .. Wow, kao. It didn't respond, and it didn't work .. I checked this path several times and confirmed it was okay. Open chrome's F12 debugger. Make sure that the browser loads the css file. Then I open the file and see:

Garbled characters .. It should be because the encoding format is wrong, but it cannot be used .. After consulting a front-end partner, I checked the current code of the webpage:

Displays the UTF-16LE encoding ..

I tried later and used the sublime editor to modify the local css file encoding format to this utf-16LE:

Rewrite the css code. Save and run .. That's enough ..

But my html I specify UTF-8 while css is UTF-16, which makes me very uncomfortable .. So I asked about the solution. It can be solved, and it is very simple ..

Change css to UTF-8 and edit the code. You only need to declare the encoding format when html introduces this css:

Add charset = "UTF-8" to the link tag... It's actually that simple...