How to insert CSS in a Web page
We know the syntax of CSS before, but to show the effect in the browser, we need to let the browser recognize and call. When a browser reads a style sheet, it is read in text format, which describes four ways to insert a style sheet on a page: a link to an external style sheet, an inner style sheet, an imported outer style sheet, and an inline style.
1. Linking to an external style sheet
Linking to an external style sheet is to save the stylesheet as a stylesheet file, and then link to the stylesheet file in the page with the < link > tag, which must be placed in the < head > section of the page as follows:
Copy CodeThe code is as follows:
......
......
The above example indicates that the browser reads the defined style sheet from the Mystyle.css file in document format. Rel= "stylesheet" refers to the use of this external style sheet in the page. Type= "Text/css" means that the type of the file is the style sheet text. Href= "Mystyle.css" is where the file is located. Media is the choice of medium type, which includes: screen, paper, Speech synthesis equipment, Braille reading equipment, etc.
An external style sheet file can be applied to multiple pages. When you change the stylesheet file, the style of all the pages changes with it. It is very useful when making a large number of web sites of the same style page, not only reduces duplication of effort, but also facilitates subsequent modifications, edits, and a reduction of duplicate download code when browsing.
The stylesheet file can be opened and edited with any text editor (for example, Notepad), and the general style sheet file extension is. css. Content is a defined style sheet that does not contain HTML tags, mystyle.css the contents of this file are as follows:
HR {Color:sienna}
p {margin-left:20px}
Body {background-image:url ("Images/back40.gif")}/* Defines the color of the horizontal line as Naturals, the left margin of the paragraph is 20 pixels, and the background image of the page is the Back40.gif file in the images directory */
2. Internal style sheet
An internal stylesheet is a style sheet that is placed in the < head > area of the page, where the styles are applied to the page, the style sheet is inserted with the < STYLE > tag, and the following example shows the use of the < STYLE > tag:
Copy CodeThe code is as follows:
......
......
Note: Some low-version browsers do not recognize the style tag, which means that the lower version of the browser ignores the contents of the style tag and displays the contents of the style tag directly to the page as text. To avoid this, we use HTML annotations (<!--comments->) to hide the content without showing it:
Copy CodeThe code is as follows:
......
......
3. Import an external style sheet
Importing an external style sheet refers to importing an external style sheet in the < style > of the internal style sheet, using @import when importing, to see the following example:
......
......
The example @import "mystyle.css" means importing the MYSTYLE.CSS style sheet, noting the path of the external style sheet when used. Methods are similar to the way they are linked into style sheets, but importing an external style sheet is a more advantageous approach. Essentially it is equivalent to the existence of an internal style sheet.
Note: Importing an external style sheet must be at the beginning of the style sheet, above the other internal style sheets.
4. Inline style
Inline styles are mixed in HTML tags, and in this way, it's easy to define a style individually for an element. The use of inline styles is to add the style parameter directly to the HTML tag. The contents of the style parameter are the properties and values of the CSS, as in the following example:
This is a paragraph
The contents of the quotation marks after the style parameter are equivalent to the contents of the style sheet curly braces.
Note: The style parameter can be applied to elements within any body, including the body itself, except Basefont, param, and script.
