What are the types of css styles?

There are three types of CSS styles: 1. Inline styles (embedded styles), which use the style attribute to directly add CSS code to HTML tags; 2. Internal styles (inline styles), which write css styles In the style tag; 3. External style (external style), write the css style in a separate ".css" file.

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

CSS styles mainly include the following three types:

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

Example:

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

Advantages:

• Without the style sheet file, efficiency can be improved at some point;

• The style effect using the style attribute will be the strongest and will override the same style effect of other introduction methods.

Disadvantages:

• It is difficult to share styles with multiple elements, which is not conducive to code reuse;

• HTML and CSS code are mixed, making it difficult for programmers and search engines to read.

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

Example:

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

Advantages: Like interline style sheets, no additional requests are generated, and it initially realizes the separation of structure and style, making it more suitable for single-page website applications.

Disadvantages: Since the internal style sheet is written in the HTML file, the page is impure, the file size is large, it is not conducive to web crawlers to obtain information, it is not conducive to maintenance, and styles cannot be shared between pages

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

Then link to the page through the 2cdf5bf648cf2f33323966d7f58a7f3f link tag, and the link statement must be placed in the 93f0f5c25f18dab9d176bd4f6de5d30e tag area of ​​the page.

Example:

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

Advantages:

• Complete separation of structure and performance code

• Convenient for reuse and maintenance

• Because it is separated into separate files, the size of the HTML file is greatly reduced, making the page structure easier to read by programmers and web crawlers

• Friendly to search engines, allowing search engines to rate the page higher, which is beneficial to the page’s search engine ranking

• The external style sheet will be used after the user’s first visit It will be cached on the user's computer, and there is no need to load it next time.

Disadvantages:

• If there are many styles, the CSS file will become very large. It is inconvenient to find. In addition, one more CSS file means one more HTTP request, which will increase the pressure on the server on a website with a large number of visits

(Learning video sharing: css video tutorial)

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!