DDR爱好者之家 Design By 杰米
1.2 跟css有关的标记,指令
1.2.1 link
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
link标记的用意是允许将html与其他文档相关联。Css用link将css文档与html文档想关联。
Css文档虽然不是html的一部分,但是被html使用,从外部style sheets引入它。
Link在head元素内,但是不能放在任意head子元素的内部,比如title。
Css文档的后缀名虽然不要求,但是有些浏览器不能识别非“.css”的文件。
Link的属性:
rel:代表relation,设为stylesheet。
type:描述数据的类型,设为text/css,告诉浏览器style sheet是css格式的。
以后还会有其他的style sheet,比如xsl。
href:style sheet的url。
Media:指定style sheet的使用范围。下列大多数值还不被任何浏览器支持,常
用的是
all,print,screen。Opera支持projection。可以为media指定多个值,比如media="screen, projection"
all
Use in all presentational media.
aural
Use in speech synthesizers, screen readers, and other audio renderings of the document.
braille
Use when rendering the document with a Braille device.
embossed
Use when printing with a Braille printing device.
handheld
Use on handheld devices like personal digital assistants or web-enabled cell phones.
print
Use when printing the document for sighted users and also when displaying a "print preview" of the document.
projection
Use in a projection medium, such as a digital projector used to present a slideshow when delivering a speech.
screen
Use when presenting the document in a screen medium like a desktop computer monitor. All web browsers running on such systems are screen-medium user agents.
tty
Use when delivering the document in a fixed-pitch environment like teletype printers.
tv
Use when the document is being presented on a television.
Title:利用title定义多个css文档相互替换的关系。
比如存在如下定义:
<link rel="stylesheet" type="text/css" href="sheet1.css"
title="Default" />
<link rel="alternate stylesheet" type="text/css"
href="bigtext.css" title="Big Text" />
<link rel="alternate stylesheet" type="text/css"
href="zany.css" title="Crazy colors!" />
那么能同时支持多个css定义的浏览器中会有如下表现:
还可以通过将title设定为相同的value来分组:
<link rel="stylesheet" type="text/css"
<link rel="stylesheet" type="text/css"
href="sheet1.css" title="Default" media="screen" />
<link rel="stylesheet" type="text/css"
href="print-sheet1.css" title="Default" media="print" />
<link rel="alternate stylesheet" type="text/css"
href="bigtext.css" title="Big Text" media="screen" />
<link rel="alternate stylesheet" type="text/css"
href="print-bigtext.css" title="Big Text" media="print" />