How do i insert a CSS in a Web page
We know the syntax of CSS before, but in order to display the effect in the browser, we should let the browser recognize and call. When the browser reads the style sheet, read it in text format, here are four ways to insert a style sheet on a page: link to an external style sheet, an internal style sheet, import a foreign style sheet, and an inline style.
1. Link to external style sheet
The link to an external style sheet is to save the stylesheet as a style sheet file, and then link to the stylesheet file with the < link > tag in the page, which must be placed in the page's < head > area, as follows:
Copy Code code as follows:
......
<link href= "Mystyle.css" rel= "stylesheet" type= "Text/css" media= "All" >
......
The above example indicates that the browser reads the defined style sheet in document format from the Mystyle.css file. Rel= "stylesheet" refers to the use of this external style sheet in a 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, these media include: screen, paper, Speech synthesis equipment, Braille reading equipment.
An external style sheet file can be applied to multiple pages. When you change the style sheet file, the style of all the pages changes. It is useful when making lots of web sites with the same style pages, not only reducing the amount of repetitive work, but also being helpful for later revisions, edits, and less repetitive downloading of code when browsing.
The style sheet file can be opened and edited with any text editor (for example, Notepad), and the general style sheet file extension is. css. The content is a defined style sheet and contains no 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 to be naturals; the margin to the left of the paragraph is 20 pixels; the background picture of the page is the Back40.gif file in the images directory * *
2. Internal style sheet
The internal style sheet is where the style sheet is placed in the < head > area of the page, the defined styles are applied to the page, and the style sheet is inserted with the < STYLE > tag, which is used in the following example to see the use of the < STYLE > tag:
Copy Code code as follows:
......
<style type= "Text/css" >
HR {Color:sienna}
p {margin-left:20px}
Body {background-image:url ("Images/back40.gif")}
</style>
......
Note: Some of the lower versions of browsers do not recognize the style tag, which means that a 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 annotation (<!--annotation->) to hide the content without displaying it:
Copy Code code as follows:
......
<style type= "Text/css" >
<!--
HR {Color:sienna}
p {margin-left:20px}
Body {background-image:url ("Images/back40.gif")}
-->
</style>
......
3. Import an external style sheet
Importing an external style sheet refers to importing an external style sheet in the < style > of an internal style sheet, using @import when importing, and looking at the following example:
......
<style type= "Text/css" >
<!--
@import "Mystyle.css"
Declaration of other style sheets
-->
</style>
......
In the Note: Importing an external style sheet must be at the beginning of the style sheet, above the other internal style sheet.
4. Inline style
Inline styles are mixed in HTML tags, and in this way, you can simply define a style for an element individually. The inline style is used directly to add the style parameter to the HTML tag. The content of the style argument is the properties and values of the CSS, as in the following example:
<p style= "color:sienna;margin-left:20px;" >
This is a paragraph
</p> <!--This paragraph color is naturals and the left margin is 20 pixels-->
The quotation marks that follow the style argument correspond to the contents of the curly braces.
Note: The style parameter can be applied to elements within any body (including the body itself), except for Basefont, Param, and script.
