【HTML5与CSS3基础教程】 第8章 操作样式表

第8章 操作样式表

本章内容

• 创建外部样式表
• 链接到外部样式表
• 创建嵌入式样式表
• 应用内联样式
• 样式表的层叠和顺序
• 使用与媒体相关的样式表
• 借鉴其他人的灵感：CSS

创建外部样式表

• 外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。
• 外部样式表是一个独立的css文件。

链接到外部样式表

• <link rel="stylesheet" href="style.css">
• 可以在页面中使用多个link元素，从而加载多个样式表文件。如果在不同的文件中有显示声明产生冲突，则后面文件中的规则的优先级更高。
• HTML早期版本要求在link元素定义中包含type="text/css"，但HTML5不要求这么做，因此可以忽略它。

创建嵌入式样式表

• 在HTML页面的head部分创建一个style元素，里面包含样式表。
• 当且仅当style元素出现在link元素后面的时候，嵌入样式表中的样式才会覆盖外部样式表中的样式。
• HTML5之前的版本要求在style开始标签中包含属性type="text/css"，不过HTML5没有要求，因此可以省略。

<style>
img {
	border: 4px solid red;
}
</style>

应用内联样式

• 内联样式将内容和表现混在了一起，只影响一个元素。<p style="color: blue">...</p>

样式的层叠和顺序

• 基本规则是：在其他条件相同的情况下，越晚出现的样式优先级越高。
• 标记有!important的样式总是具有最高的优先级

使用与媒体相关的样式表

• 可以指定一个只用于特定输出的样式表，如只用于打印，或只用于在浏览器中查看屏幕。
• 在link或style元素的开始标签中添加media="output"，其中output可以是print、screen或all。也可以在样式表中使用@media规则。

<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

p {
	color: orange;
}

@media print {
	/* 打印样式表 */
	p {
		color: #000;
	}
}

借鉴他人的灵感

• 这些代码放在万维网并不意味着它们及时编写某一效果的代码的最佳方式（尽管其作者都希望如此）。