WEB基础之：CSS结合HTML

CSS结合HTML

• • 1. link标记
  • • 1.1 属性
  • 2. 候选样式表
  • • 2.1 候选样式表
    • 2.2 根据显示媒体为网站选择相应的表现
  • 3. style元素
  • • 3.1 style元素包含样式表
    • 3.2 @import指令
    • 3.3 具体样式规则
  • 4. 内联样式
  • 5. 向后可访问性
  • 6. CSS注释

1. link标记

<link rel="stylesheet" type="text/css" href="css_1.css" media="all">

1.1 属性

rel: 关系(relation)为stylesheet。
type: 总是设置为text/css, 描述使用link标记加载的数据的类型。
media: 一般使用all，这个属性有很多可取值:

- all: 用于所有表现媒体；
aural: 用于语音合成器，屏幕阅读器和文档的其他声音表现。
braille: 用Braille(盲文系统)设备表现文档时使用。
embossed: 用Braille打印设备打印时使用。
handeld: 用于手持设备，如个数字助理或支持WEB的蜂窝电话。
- print: 为视力正常的用户打印文档时使用，另外还会在显示文档的“打印预览”时使用。
projection: 用于投影媒体，如发表演讲时显示幻灯片的数字投影仪。
- screen: 在屏幕媒体（如桌面计算机监视器）中表现文档时使用。在这种系统上运行的所有WEB浏览器都是屏幕媒体用户代理。
tty: 在固定间距环境（如电传打字机）中显示文档时使用。
tv: 在电视上显示文档时使用。
	注："-"为广泛支持的类型。

2. 候选样式表

将rel属性的值置为alternate stylesheet，就可以定义候选样式表，只有在用户选择这个样式表时才会用于文档表现。

2.1 候选样式表

它会使用link元素的title属性值生成一个候选样式列表。可以设置以下元素：

<link rel="stylesheet" type="text/css" href="css_1.css" title="Default">
<link rel="stylesheet" type="text/css" href="css_2.css" title="Big Text">
<link rel="stylesheet" type="text/css" href="css_3.css" title="Crazy Colors">

可以在浏览器中选择你想要的样式效果。如火狐浏览器上的View标签–>Page Style。

2.2 根据显示媒体为网站选择相应的表现

将候选样式表指定同样的title值，把它们分组在一起，如下：

<link rel="stylesheet" type="text/css" href="css_1.css" title="Default" media="screen">
<link rel="stylesheet" type="text/css" href="css_2.css" title="Default" media="print">

得到的结果是网页中显示的是一种表现，而打印中显示另外一种表现。

3. style元素

3.1 style元素包含样式表

<style type="text/css">
    p {font-size: xx-large; background: #008000}
</style>

style一定要使用type属性，对于CSS文档，正确type属性值是“text/css”。

开始和结束style标记之间的样式称为文档样式表（document style sheet），或嵌套样式表（embedded style sheet），因为这个样式嵌套在文档中。

3.2 @import指令

@import用于指示web浏览器加载一个外部样式表，@import只能出现在style容器中。CSS要求@import指令出现在样式表中的其他规则之前。

<style type="text/css">
    @import url(css_1.css); /*import comes first*/
    @import "css_2.css";  /*import comes first*/
</style>
/*一个文档中可以用多个@import语句，每个@import指令的样式表都会加载并使用，用@import无法指定候选样式表。*/

可以限制所导入的样式表应用于一种或多种媒体，可以在样式表的URL之后列出要应用此样式的媒体

<style type="text/css">
    @import url(css_1.css) all; /*import comes first*/
    @import "css_2.css" screen,print;
</style>

如果有一个外部样式表要使用其他外部样式表的样式时，不能用link元素（外部样式表不能包含任何文档标记），但能用@import。

<style type="text/css">
    @import url(css_1.css) all; /*import comes first*/
    @import "css_2.css" screen,print;
    body {color: blue;}
</style>

3.3 具体样式规则

<style type="text/css">
    body {color: blue}
</style>

4. 内联样式

内联样式只对其所在的元素标签及嵌套在其中的子标签起作用。

不建议使用。

<h3 style="color: gray">style元素</h3>

5. 向后可访问性

在style内容区添加<!--和-->，如果一个浏览器无法识别<style>和</style>，就会将其忽略。但<style>中的标记不一定会被忽略，因为对浏览器而言，它们看上去像是正常的文本。为解决这个问题，建议将声明包含在一个注释标记中，能理解CSS的浏览器仍能正常地读取样式表。如下：

<style type="text/css">
<!--
    @import url(css_1.css) all; /*import comes first*/
-->
</style>

6. CSS注释

 /*注释的内容*/