What are the types of css styles?

There are three types of css styles: 1. Inline style, written in the style attribute of the HTML tag; 2. Inline style, written in the style tag; 3. External style, written in a separate ".css " file, it needs to be introduced into HTML using the link tag or "@import" rule.

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

There are three types of css styles, namely: inline CSS style, inline CSS style, and external CSS style (external style).

1. Inline style (embedded style): Inside the structure, that is, the style written within the tag; written inside the beginning part of the tag, in the style attribute.

<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>

Example:

<div style="color:red"></div>

2. Internal style (inline style): is written inside the HTML page, stored in the head tag, and the style is written in the style tag .

<style>选择器 {属性名：属性值；属性名：属性值；......}</style>

Example:

<style>
  bdoy{font-size:14px;} 
</style>

3. External style (external style): written in css file.

Example:

(Learning video sharing: css video tutorial, "html video tutorial》)

HTML has two ways to reference css files:

1), use the link tag (link type)

Use the link tag to directly introduce the file to the page middle. 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">

2), use @import (import)

There are two ways to use @import to introduce CSS files, one can be placed in the page

@import url(index2.css);

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

@import "sub.css";

Using @import to introduce CSS can easily introduce CSS from external files code for easy 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.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of What are the types of css styles?. For more information, please follow other related articles on the PHP Chinese website!