What are the ways to reference CSS in HTML?-HTML Tutorial-php.cn

What are the ways to reference CSS in HTML?

php中世界最好的语言

Release： 2018-02-11 10:51:54

Original

2116 people have browsed it

This time I will bring you what are the ways to reference CSS in HTML, what are the precautions about how to reference CSS in HTML, the following is a practical case, Let’s take a look.

In HTML, the main methods of introducing CSS are inline, embedded, imported and linked
Inline: that is, setting the CSS style in the style attribute of the mark. This This method essentially does not reflect the advantages of CSS, so it is not recommended to use
Example:

      <html>
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
      </head>
      <body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
      </body>
      </html>

Copy after login

Embedded: Embedded will focus on writing the settings for various elements in the page in < Between head> and , this method is very convenient for a single web page. But for a website that contains many pages, if each page sets its own style inline, it will lose the huge advantages brought by CSS. Therefore, a website usually writes an independent CSS style sheet file, using the following two One of these methods is introduced into the HTML document.
Example:

      <html>
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
      color:white;
      background-color:boue;
      }
</style>
      </head>
      <body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
      </body>
      </html>

Copy after login

Import type and link type: The purpose of import type and link type is to introduce an independent CSS file into an HTML file, and there are corresponding differences between the two.
In fact, the biggest difference between the two is that the link type uses HTML tags to introduce external CSS files, while the import type uses CSS rules to introduce external CSS files. Therefore their syntax is also different.
If you use link style, you need to use the following statement to introduce external CSS files.

<link href="mystyle.css" rel="stylesheet" type="text/css" />

Copy after login

If you use import, you need to use the following statement.

<style type="text/css">
       @import"mystyle.css";
</style>

Copy after login

In addition, the display effects of these two methods are also slightly different. When using the link method, the CSS file will be loaded before the main part of the installation page, so that the displayed web page will have a style effect from the beginning. When using the import method, the CSS file will be loaded after the entire page is loaded. For For some browsers, in some cases, if the size of the web page file is relatively large, an unstyled page will be displayed first, and then the style-set effect will appear after a flash. From the perspective of the viewer, this is a drawback of using import. For some relatively large websites, in order to facilitate maintenance, you may want to put all CSS styles into several CSS files. In this way, if you use link import, you need several statements to import the CSS files separately. If you want to adjust the classification of CSS files, you need to adjust the HTML files at the same time. This is a drawback for maintenance work. If you use the import method, you can only import a general CSS file, and then import other independent CSS files in this file; the link method does not have this feature.

So a suggestion here is that if you need to introduce a CSS file, use the link method; if you need to introduce multiple CSS files, first use the link method to introduce a "directory" CSS file, this " Directory" CSS file and then use import to introduce other CSS files.
If you want to dynamically decide which CSS file to import through JavaScript, you must use the link method to achieve this.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!