css教程:css指令,兼容,注释,selector

2020-05-11 18:28:13易采站长站整理

还可以通过将title设定为相同的value来分组:

<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" />

上面的表述意为:css被title分为两组,default和Big Text。又每一组又被分为print和screen。

如果有多个link元素,那么只有rel等于stylesheet的link可用。如果可用的link有多个,就会将它们同时作用于html文档,如下:

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

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

1.2.2 style

style是引入style sheet最通用的方式。

<style type="text/css">

type:style总是使用type属性,当使用css时,type的值是“text/css”。

Media:与link中一样。

style以<style type="text/css">开头,以</style>结束,中间是多个styles。这些styles或者指向style sheet文档,或者以内嵌的方式表达。Style元素可以包含多个styles,也可以通过@import指令引入多个指向外部style sheet的链接。

1.2.3 @import指令

用法:

<style type="text/css">

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

@import url(blueworld.css);

@import url(zany.css);

h1 {color: gray;}

</style>

可见其作用类似link,

l 通知浏览器将外部style sheet载入。

l 并且可以载入多个style sheet。

区别是

l 位置与语法不同。

@import被包含在style元素中,并且必须在其他css规则之前。

l 每一个import的style sheet都会被使用,没有替代规则。

相对于link的media属性,import有:

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

@import url(zany.css) projection, print;

@import的重要用途

在导入的某个style sheet A中,A需要也使用外部的style sheet,这时link元素显然无用。比如css文档中,是不可能出现link元素的,这时使用@import,如下:

@import url(http://example.org/library/layout.css);