What are the ways to use css in html

There are 4 ways to use css in html: 1. Use the style attribute in the HTML tag to set the css style; 2. Use the style tag in the head tag to set the css style; 3. Use the link tag to import An external css file; 4. Use the "@import" rule to import the external css file.

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

There are 4 ways to use css in html:

• Inline method (inline style)

• Internal method ( Embedded style)

• Use link tag (link style)

• Use @import (import style)

1. Inline mode (inline style)

Use the style attribute in the HTML tag to set the css style

Format:

<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

Example:

<p style="color:orange;font-size:18px">在HTML中如何使用css样式</p>

Features: Only applies to this tag.

2. Internal method (embedded style)

is to use the style tag in the head tag to set the css style

Format:

<style type="text/css"> ....css样式代码 </style>

Features: Acts on the entire current page

3. Use the link tag (link type)

Write the css code in a separate file, use The link tag directly introduces the file into the page. A page can use the LINK tag multiple times to introduce multiple external CSS files. Pay attention to the mutual influence of these CSS codes. Usually, the CSS files introduced later will overwrite the same effects of the CSS files introduced earlier. This method of introducing CSS is currently the most popular. CSS codes can be planned within the scope of each website to facilitate reuse and maintenance. However, this highly centralizes the code, and the amount of code may be too large, and it is easy to cause problems if it is not properly maintained. confusion.

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

4. Use @import (import)

There are two ways to use @import to introduce CSS files, one can be placed in the page, the usage is as follows:

@import url(index2.css);

In addition, it can also be used in a CSS file, the usage is as follows:

@import "sub.css";

It is very convenient to use @import to introduce CSS Introduce CSS code from external files to facilitate maintenance and planning. However, every time an additional CSS file is introduced, a connection request will be added to the server. When the number of visits is large, a trade-off needs to be made between maintainability and performance.

Recommended tutorial: "html video tutorial"

The above is the detailed content of What are the ways to use css in html. For more information, please follow other related articles on the PHP Chinese website!