CSS权威指南(1)

CSS和文档

层叠样式表CSS

---

---

一、Web样式简介

CSS的目标是提供一个简单的声明式样式语言，而且具有一定的灵活性，能为文档编写人员和用户提供等同的杨世华功能。

二、元素

元素 （element）是文档结构的根基。HTML中常用的元素有p、table、span、a和div等。

1.置换元素和非置换元素

置换元素（replaced element）指用来置换元素内容的部分不用文档内容直接表示。
非置换元素（nonreplaced element）即元素的内容由用户代理（通常是浏览器）在元素自身生成的框中显示。

2.元素的显示方式

块级元素（默认）生成一个填满父级元素的内容区域的框 ，旁边不能有其他元素。即块级元素在元素框的前后都“断行 ”。
行内元素在一行文本内生成元素框，不打断 所在行。
注意：在HTML中，块级元素不能出现在行内元素中，但是CSS并不限制它们的显示方式，相互之间可以嵌套。

三、把CSS应用带HTML上

1.link标签

外部样式表

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

外部样式表保存为纯文本文件，扩展名通常是.css。
注意：外部样式表不能包含任何文档标记，只用有CSS规则和CSS注释。如果外部样式表中有标记，可能导致部分或全部样式失效。

属性	值	说明
rel	stylesheet
type	text/css	通过link标签加载数据类型
href	URL	地址可以是绝对地址或者相对地址
media	一个或者多个媒体描述符	指明媒体的类型和具有的功能

候选样式表
候选样式表定义方式为把rel属性的值设为alternate stylesheet。仅当用户选择自己时，文档才会使用候选样式表渲染。

2.style元素

嵌入式样式表/文档样式表
style元素也是一种引入样式表的方式，直接写在文档中：

<style type="text/css">…</style>

3.@import指令

链接的外部样式表中也有@import指令：

@import url(sheet2.css);

link与@import主要区别在于句法和指令的位置。@import指令在style元素内部，而且必须放在其他CSS规则前面，否则不会起作用。并且@import指令导入的每个样式表都会使用无法指定候选样式表 ，也可以显示导入的样式表应用于何种媒体 。
想在外部式样式表中再引用link标签，可以使用@import指令。

4.HTTP链接

在Apache中，若想HTTP首部方式，可以在.htaccess文件中引用CSS文件。例如：

Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css"

5.行内样式

如果只想为单个元素提供少量样式，不值得动用嵌入式样式表或外部样式表，可以利用HTML元素的style属性设置行内样式，例如：

<p style="color:gray;">

注意：style属性的值只能是一系列规则声明，而不能包含整个样式表。因此不能在style属性中使用@import指令，也不能有完整的规则。通常不建议使用style属性。

三、样式表中的内容

1.标记

样式表中不能有标记。

2.规则的结构

一个规则由两个基本部分构成：选择符和声明块。声明块由一个或多个声明组成，而一个声明包含一个属性和对应的值。
选择符定义文档中的哪部分受影响。

3.厂商前缀

厂商前缀的一般格式是一个英文破折号、一个标注和一个英文破折号。

4.处理空白

解析时，连续的空白会合并成一个空白。

5.CSS注释

CSS注释放在/* 、*/ 之间，也可以分成多行，但不能嵌套。

五、媒体查询

创作人员通过媒体查询定义浏览器在何种媒体环境中使用指定的样式表。

1.用法

• link元素的media属性。
• style元素的media属性。
• @import声明的媒体描述部分。
• @media声明的媒体描述符部分。

2.简单的媒体查询

媒体查询包含描述媒体类型的词组和对媒体参数的说明，决定块中的CSS何时应用。

3.媒体类型

媒体查询最基本的形式媒体类型由CSS2引入。媒体类型就是指明不同媒体的标注：

• all 用于所有展示媒体。
• print 为有视力的用户打印文档时使用，也在预览效果时使用。
• screen在屏幕媒体上展示文档时使用。

应用方式：

<link href="print-color.css" type="text/css" media="screen,print">

<style type="text/css" media="screen,print">…</style>

@import url（frobozz.css) screen,print;

@media screen,print{…}

六、特性查询

特性查询功能指根据用户代理是否支持特定的CSS 属性及其值来应用一段样式。