第8章 操作样式表
8.1 创建外部样式表
- 打开文本编辑器、编辑、保存以.css为扩展名、UTF-8编码的文件
提示 外部样式表要么是通过链接引用的（参见8.2节），要么是导入的（通过@import），不过不推荐导入。@import指令会影响页面的下载速度和呈现速度，在Internet Explorer中影响更为明显。
8.2 链接到外部样式表
<!-- 假设有一个style.css的外部样式表 -->
<head>
<meta charset="UTF-8" />
<title>Test Link</title>
<link rel="stylesheet" href="style.css" />
</head>
提示 外部样式表的另一个好处是，一旦浏览器在某个页面加载了它，在随后浏览引用它的页面时，通常无需再向Web服务器请求该文件。浏览器会将它保存到缓存里，也就是保存到用户的计算机里，并使用这个版本的文件。这样做可以加快对页面的加载。不过，不必担心。如果随后对样式表作了修改，再将它传到Web服务器，浏览器就会下载更新后的文件，而不是使用缓存的文件（从技术上讲也有例外，但通常不会遇到这种情况）。
提示 实践中最好将样式表组织在子文件夹里，而不是与HTML页面混在一起。常见的样式表文件夹名称包括css、styles等
提示 HTML早期版本要求在link元素定义中包含type=“text/css”，但HTML5不要求这样做，因此可以像代码示例那样忽略它。
8.3 创建嵌入样式表
<head>
<meta charset="UTF-8">
<title>Test Style</title>
<style>
img{
border:4px solid red;
}
</style>
- 嵌入样式表的缺点是其他网页无法利用这个页面中定义的样式
提示 当且仅当style元素出现在link元素后面的时候，嵌入样式表中的样式才会覆盖外部样式表中的样式
提示 嵌入样式表是为页面添加CSS的次选方式。（也有例外的情况，如特定条件下拥有极大流量的网站。）
提示 HTML5之前的版本要求在style开始标签中包含属性type=“text/css”，不过HTML5没有要求。因此你可以省略
8.4 应用内联样式
<img src="img/palau.jpg" width="250" height="163" alt="teststyle" style="border:4px solid red" />
- 内联样式只影响一个元素
提示 内联样式的优先级高于其他所有样式，除非其他地方与之冲突的样式标记了
!important
8.5 样式的层叠和顺序
- 基本规则：在其他条件相同的情况下，越晚出现的样式优先级越高
- 嵌入样式表：style元素和link元素谁出现的比较晚谁的优先级就越高
- 内联样式表：优先级高于嵌入样式表和外部样式表
!important优先级最高，不过要避免使用它
8.6 使用与媒体相关的样式表
- 可以指定一个只用于特定输出的样式表，如只用于打印，或只用于在浏览器中查看屏幕。例如，可以创建一个具有打印和屏幕版本共有特征的通用样式表，再创建单独的打印样式表和屏幕样式表，分别包含只用于打印的属性和只用于屏幕显示的属性。
<!--8-6-media.html-->
<head>
<title>Test Media</title>
<link rel="stylesheet" type="text/css" href="8-6-media.css">
<link rel="stylesheet" type="text/css" href="8-6-media.css" media="print">
</head>
<body>
<p>Hello
<!-- 8-6-media.css-->
p{
color: red;
}
@media print{
p{
color:green;
}
}
提示 有9种可能的输出类型：all、aural、braille、handheld、print、projection、screen、tty和tv。浏览器对它们的支持程度各不相同（大多只有少量的支持）。实际上，用得上的只有screen和print（或许还应加上all），浏览器对它们的支持情况都很好。另一方面（可以这么说），设备对handheld的支持程度并不高，因此在为移动设备设计时，通常使用screen而不是handheld（参见第12章）。projection类型是为投影仪和其他类似的设备准备的，Opera的投影模式Opera Show支持这种类型。
