关于样式表链接时的注意点
1. alternate stylesheet属性值
在初学css的时候，我们在link的时候通常都是行云流水般的写下
<link rel=”stylesheet” style=”text/css” href=”xxx.css” />
然后还颇为满意的自我称赞一下，嗯，不错，比昨天写起来又快了0.5秒。好像这条link语句已经成了约定俗成的一种写法一样。但是，其中还有很多不同的写法，今天门生就简单说说rel属性中的一个值alternate stylesheet。希望能起到抛砖引玉的作用，让大家注意不要僵化思维，模板化的写代码。
假设我们有以下的三个文件index.html、header.css、header1.css存于同一目录下，其内容如下：
index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="header.css" />
<link rel="stylesheet" type="text/css" href="header1.css" />
<title>index.html</title>
</head>
<body>
<h1>这是我的一号标题</h1>
<h2>这是我的二号标题</h2>
<h3>这是我的三号标题</h3>
</body>header.css
h1{color:red;}
h2{color:blue;}header1.css
h1{color:yellow;}
h3{color:green;}现在我们打开index.html文件，会看到什么样的一个页面呢？显然就是黄色的h1标题、蓝色的h2标题和绿色的h3标题了。相信大家也都很清楚。那么，现在问题来了，如果我们把index中的link语句修改一下，变成这样的话，结果又会是什么样的呢？
<link rel="alternate stylesheet" type="text/css" href="header1.css" title="header1" />如果不知道结果的同学可以去试一下，自己动手得出来的结果印象会更加深刻。
当我们把link语句一改以后，就会发现情况变得和之前的不一样了，打开index.html后，出现的是红色的h1标题、蓝色的h2标题和默认颜色的h3标题。
为什么没有链接到header1.css文件了？不！其实已经链接上了，只不过它并没有直接显示出来而已，仔细查看我们的浏览器，是不是在样式选择上除了默认选项以外，还多出了一个header1选项？点击一下看看？是不是变成了和之前一样的结果了呢？
这，就是alternate stylesheet——候选样式表。
候选样式表可以提供除默认的样式表以外的多个样式表给用户选择，以适应不同的环境。比如在浏览器上的显示样式、在语音合成器上的显示样式、在投影仪上的显示样式等等。有时候在不同的场景下我们可能需要不同的样式，这时候我们的alternate stylesheet就派上用场了。
2. title属性
考虑以下两个语句：
<link rel="stylesheet" type="text/css" href="header.css" />
<link rel="stylesheet" type="text/css" href="header.css" title="header" />在对一个样式表引用时，以上两种写法好像并没有什么区别，我们再来看看：
<link rel="stylesheet" type="text/css" href="header.css" />
<link rel="stylesheet" type="text/css" href="header1.css" />
--------------------------------------------------------
<link rel="stylesheet" type="text/css" href="header.css" title="header" />
<link rel="stylesheet" type="text/css" href="header1.css" title="header1" />现在打开我们的index.html文件看看效果如何？
怎么样？看出区别来了吗？
对于出现这种情况的原因，门生在这里做个并不十分恰当的比喻，希望大家可以更形象的理解。
前阵子门生的表哥大婚，门生作为和表哥从小一条裤子两人穿的好兄弟是要去接新娘的，达到目的地以后，女家人当然就是在挡门拿开门红包了，但是不知道怎么回事，当时挡门的位置缺了一个人，那怎么办？好办，门生在我们兄弟团里面抽出我们的精英小美女过去门的那边帮忙，顺顺利利的完成了接新娘的流程，还因为有我们小美女的接应，让整个流程无比顺畅，不用再搞什么把结成冰的钥匙捂化才能开门的惨绝人寰游戏。那么现在门生做个假设，如果当时我们的精英小美女胸前跟我们一样挂着伴郎、迎宾的胸花，大家说那边的姐妹们还会让我们的小美女过去门的那一边吗？
这就是为什么我们在设置了title属性以后浏览器不会默认显示我们样式表的原因了。
在没有设置title属性以前，我们的样式表是没有标题的，没有标题就意味着所有标题都可以是我的标题，既该样式表可以被浏览器或其他媒介默认读取。没有表示自己是男家这边的人，那么他既可以是男家的，也可以是女家的。但是一旦在胸前带上胸花，设置了title，那没办法，只能各找各的妈，各回各的家了。
那么是不是说设置title就是百害而无一利了？当然不是，每个标签和属性都是有它的作用的。就比如我们刚才所说的alternate stylesheet。
<link rel="alternate stylesheet" type="text/css" href="header1.css" title="header1" />大家试着把其中的title删除，看看会出现什么效果？
没有了标题，也就没有了识别的方式，浏览器也找不到我们的样式表。所以，title的设置并非是无意义的。
那么，title究竟在什么时候要设置，什么时候该省略呢？
在多个样式表中，某样式表中的属性是一直存在的，就该省略title；如果在某些样式表中只会使用其中的一个，那么这些样式表就要使用title。
扫一扫
1586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
