候选样式表

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

操作步骤

（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 的浏览器不支持候选样式表。

代码结构：

image-20220319210131926

(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>

(2) blue.css

p {
    background-color: blue;
}

(3) red.css

p {
    background-color: red;
}

火狐浏览器测试

  1. 初始界面
    image-20220319205225892
  2. 切换样式表
    image-20220319205204234
  3. 结果展示
    image-20220319205016760
posted @ 2022-11-04 10:16  Programing_Monkey  阅读(46)  评论(0)    收藏  举报