HTML References CSS (4 Methods)
1. Embedded style sheets
You can add the
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963/</p>
</body>
</html>
The running effect is shown in the figure below:
Figure: Embedded Style Sheets
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 imported into other documents. Redefinition in other documents will lead to code redundancy, which is not conducive to later maintenance.
2. Inline styles
The 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 where it is located. The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
</head>
<body>
<h1 style="color: maroon; margin-left: 40px">睿科知识云</h1>
<p style="color: blue;">https://blog.csdn.net/ccc369639963/</p>
</body>
</html>
The running effect is shown in the figure below:
Figure: Inline styles
Although inline style can easily give CSS style to HTML tags, its shortcomings are also very obvious, so it is not recommended to use it too much.
Defining inline styles requires defining the style attribute in each HTML tag, which is inconvenient;
Be especially careful when using double or single quotes in inline styles, because attributes of HTML tags usually use double quotes to wrap the value of the attribute, for example <input type="text">;
Styles defined in inline styles cannot be reused anywhere else;
Inline styles are very inconvenient for later maintenance, because a website usually consists of many pages, and when modifying the page style, it is necessary to modify the pages one by one;
Adding too many inline styles can increase the size of the HTML document.
3. External style sheets
An external style sheet is the most common and recommended way to reference CSS. You only need to define the CSS style in a .css file, and then use HTML tags to apply the .css style file to the HTML document.
The following uses specific examples to demonstrate the use of external style sheets. First, you need to define a style file in .css format (such as style.css), as follows:
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
Then we import this style.css file in the HTML document as follows:
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963/</p>
</body>
</html>
The running effect is shown in the figure below:
Figure: External Style Sheet
Because the CSS style is defined in a separate .css file, it can be referenced between multiple pages. If you want to modify the style of a web page, you only need to modify the CSS style file, which is very convenient.
4. Import the stylesheet
You can also use @import to refer to external style sheets, which is similar to using tags. The syntax for referencing an external style sheet using @import is as follows:
@import "URL";
or
@import url("URL");
Where URL is the storage path of the external style sheet.
If you also use the style.css style sheet defined above, the code to reference it to the HTML document through @import is as follows:
<!DOCTYPE html>
<html>
<head>
<title>睿科知识云</title>
<style>
@import url("./style.css");
/*@import "./style.css";*/
</style>
</head>
<body>
<h1>睿科知识云</h1>
<p>https://blog.csdn.net/ccc369639963/</p>
</body>
</html>
The running effect is shown in the figure below:
Figure: Import Style Sheet
There are a few things to keep in mind when using @import to reference CSS:
When using @import in an HTML document, @import needs to be defined in <style>the tag. If <style>there are other CSS styles in the tag, then @import must be defined at the front of all styles;
@import can also be used in .css format files, but it also needs to be defined in front of all styles;
@import is a new feature in CSS2.1, so some browsers with lower versions may not support it;
When the page is loaded, the style files referenced by tags will be loaded simultaneously with the page, while the style files referenced by @import will be loaded after the page is loaded. If the style file referenced by @import is too large and the loading time is too long, there will be no style after the page is loaded, which will affect the user experience.