Detailed explanation of the difference between CSS link and @import
|
How to add css in html? There are three ways to set CSS in HTML:
1. Inline style. That is, set CSS in the style attribute in the html tag. It is worth noting that the name-value pairs of the CSS code are connected with a colon:, and different CSS styles are separated by a semicolon. Although this method is convenient for viewing and debugging, it violates the principle of separation of structure and presentation, and we do not recommend it. However, in terms of loading speed, this is the fastest of the three methods. If you don’t believe it, you can look at portal sites such as Sina, NetEase, QQ, Sohu, etc. Most of the content pages have CSS written directly into the web pages. This is Sina's homepage
2. Embedded. This method is convenient for us to view and debug, but when there are many styles, this method is not suitable. Note: The <style> tag must be located in the <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#myDiv{
color:red;
background-repeat:no-repeat;
font-size:18px;
}
</style>
</head>
<body> <div id="myDiv"> This is a div.</div>
</body>
</html>3. Import-link. There are two ways to import: one is using the <link> tag, and the other is using the @import method. First introduce link link: It must be in the head tag. This method can introduce external CSS style sheets into HTML, which is highly recommended.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" styl="text/css" href="style.css">
</head>
<body>
<div id="myDiv"> This is a div.</div>
</body>
</html>
3. Import-@import @import: Also in the head tag, this method can introduce external CSS style sheets into HTML. Note that there is a space between import and URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<div id="myDiv"> This is a div.</div>
</body>
</html>In addition, import can also be used in CSS style sheets to introduce other style sheets. We write directly in css:
@import url("style.css") Optimal writing of @import The difference between link and @import: 1.link is an XHTML tag. In addition to loading CSS, it can also define other things such as RSS; @import belongs to the CSS category and can only load CSS. 2. When link references CSS, it is loaded at the same time when the page is loaded; @import requires the page to be fully loaded before loading, so we generally do not recommend using the @import method. 3.link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers. From this point of view, we also do not recommend using the @import method. 4.link supports using Javascript to control DOM to change styles; while @import does not support it. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: About Jenkins + Docker + ASP.NET Core automated deployment issues (avoid pitfalls)
>>: Introduction to the difference between shortcut icon and icon code
Recommend
SQL implementation of LeetCode (197. Rising temperature)
[LeetCode] 197.Rising Temperature Given a Weather...
Quickly solve the problem of slow startup after Tomcat reconfiguration
During the configuration of Jenkins+Tomcat server...
Centos7.5 configuration java environment installation tomcat explanation
Tomcat is a web server software based on Java lan...
Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL
Preface I recently encountered a problem at work....
HTML commonly used meta encyclopedia (recommended)
The Meta tag is an auxiliary tag in the head area...
Website design should pay attention to the sense of color hierarchy
Recently I have been saying that design needs to h...
19 MySQL optimization methods in database management
After MySQL database optimization, not only can t...
Detailed explanation of MySQL database triggers
Table of contents 1 Introduction 2 Trigger Introd...
Summary of MySQL LOAD_FILE() function method
In MySQL, the LOAD_FILE() function reads a file a...
Nodejs global variables and global objects knowledge points and usage details
1. Global Object All modules can be called 1) glo...
Encapsulation implementation of the data format returned by nestjs to the front end
Generally, during the development process, the su...
Summary of the process and common problems of connecting VS2019 to MySQL database
I started configuring various environments this a...
Two methods to stretch the background image of a web page
There are two solutions: One is CSS, using backgro...
Detailed explanation of the concept, principle and usage of MySQL triggers
This article uses examples to explain the concept...
Summary of common operation skills of MySQL database
This article summarizes common operating techniqu...