1. In-line formula
<tagname style="attribute1:attribute-value1;attribute2:attribute-value2;attribute3:attribute-value3;">content</tagname>
In this syntax, style is the attribute of the markup. In fact, any HTML markup has the style attribute, which is used to set the inline style. The writing specifications of properties and values are the same as CSS style rules, and the inline type only works on the tag where it is located and the sub-tags nested in it.
<body> <h2 style="font-size:20px;color:red;">Use CSS inline to modify the font size and color of secondary headings</h2> </body>
The inline style also controls the style through the attributes of the mark, which does not separate the structure and the performance, so it is rarely used. Only used when there are few style rules and only once on the element, or when a style rule needs to be temporarily modified.
2. Inner fitting type
<head>
<style type="text/css">
selector{property1:property value1;property2:property value2;property3:property value3;}
</style>
</head>
In this syntax, the <style> tag is usually placed after the <title> tag in the <head> tag, but it can be placed anywhere in the HTML document. However, because the browser parses the code from top to bottom, putting the CSS code in the head is convenient for downloading and parsing in advance, so as to avoid the embarrassment caused by the lack of style modification after the content of the webpage is downloaded. At the same time, the attribute value of type must be set to "text/css", so that the browser knows that the <style> tag contains CSS code, because the <style> tag can also contain other code, such as JavaScript code.
<head>
<title>Inline import CSS style sheet</title>
<style type="text/css">
h2{text-align:center;}
p{font-size:16px;color:red;text-decoration:underline;}
</style>
</head>
<body>
<h2>Inline CSS styles</h2>
<p>Use the style tag to define an inline CSS style sheet. The style tag is usually located in the head tag, after the title tag. </p>
</body>
Inline CSS styles are only valid for the HTML page they are on, so using inline is a good choice when designing only one page. But if it is on a website, it is not recommended to use this method, because it cannot take full advantage of the reuse of CSS code.
3. Chained
Chaining is to put all styles in one or more external style sheet files with the extension .css, and link the external style sheet files to the HTML document through the <like/> tag.
<head> <like href="Path to CSS file" type="text/css" rel="stylesheet"/> </head>
In this syntax, the <like/> tag needs to be placed in the <head> header tag, and three attributes of the <like/> tag must be specified. as follows:
- 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, which needs to be specified as "text/css" here, 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 "stylesheet", indicating that the linked document is a style sheet file.