CSS layout password 02

CSS can be introduced on the page in three ways:

1. directly write in the page (in the header Area)

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

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(main.css );
</Style>

 

The first is to write CSS directly on the HTML page, while the second and third are to use external reference style files.

So what is the difference between link and @ import?

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 functions are basically the same.

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:

Code
1 <LINK rel = "stylesheet" href = "/CSS/styles.css" type = "text/CSS" Media = "screen"/>
2
3 <LINK rel = "stylesheet" href = "/CSS/orange.css" type = "text/CSS" Media = "screen" Title = "orange"/>
4
5 <LINK rel = "alternate stylesheet" href = "/CSS/blue.css" type = "text/CSS" Media = "screen" Title = "blue"/>
6
7 <LINK rel = "alternate stylesheet" href = "/CSS/pink.css" type = "text/CSS" Media = "screen" Title = "pink"/>
8
9 <LINK rel = "alternate stylesheet" href = "/CSS/slate.css" type = "text/CSS" Media = "screen" Title = "slate"/>
10

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 each attribute in the link:
[1] rel: Used to declare the role or type of the linked object.
For example, the above Code: "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.

InPrintApplication Print Style:
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(print.css) print;
</Style>

 

In addition, there is a combination of link and @ import for the scheme.
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 );
</Style>

 

The advantage of doing so is that if you reference the same style on all pages of a site and have multiple CSS styles, 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 to facilitate management and maintenance.

 

The following url provides a complete tutorial on switching CSS styles for your reference:Http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm