候选样式表

Programing_Monkey

已于 2022-11-04 10:28:35 修改

阅读量323

点赞数 1

分类专栏： css 文章标签： firefox css javascript

于 2022-11-04 10:23:19 首次发布

本文链接：https://blog.youkuaiyun.com/Java_monkey_/article/details/127683896

版权

css 专栏收录该内容

2 篇文章

订阅专栏

所谓 候选样式表（alternate stylesheet），就是定义多套样式，其中一套为默认样式，其余为候选样式，供用户选择。

1. 操作步骤

（1）定义多套样式，默认样式设置 rel 为 stylesheet，候选样式设置 rel 为 alternate stylesheet。

（2）为每个 link 标签设置标题。

<link rel='stylesheet' type='text/css' media='screen' title='Default' href='blue.css'>
<link rel='alternate stylesheet' type='text/css' media='screen' title='red' href='red.css'>

（3）用户根据需要选择样式表。

注未设置标题的样式为永久样式。

多数基于 Gecko 的浏览器，如 FireFox 和 Opera，都支持候选样式表。Internet Explorer 元素不支持，不过可以借助 JavaScript。基于 WebKit 的浏览器不支持候选样式表。

2. 代码结构：

(1) index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>候选样式表测试</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' title='Default' href='blue.css'>
    <link rel='alternate stylesheet' type='text/css' media='screen' title='red' href='red.css'>
</head>
<body>
    <p>候选样式表测试</p>
</body>
</html>