CSS Study Notes 1: CSS Import Method

来源：互联网发布：创造漫画的软件编辑：程序博客网时间：2024/05/22 02:55

1. The link tag

example:

<link rel="stylesheet" type="text/css" href="import.css" />

<link rel="stylesheet" type="text/css" href="import.css" media="all" />

(1) To successfully load an external style sheet, link must be placed inside the head element but may not be placed inside any other element, rather like title. example:

<html>

<head>

<title>CSS link position example</title>

<link rel="stylesheet" type="text/css" href="import.css" media="all" />

</head>

<body>

<h1>Example caption</h1>

</body>

</html>

(2) Alternate style sheets. Alternate style sheets are defined bymaking the value of the rel attribute "alternate stylesheet", and theyare used in document presentation only if selected by the user.

example:

<link rel="stylesheet" type="text/css" href="default.css" media="all" title="default css" />

<link rel="alternate stylesheet" type="text/css" href="bigtext.css" media="all" title="big text css" />

<link rel="alternate stylesheet" type="text/css" href="smalltext.css" media="all" title="small text css" />

Userscould then pick the style they want to use, and the browser wouldswitch from the first one(labeled "default css" in this case) to whichever the user picked. And in firefox, pick the item under theview-->page style.

(3) When exist a number ofpreferred style sheets, all but one of them will be ignlored, and whichone will be used is undefined(or uncertain). But the user can selectany one from them throw menu (view --> page style).

example:

<link rel="stylesheet" type="text/css" href="default.css" media="all" title="default css" />

<link rel="stylesheet" type="text/css" href="bigtext.css" media="all" title="big text css" />

<link rel="stylesheet" type="text/css" href="smalltext.css" media="all" title="small text css" />

(4) Persistent style sheet. Style sheet will be a persistent stylesheet without the title attribute in link, and It's always used in thedisplay of the document.

example just like as the beginner of this section.

(5) External style sheet can not contain any document markup. It's pure a list of rules.

2. The style element

example:

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

<!--

h1 { color: cyan; }

div, p {

margin: 3px;

padding: 2px;

border: thin dotted red;

}

-->

</style>

3. The @import directive

example:

@import url(bigtext.css);

@import url(particular.css) screen, print;

(1) @import can be used to direct the web browser to load an external style sheet and use its styles in the rendering of the HTML document.

(2) @import must be placed inside the style container, before other CSS rules, otherwise it won't work at all ( except IE). Like link, can be more than one @import statement in a document., and all of them will be loaded and all of their styles will be used in the display of the document.

example:

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

<!--

@import url(bigtext.css); /* @import comes first */

@import url(background.css);

@import url(particular.css) screen, print;

h1 { color: cyan; }

div, p {

margin: 3px;

padding: 2px;

border: thin dotted red;

}

-->

</style>

(3) Every @import is ended with a semicolon.

(4) In consideration of style sheets can not contain any document markup, the link element can't be used. But @import can. It's an only way to shared external style sheets in style sheet(CSS file).

example:

/* file: default.css */

@import url(until.css);

@import url(particular.css) screen, print;

h1 { color: cyan; }

/* .............. */

4. Inline Styles. Employ the HTML attribute style to set an inline style.(not recommended)

example:

Darkgray font color and lightblue background paragraph which implementated throw inline style

</p>

Note that you can only place a declaration block, not an entire style sheet, inside an inline style attribute. Therefore, you can't put an @import into a style attribute, nor can you include any complete rules. The only thing you can put into the value of a style attribute is what might go between the curly braces of a rule.

[Note] this is the notes of study CSS(books: CSS: the definitive guide). Thanks.

[END]