CSS divides overlay styles into three types

Three types of CSS overlay styles: 1. Inline style, write the style code in the style attribute of the HTML tag; 2. Inline style, write the style code in the page "" tag pair; 3. External style, write the style code in an independent ".css" file.

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

In order to enrich the styles of web page elements and to separate the content and styles of web pages, CSS was born from this idea. CSS is the abbreviation of Cascading Style Sheets, which means cascading style sheets. . With CSS, most of the tags that express styles in HTML are no longer needed. HTML is only responsible for the structure and content of the document, and the presentation is completely left to CSS, making HTML documents more concise.

CSS is mainly used to design the style of web pages and beautify web pages; it can not only statically modify web pages, but also dynamically format various elements of web pages in conjunction with various scripting languages.

CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page objects and model styles.

css styles mainly include three types: inline styles (inline styles), internal styles (inline styles), and external styles (outline styles).

1. Inline style: inside the

structure, that is, the style written within the tag; written inside the beginning part of the tag, in the style attribute.

Example:

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

2. Internal style (embedded style):

is written inside the HTML page and stored in the head tag. The style Written within the style tag.

Example:

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

3. External style (external style):

External style is to put all styles in one or more An external style sheet file with the extension .css. A CSS style sheet document represents an external style sheet.

External style sheets must be imported into web documents before they can be recognized and parsed by the browser. External style sheet files can be imported into HTML documents in two ways.

1) Use the tag to import

Use the tag to import the external style sheet file:

<link href="css文件路径" rel="stylesheet" type="text/css" />

Description of each attribute:

• href attribute sets the address of the external style sheet file, which can be a relative address or an absolute address.

• The rel attribute defines the associated document, which here indicates that the associated document is a style sheet.

• The type attribute defines the type of imported file. Like the style element, text/css indicates a CSS text file.

2), use the @import keyword to import

Use the @import keyword in the

<style type="text/css">
@import url("css文件路径");
</style>

After the @import keyword, use the url() function to include the address of the specific external style sheet file.

(Learning video sharing: css video tutorial)

The above is the detailed content of CSS divides overlay styles into three types. For more information, please follow other related articles on the PHP Chinese website!