CSS is often defined in HTML in the following three ways: Embedding (embedded), Linking (reference), Inline (Inline)
I. embedded
Use the HTML style element to define CSS styles in the document.
Ii. inline
Each HTML element contains a style attribute that can be directly defined. This style can only be used for the content of this element. It does not work for another element with the same name.
<P style = "color: # FFF; font-weight: bold;"> inline style </p>
Iii. external references
External Reference refers to the dynamic reference of external CSS file definitions rather than CSS styles.
1. Use the Processing Instruction statement of the style sheet
Write an instruction processing statement about the style sheet at the beginning of the HTML document.
<? Xml-stylesheet type = "text/css" href = "mystyle.css"?> <Html> command statement However, this command is only supported for html documents written in xml syntax. Most browsers are only valid when they are saved in xhtml or xml format, and JS cannot process such CSS, it is not recommended.
2. Run the @ import command.
Use the @ import command between style elements to import external css files
<Head> <style type = "text/css"> <! -- The following two lines of code have the same effect: @ import "mystyle.css"; @ import url ("mystyle.css"); --> </style> Any @ import rule must appear before all rules. The parameter is the URL of a css file. In a css file, you can also use the @ import command to import another css file.
3. Use the link Element
<Head> <link rel = "stylesheet" href = "css url" type = "text/css">
This is also the most common method.
4. Use the HTTP message header to link to the style sheet
You can use the link field of the HTTP message header to link an external style sheet.
Link: <mystyle.css>; rel = stylesheet; // equivalent to <link rel = "stylesheet" href = "css url" type = "text/css">
Multiple links can be used in the HTTP header to link Multiple style sheets. The link in the HTTP header has a higher priority than the link in the HTML document.