Article Directory
1 Introduce CSS style sheet (writing position)
There are three writing positions for css, namely internal style sheet, inline style (inline style), and external style sheet (outline style)
1.1 Internal style sheet
The internal style sheet can also be called inline, which is to write css into the head tag of the HTML document,
and need to use the style tag to define
Written in style internal
grammar, the style tag is usually located after the title tag in the head tag, and it can also be placed anywhere in the HTML document.
Type="text/CSS" can be omitted in html5, and it is more in line with the specification, so this place can be written or omitted.
1.2 In-line formula
Inline style is to set the css style through the style attribute of the label itself.
As shown in the figure, it is written inline as inline style.
The style in the grammar is the attribute of the tag. In fact, any HTML tag has the style attribute to set the inline style. The writing specifications for attributes and values are the same as the CSS style rules, and the inline format only works on the label where it is located and the child tags nested in it .
1.3 External style (external chain type)
Linked style is to put all styles in one or more external style sheet files with the extension of .CSS, and link the external style sheet files to the HTML document through the link tag. The basic syntax format is as follows:
<link href="test06.css" type="text/css" rell="stylesheet"/>
You need to associate the css file with the html file through the link tag, so that the style set in the css file can be referenced by html. Note that the link tag is a but tag, written in the head tag
href : Defines the URL of the linked external style sheet file, which can be a relative path or an absolute path.
type : Defines the type of the linked document, where it needs to be specified as "text/CSS", indicating that the linked external file is a CSS style sheet.
rel: Defines the relationship between the current document and the linked document, where it needs to be specified as a stylesheet , which means that the linked document is a style sheet file.
1.4 Summary of three style sheets
| Style sheet | advantage | Disadvantage |
|---|---|---|
| Inline style | Easy to write | No separation of style and structure |
| Internal style sheet | Part of the structure is separated from each other | There is no complete separation, and once the amount of code is large, modification is more troublesome |
| External style sheet | Complete separation of structural styles | Need to introduce |