HTML can only present some information and has very limited performance capabilities. It needs to be used in conjunction with CSS to make the page more beautiful. In a web page, all style code can be moved out of the HTML document and into a separate style sheet.
CSS styles can be introduced into HTML documents as separate files (.css type files) or written directly in HTML documents. They can be roughly divided into the following four methods:
1. Embedded style sheet
Embedded: Concentrate CSS styles in the <style></style> tag pair of the <head></head> tag pair of the web page;
Add css styles to the <style> tag in the <head> tag of HTML. CSS styles defined using inline style sheets can only be used within the current web page.
<!DOCTYPEhtml><html><head><title>Inline style</title><style>body{background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< /head><body><h1>Style</h1></body></html>Because the embedded style sheet needs to define the CSS style inside the HTML document, it will increase the size of the document, and when other documents also need to use the same style in the embedded style sheet, it cannot be introduced into other documents and must be Redefining it in other documents will lead to code redundancy and is not conducive to later maintenance.
2. Inline styles
Inline: Also called inline, the CSS style is set in the style attribute of the tag. This approach does not reflect the advantages of CSS;
Inline style is to define the style information directly in the style attribute of the HTML tag. Since the inline style is defined inside the tag, it is only valid for the tag in which it is located.
<!DOCTYPEhtml><html><head><title>Inline</title></head><body><h1style=color:maroon;margin-left:40px>Inline</h1></body ></html>Although inline style can easily give CSS styles to HTML tags, its shortcomings are also very obvious, and it is not recommended to use it too much.
(1) Defining inline styles requires defining the style attribute in each HTML tag, which is very inconvenient;
(2) Be especially careful when using double quotes or single quotes in inline styles, because attributes of HTML tags usually use double quotes to wrap the attribute value, such as <input type=text>;
(3) Styles defined in inline styles cannot be reused anywhere else;
(4) Inline styles are very inconvenient in later maintenance, because a website usually consists of many pages, and when modifying the page style, the pages need to be modified one by one;
(5) Adding too many inline styles will cause the size of the HTML document to increase.
3. External style sheets
Link type: Like the fourth import type, they are both called external type or external link type. Use link to reference external CSS files;
External style sheets are the most common and recommended way to reference CSS. You only need to define the CSS style in a .css format file, and then use the HTML <link> tag to apply the .css format style file to HTML. in the document.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>External stylesheet</h1></body>< /html>
Because the CSS style is defined in a separate .css format file, it can be referenced between multiple pages. If you want to modify the style of a web page, you only need to modify this CSS style file, which is very convenient.
4. Import style sheet
Imported: Use @import to reference external CSS files;
You can also use @import to reference external style sheets, which is similar to using the <link> tag. Create a general style.css first, and import all styles into style.css first.
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>External style sheet</h1></body></html >
style.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css: (the css from 1 to 4 are the same, they all add styles)
.top1{list-style-type:none;margin:0;padding:0;}