Explanation: There are three technologies for web development, namely html, css and js, which correspond to the structure, performance and action of the page respectively. The introduction of css style means that the rendering of the page is applied to the html, and there are three ways: inline, embedded and outlink.
The first one: inline style (not recommended)
Set the style within the tag, multiple attribute settings are separated by semicolons (;)
<!-- 用行内式设置字体颜色为蓝色 -->
<h1 style="color: blue;">行内式</h1>
The second type: embedded (recommended)
Set the style tag outside the body tag, and write the attributes of the html element inside the style tag. It is recommended that the style tag be written in the head tag.
<head>
……
<style>
/* 用内嵌式设置字体颜色为蓝色*/
h1 {
color: red;
}
</style>
<!-- 建议style标签写在head标签内 -->
</head>
<body>
<h1>内嵌式</h1>
</body>
The third type: outreach (professional)
Extract the style code and generate a file with a suffix of .css. If html needs to be used, just quote it, and multiple css files can be externally connected. It should be noted that the path can use an absolute path; but if you want to use a relative path, the path is from the perspective of the html file, "./" indicates the horizontal directory of the html file; ".../" indicates the upper-level directory, ".../.../ "Indicates the parent directory, and so on.
<head>
……
<!-- vscode 敲"link:css"会有代码提示 -->
<link rel="stylesheet" href="../essay/css.css">
</head>
<body>
<h1>外联式</h1>
</body>
priority
The principle of using styles for html elements is: the principle of proximity, that is, whichever style is closest to you, you should use whichever one is preferred.
Remove the inline style and see the use of the other two styles
Summarize
The first type of inline style, the style can only be applied to a single element, and if the style code is written a lot, the label will become very long, the code is difficult to read, and it is not recommended;
The second type of embedded style separates the style from the page interface, which improves the readability of the code. However, if the page structure is complex and there are many css styles, maintenance and development will be more difficult. For example, if you want to see the style of an element, you need to check up and down frequently. The page structure is not very complicated, and it is recommended to use it when there are not many style codes.
The third type of outreach, which supports outlinking multiple css style files, is a professional import method, such as some websites found in browsers, such as the official website of CSDN, which uses this method.
