@ Import CSS or link CSS

Source: Internet
Author: User


CSS is generally introduced in three ways on the page.
1. directly write in the page

<Style type = "text/CSS">
Body {
Margin: 0;
Padding: 0;

2. Use link for Reference

<LINK rel = "stylesheet" type = "text/CSS" href = "my.css">

3. Use import for Reference

<Style type = "text/CSS">
@ Import url(my.css );

The first is to write CSS directly on the HTML page, while the second and third are to extract files separately using external reference styles.

Question 1. What is the difference between link and @ import?
Let's take a look at their definitions.

Quote link Element
Both HTML and XHTML have a structure that allows webpage authors to add additional information related to HTML documents. These additional resources can be style information (CSS), navigation assistant, external information (RSS), and contact information. Quote @ import
Specify the imported external style sheet and target device type.

In fact, the most fundamental difference between link and @ import is that link is an HTML Tag, while @ import is a CSS Tag,
In addition to calling CSS, link can also have other functions, such as declaring page Link Attributes, declaring directories, RSS, etc. @ import can only
Call CSS. If CSS is referenced from external sources, their role is basically the same, but the boss above is different. :)

Question 2. Which of the following is better for Link and import?
As mentioned above, the boss is different, so there will be some detailed differences in usage. It cannot be said who is better or worse,
You can only analyze the specific situation.
1) I want to use JavaScript For style selection;
Link is used at this time, because Link is an HTML element, and javascript can be used to control DOM elements and finally change the style.
See the followingCode

<LINK rel = "stylesheet" href = "/CSS/styles.css" type = "text/CSS" Media = "screen"/>
<LINK rel = "stylesheet" href = "/CSS/orange.css" type = "text/CSS" Media = "screen" Title = "orange"/>
<LINK rel = "alternate stylesheet" href = "/CSS/blue.css" type = "text/CSS" Media = "screen" Title = "blue"/>
<LINK rel = "alternate stylesheet" href = "/CSS/pink.css" type = "text/CSS" Media = "screen" Title = "pink"/>
<LINK rel = "alternate stylesheet" href = "/CSS/slate.css" type = "text/CSS" Media = "screen" Title = "slate"/>

This is a classic piece of code that changes the page style, because today we mainly talk about link and import, so I only list the reference CSS section here.
Let's take a look at the meaning of all the attributes in the link:
[1] rel: Used to declare the role or type of the linked object.
For example, the code above: "stylesheet" indicates linking a default CSS, while "alternate stylesheet" indicates alternative CSS.
[2] href: I don't need to talk about it. reference the file path of CSS.
[3] tyle: file type
[4] media: the device of the application. "screen" indicates that the application is on the screen.
[5] title: The name of CSS.
There are five CSS codes in this section. The first one is the basic style, and the other four are the style styles. You can use JavaScript to control the default display style title.

2) I want to print the style in the application;
As the name suggests, a print style is used to print a page.
This style is ineffective in normal browsing and only takes effect during printing.
If you want to reference the Print Style separately for the page, both link and @ import are supported.

Link code

<LINK rel = "stylesheet" href = "/CSS/styles.css" type = "text/CSS" Media = "print"/>

@ Import code

<Style type = "text/CSS">
@ Import url(foo.css) print;

In addition, there is also a method for CSS @ media:

@ Media Print {
@ Import "print.css"

Use @ media to specify the device as print, and then use @ impor to link the device.

3) I want to reference multiple styles;
If you want to reference multiple style combinations on a page to produce results, both link and @ import can work.

Link code

<LINK rel = "stylesheet" href = "/CSS/styles.css" type = "text/CSS" Media = "screen"/>
<LINK rel = "stylesheet" href = "/CSS/orange.css" type = "text/CSS" Media = "screen"/>

@ Import code

<Style type = "text/CSS">
@ Import URL (../CSS/base/my.layout.css );
@ Import URL (../CSS/base/my.typo.css );

However, I personally think it is clearer to use @ import to reference multiple files.
In addition, there is a combination of link and @ import for the sort method.
Use link to reference a CSS file

<LINK rel = "stylesheet" href = "/CSS/styles.css" type = "text/CSS" Media = "screen"/>

Then reference it in the CSS file.

<Style type = "text/CSS">
@ Import URL (../CSS/base/my.layout.css );
@ Import URL (../CSS/base/my.typo.css );

The advantage of doing so is that if you reference the same style on all pages of a site,
However, if you add four or five identical CSS styles to each page, it is a waste of code and energy,
So do not do this. All pages reference one CSS, and then one CSS references multiple CSS, which is convenient.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.