Css权威指南学习笔记之第一章候选样式表

客官°小女子只卖身不卖艺 2022-09-18 00:57 171阅读 0赞

候选样式表, 就是允许为一个页面提供多种风格的样式表,用户在浏览该页面时可以选择自己喜欢的页面风格.

具体做法通过下面一个例子来说明:

**1.建立3个css文件**

**red.css:**

p \{color: red;\}

**blue.css**

p \{color: blue;\}

**green.css:**

p \{color: green;\}

**2.建立一个html文件**

**demo.html:**

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8"/>  
        <title>Alternate Style Sheet</title>  
        <link rel="stylesheet" type="text/css" href="red.css" title="Red" />  
        <link rel="alternate stylesheet" type="text/css" href="green.css" title="Green" />  
        <link rel="alternate stylesheet" type="text/css" href="blue.css" title="Blue" />  
    </head>  
    <body>  
        <p>Hello,gays, I'm a paragraph!! And my color will changes according to the style sheet you choose.</p>  
    </body>  
</html>

**3.在浏览器中打开上面的html文件**

**![红色样式][SouthEast]**

按红色风格显示

**![SouthEast 1][]**

按蓝色风格显示

当选择‘无风格’时，将不引用任何样式表，此时按浏览器默认样式显示，而浏览器的默认文本颜色基本都是黑色。

兼容性： 我只简单看了FF和IE（我的是最新版的IE10,可以切换7-10）, 都是支持的（IE7-10各版本都支持，但这应该跟内核无关，是外壳支持就可以）。我认为理论上主流浏览器应该都支持的，但是Chrome我没找到切换的地方。 先放着吧，反正这个功能并不常用，等真有用的那一天再细研究吧。

[SouthEast]: /images/20220828/80b87aea97154da5a33aadbe9033e592.png
[SouthEast 1]: /images/20220828/b6cab70e54a04b50b21bdfa49f18aff9.png