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
Detailed examples of variable and function promotion in JavaScript
js execution Lexical analysis phase: includes thr...
SSM implements the mysql database account password ciphertext login function
introduction Our company is engaged in the resear...
Tips for creating two-dimensional arrays in JavaScript
Creation of a two-dimensional array in Js: First ...
Detailed explanation of the execution process of MySQL query statements
Table of contents 1. Communication method between...
Detailed explanation of the basic usage of MySQL triggers [create, view, delete, etc.]
Table of contents 1. MySQL trigger creation: 1. M...
Simple tips to increase web page loading speed
The loading speed of a web page is an important in...
Dockerfile implementation code when starting two processes in a docker container
I want to make a docker for cron scheduled tasks ...
A brief talk about calculated properties and property listening in Vue
Table of contents 1. Computed properties Syntax: ...
Vue simple implementation of turntable lottery
This article shares the specific code of Vue to s...
Application of Beautiful Style Sheets in XHTML+CSS Web Page Creation
This is an article written a long time ago. Now it...
Implementation of tens of thousands of concurrent connections on a single machine with nginx+lua
nginx is our most commonly used server, often use...
Complete code of Vue + iView to realize Excel upload function
1. HTML part <Col span="2">Upload...
Vue implements page caching function
This article example shares the specific code of ...
Detailed explanation of Vue form event data binding
<body> <div id="root"> <...
Solution to primary key conflict when innodb_index_stats reports an error when importing backup data
Fault description percona5.6, mysqldump full back...