CSS tutorial (4) How to insert CSS into a web page-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS tutorial (4) How to insert CSS into a web page

Apr 01, 2017 pm 02:02 PM

css insert Tutorial

In the first two chapters, we learned about the syntax of CSS, but if we want to display the effect in the browser, we must let the browser recognize and call it. When the browser reads the style sheet, it must read it in text format. Here are four methods of inserting style sheets into the page: linking to external style sheets, internal style sheets, importing external style sheets, and embedded styles.

Linking to an external style sheet

Linking to an external style sheet means saving the style sheet as a style sheet file, and then linking to the style sheet file with the ?lt;link> tag on the page. This <link> tag must be placed in the <head> area of the page, as follows:
<head>
……
<link rel="stylesheet" type="text/css" href="mystyle.css">
......
</head>
The above example indicates that the browser reads the defined style sheet in document format from the mystyle.css file. rel="stylesheet" refers to using this external style sheet in the page. type="text/css" means that the file type is style sheet text. href="mystyle.css" is where the file is located.

An external style sheet file can be applied to multiple pages. When you change this style sheet file, the styles of all pages are changed accordingly. It is very useful when making a large number of websites with the same style pages. It not only reduces the workload of repeated work, but also facilitates future modification and editing, and also reduces repeated downloading of codes when browsing.

Style sheet files can be opened and edited with any text editor (for example: Notepad). Generally, style sheet file extensions are .css. The content is a defined style sheet and does not contain HTML tags. The content of the mystyle.css file is as follows:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
(Define the color of the horizontal line to be earthy yellow; the blank margin on the left side of the paragraph is 20 pixels; the background image of the page is the back40.gif file in the images directory)

Internal style sheet

The internal style sheet places the style sheet in the head> area of the page. These defined styles are applied to the page. The style sheet is marked with <style> Inserted, the usage of <style> tag can be seen from the following example:
<head>
……
<style type="text/css">
hr { color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
……
</head>

Note: Some lower version browsers cannot recognize the style tag, which means that the lower version browser will ignore the content in the style tag and replace the content in the style tag as text. displayed directly on the page. In order to avoid this situation, we use HTML comments () to hide the content without letting it display:
<head>
……
&lt ;style type="text/css">

</style>
……
</head>

Importing external style sheet

Importing an external style sheet means importing an external style sheet in the <style> of the internal style sheet. Use @import when importing. See the following example:
<head>
……
<style type=”text/css”>

&lt ;/style>
……
</head>
In the example, @import “mystyle.css” means importing the mystyle.css style sheet. Pay attention to the path of the external style sheet when using it. The method is very similar to the method of linking into a style sheet, but the importing external style sheet input method has more advantages. Essentially it's equivalent to being stored in an internal style sheet.
Note: Importing external style sheets must be at the beginning of the style sheet, above other internal style sheets.

Embedded styles

Inline styles are mixed in HTML tags. In this way, you can easily define a separate style for an element. The use of inline styles is to directly add the style parameter to the HTML tag. The content of the style parameter is the CSS properties and values, as in the following example:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p&gt ;
(The color of this paragraph is earthy yellow, and the left margin is 20 pixels)
The content in the quotation marks after the style parameter is equivalent to the content in the curly brackets of the style sheet.
Note: The style parameter can be applied to any element in BODY (including BODY content), except BASEFONT, PARAM and SCRIPT.

Overlay of multiple style sheets

In the previous chapter we have mentioned the stacking order of style sheets. Here we discuss the overlay of these methods of inserting style sheets. If in the same selection When using several different style sheets on the server, this attribute value will be superimposed on several style sheets. If conflicts are encountered, the last defined one will prevail. For example, we first link to an external style sheet, which defines the color, text-alig and font-size attributes of the h3 selector:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
(The text color of title 3 is red; aligned to the left; the text size is 8 words)
Then the text-align and font-size attributes of the h3 selector are also defined in the internal style sheet:
h3
{
text-align: right;
font-size : 20pt
}
(Title 3 text is aligned to the right; the size is 20-point font)
Then the superimposed style of this page is:
color: red;
text-align: right ;
font-size: 20pt
(text color is red; aligned to the right; size is 20pt)
The font color is retained from the external style sheet, and the alignment and font size are defined , the internal style sheet is followed according to the last defined priority.
Note: According to the priority defined later, the highest priority is the embedded style. The internal style sheet is higher than the imported external style sheet. Between the linked external style sheet and the internal style sheet, the last defined priority is higher. .

The above is the detailed content of CSS tutorial (4) How to insert CSS into a web page. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn