Home > Developer > Web Develop
Inline means that you add CSS directly to the attributes in the HTML tag style .
Example:
<div style="background: red"></div>
This is usually a bad way to write, it can only change the style of the current label, if you want multiple to <div> have the same style, you have to repeatedly add the same style for each, <div> if you want to modify a style, you have to modify all the code in the style. Obviously, inline CSS code can lead to lengthy HTML code and make the Web page difficult to maintain.
Embedding means <style> writing CSS code under a label in the HTML header.
Example:
<head> <style> .content { background: red; } </style></head>
Embedded CSS works only on the current page. Because the CSS code is in the HTML file, it makes the code more centralized, which is usually advantageous when we write a template page. Because people viewing the template code can see the HTML structure and CSS styles at a glance. Because the embedded CSS is only valid for the current page, when multiple pages need to introduce the same CSS code, this writing can lead to code redundancy and is not conducive to maintenance.
3. How to linkLinking refers to the use of HTML header tags to introduce external CSS files.
Example:
<head> <link rel="stylesheet" type="text/css" href="style.css"></head>
This is the most common and recommended way to introduce CSS. In this way, all CSS code exists only in a separate CSS file, so it has good maintainability. And all the CSS code exists only in the CSS file, the CSS file will be introduced at the first load, and later to switch the page only need to load the HTML file.
4. How to ImportImporting means using CSS rules to introduce external CSS files.
Example:
<style> @import url(style.css);</style>
Both are external ways of referencing CSS, but there are some differences:
The difference between 1:link is XHTML tags, in addition to loading CSS, you can also define RSS and other transactions, @import belong to the CSS category, can only load CSS.
The difference between 2:link referencing a CSS, loading at the same time when the page loads, @import need to load the page after full loading.
The difference between 3:link is XHTML label, no compatibility problem, @import is proposed in CSS2.1, the lower version of the browser is not supported.
The difference 4:ink supports using JavaScript to control the DOM to change styles, while @import does not support it.
What are the ways CSS is introduced? What is the difference between link and @import?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
