Share four ways to import CSS styles into HTML-CSS Tutorial-php.cn

Share four ways to import CSS styles into HTML

yulia

Release： 2018-09-17 10:46:16

Original

5325 people have browsed it

When laying out a page, CSS and HTML will inevitably be used, because HTML is the main content of the page, and CSS is the performance of the page. In layman's terms, CSS is used to decorate HTML. So how to implement CSS styles in HTML? At this time, you need to Introduce CSS files into HTML. Today I will talk to you about how to import CSS into HTML. You can refer to it if you need it.

There are four ways to import CSS into HTML, namely inline, embedded, and external styles. External styles are divided into import style and link style.

1. Inline style, that is, add css style directly to the HTML tag and add it with style.

For example: set the font in the div to 40px and the color to red. The code is as follows:

<div style="font-size: 40px;color: red;">今天星期一</div>

Copy after login

Rendering:

Share four ways to import CSS styles into HTML

2. Embedded, that is, the CSS style is written in , and then place style between .

For example: write the style in .

For example: Use import to set the font of the div to 40px and the color to yellow. The code is as follows:

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   @import url("css/import.css");
  </style>  
 </head>
 <body>
  <div>今天星期三</div>
 </body>

Copy after login

Rendering:

Share four ways to import CSS styles into HTML

2. Link link type, that is, in to call external css files to achieve style effects.

For example: use external style link to set the color of the div to green and the font to 40px. The code is as follows:

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>  
 </head>
 <body>
  <div>今天星期三</div>
 </body>
</html>

Copy after login

Rendering:

Share four ways to import CSS styles into HTML

##Summary:

1. The inline method is cumbersome, inconvenient to search, and does not reflect the advantages of CSS, so it is not recommended.

2. Embedded is not recommended for large pages, but can be used for small web pages with few styles.
3. It is also an external style.
What is the difference between import style and link style? Using the link link method, the CSS style file will be loaded before the main content of the page is loaded, so that the web page the user sees will have a style effect from the beginning. If you use the import method, the CSS style file will be loaded after the entire page is loaded, so sometimes there will be no style displayed, and the effect after setting the style will appear after a flash. Therefore, from the perspective of user experience, it is recommended to use link style to introduce CSS styles.

The above introduces 4 ways to import CSS into HTML. The specific method to use depends on the situation, but the most commonly used method is the link method. Friends who are learning can practice more and try. ,Hope it helps you!

The above is the detailed content of Share four ways to import CSS styles into HTML. For more information, please follow other related articles on the PHP Chinese website!