Getting Started with CSS: How to insert CSS in a Web page

css| Insert | 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 the style sheet file with the <link> tag in the page, which must be placed in the

......
<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 as naturals; the margin on the left side 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 stylesheet is placed in the

......
<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 annotations (<!--annotation-->) to hide content without displaying it:

......
<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 into 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>
......

Example, @import "Mystyle.css" represents the import of the MYSTYLE.CSS style sheet, noting the path to the external style sheet when used. Methods are similar to methods that are linked to style sheets, but importing external style sheet input is more advantageous. Essentially, it is equivalent to being in an internal style sheet.
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>
<!--The 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.

5. Overlay of multiple style sheets

In the previous chapter we have mentioned the cascading order of style sheets, here we discuss the superposition of these methods of inserting a stylesheet, and if a few different style sheets are used on the same selector, the property value will overlay several stylesheets, where the conflict will be the final definition. For example, we first link to an external style sheet that defines the color, Text-alig, and Font-size properties of the H3 selector:

H3
{
color:red;
Text-align:left;
font-size:8pt;
}
/* Heading 3 text color is red, aligned to the left, text size is 8th words * *

The text-align and Font-size attributes of the H3 selector are then also defined in the Internal style table:

H3
{
Text-align:right;
font-size:20pt;
}
/* Heading 3 text to the right, size 20th words * *

Then the overlay of this page is the following style:

color:red;
Text-align:right;
font-size:20pt;
/* Text color is red, right alignment, size 20th #

The font color is retained from the external style sheet, and the alignment and font dimensions are defined, followed by the internal style sheets, as defined by precedence.

Note: in accordance with the precedence defined above, the highest priority is the [s] inline style [/s],[s] internal style sheet [/s] is higher than the external style sheet imported by [s.] Import external style sheet [/s],[s] and [s] internal style sheets [/] Is the last defined high priority.