CSS Introduction and media

There are several ways to reference CSS:

First, @import

<style type= "text/css" media= "screen" >

@import url ("Example.css");

</style>

Second, link

<link rel= "stylesheet" rev= "stylesheet" href= "Example.css" type= "Text/css" media= "All"/>

The difference between link and @import
Both of these methods are designed to load CSS files, but there are still subtle differences.

Difference 1: The difference between ancestors. Link is an XHTML tag, and @import is completely a way to provide CSS. @import can be written in a CSS file for the introduction of additional CSS files in the format: @import URL ("Example.css") screen[, print[,...]];
In addition to the link tag can be loaded CSS, but also can do a lot of other things, such as the definition of RSS, the definition of REL connection properties, @import can only load CSS.

Difference 2: The difference in the loading order. When a page is loaded (when viewed by the browser), the CSS referenced by the link is loaded at the same time, and the CSS referenced by @import waits until the page has been downloaded and loaded. So sometimes browsing @import loading CSS page when there is no style (that is flashing), slow time is quite obvious (dream of the way to load CSS is to use @import, I download while browsing the dream of the Web page, the above problems will occur).

Difference 3: Differences in compatibility. Because @import is CSS2.1 proposed by the old browser does not support, @import only in IE5 above the ability to identify, and link tag does not have this problem.

Difference 4: The difference between using the DOM to control the style. When using JavaScript to control the DOM to change styles, you can only use the link tag, because @import is not controlled by the DOM.

CSS Media Properties

Screen: Refers to computer screens.
Print: Refers to the opaque media used for the printer.
Projection: Refers to the item used for display.
Braille: A Braille system that refers to a printed matter with tactile effects.
Aural: Refers to the speech electronic synthesizer.
TV: Refers to the television type of media.
Handheld: Refers to handheld display device (small screen, monochrome)
All: Suitable for all media.

If you specify a type for a partial style, the following is the wording:

1 @media Screen {
2 Div.bottom {
3 lightblue;
4 position:fixed;
5 bottom:0px;
6 left:0px;
7 right:0px;
8 height:20px;
9}
10}
@media Print {
Div.bottom {
Position:absolute;
top:0px;
15}
16}

CSS Introduction and media