Usually the css and js methods are introduced as link, script and style
①<style> tags are used to define style information for HTML documents, located in the head section
The type attribute is required and defines the content of the style element, the only possible value is "text/css"
To link external style sheets, use the <link> tag
②<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
Use the link tag to import the css file
③<script src="../lib/OpenLayers.js"></script>
Use script tags to import js files
The priority of id is higher than that of class. When adding style attributes to the object at the same time, id will be executed first.
In HTML, there are four main ways to introduce CSS: inline, inline, import and link
<head></head>之间
①Inline: set by style
<div style="font-size:12px; text-align:center;">Inline method of referencing CSS in HTML</div>
②Embedded: The settings of various elements in the page are written between <head></head>, which is convenient for a single web page. But it does not show the advantages of CSS for multiple pages
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
div {
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<div>Embedded method of referencing CSS in HTML</div>
</body>
</html>
③④: The link type uses HTML tags to import external CSS files, while the import type uses CSS rules to import external CSS files
③Link type:
<link href="~/Content/Base.css" rel="stylesheet" type="text/css" />
④ Import type:
<style type="text/css">
@import "/Content/Base.css"
</style>
Difference: Linked styles are loaded first. The import type loads the content first, usually using the link type