Web Front-endCSS TutorialWhat is the difference between link and @import when introducing CSS files into html?What is the difference between link and @import when introducing CSS files into html?
Previously introduced How to introduce CSS files into HTML. There are four ways to import CSS into HTML, namely inline, embedded, and external styles. External styles are divided into import style and link style. It is also an external style, so what is the difference between link and @import? Those who want to know, please continue reading below.
1. Differences in import methods
link link type:
<link rel="stylesheet" type="text/css" href="css/green.css"/>
import import type:
<style type="text/css">
@import url("css/green.css");
</style>II , Differences in browsers
link will not cause compatibility issues, while @import needs to be implemented in IE5 or above.
During the page loading process, if it is a CSS style file imported by link, the CSS style will be loaded at the same time as the content. If it is a CSS file introduced by @import, the style will be loaded after the page is loaded.
3. Differences in dependency relationships
@import is a syntax rule provided by CSS and only has the function of importing style sheets. Link is a tag provided by HTML. It can not only load CSS files, but also define RSS, rel connection attributes, etc.
4. Differences in DOM control style
When you need javascript to control the DOM to change the style, you can only use the link tag, because @import cannot be controlled by the DOM.
5. The difference between CSS priorities
The priorities of CSS styles with equal weight from high to low are: inline style, inline style, and external style. , import styles. If both the external link style and the imported style have a div{color:XX}, the final div style is the div style defined in the external link style.
Example: Give the div inline style, inline style, external style, and imported style respectively to see what effect it will have in the end.
<link rel="stylesheet" type="text/css" href="css/green.css"/> have a nice day
Rendering:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{background: yellow;}
@import url("css/red.css");
</style>
</head>
<body>
<div style="width: 150px;height: 150px;">have a nice day </div>
</body>
</html>Rendering:
CSS. In general, it is best not to use the import import style. If the style loaded by the import is relatively large, it is easy to load. Delay and even screen flickering. For now, it is recommended for small websites to use link import. Of course, if we need to modularize CSS in the future, @import will be used. This depends on the situation.
The above is the detailed content of What is the difference between link and @import when introducing CSS files into html?. For more information, please follow other related articles on the PHP Chinese website!
A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AMHere's a container with some child elements:
Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AMFlyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should
Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee
Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AMIn this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.
Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AMThe short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.
Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AMIn this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties
IndieWeb and WebmentionsApr 19, 2025 am 11:16 AMThe IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
Zend Studio 13.0.1
Powerful PHP integrated development environment
SublimeText3 English version
Recommended: Win version, supports code prompts!
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
