How to reference css-Front-end Q&A-php.cn

In web page production, CSS (Cascading Style Sheets) is a language used to control the style and layout of web pages. It can realize the beautification and compatibility of web pages, and greatly facilitates front-end development work. This article will introduce how to reference CSS.

1. Internal style sheet

The internal style sheet embeds the CSS style sheet into the HTML document. Using an internal style sheet, we need to create a tag in the tag and write the CSS code in it as follows:

h1 { color: red; font-size: 36px; } Copy after login In this way, the text color of the h1 element will be set It is red and the font size is 36 pixels. It should be noted that this method can only be used for the current page and is not suitable for multiple pages sharing the same style.

2. External style sheet

External style sheet saves the CSS style sheet to a separate file and then references the file in the HTML document. To use an external style sheet, we need to add a tag in the tag and specify the path to the CSS file in its href attribute as follows:

Copy after login In the styles.css file , we can write the CSS style that all pages need to use, for example:

h1 { color: red; font-size: 36px; } Copy after login In this way, the h1 element text in all pages that reference styles.css will be set to red, with a font size of 36 pixels.

3. Inline style sheet

Inline style sheet defines the CSS style as an attribute of the element. Using an inline style sheet, we use the style attribute directly in the HTML tag as follows:

Hello World! Copy after login In this way, the text color of the h1 element is set to red and the font size is 36 pixels. It should be noted that excessive use of inline style sheets should be avoided because they are cumbersome to maintain and are not conducive to using the same CSS style for multiple elements.

Summary:

For the above three methods, the internal style sheet is suitable for styles used on a single page, the external style sheet is suitable for styles shared by multiple pages, and the inline style sheet is suitable for personality. Customized style settings. Proficient use of these methods can make front-end development work more efficient and standardized.