第三章网页中的文本

1、 第三章 网页中的文本 本章要点3.1 文本的基本编辑文本的基本编辑3.1.1 插入文本、符号、日期、水平线插入文本、符号、日期、水平线3.1.2 添加字体添加字体3.1.3 设置文本的属性设置文本的属性3.1.4 建立列表建立列表3.2 超链接超链接3.2.1 路径路径3.2.2 建立超链接建立超链接3.3 样式样式3.3.1 CSS语法语法3.3.2 CSS 样式应用样式应用3.3.3 引用外部引用外部CSS文件与导出样式表文件与导出样式表3.1 文本的基本编辑 互联网上大量信息的传播以文本为主。因此，对于网页互联网上大量信息的传播以文本为主。因此，对于网页制作人员来说，文本的处理是最基本

2、而重要的技巧之一。制作人员来说，文本的处理是最基本而重要的技巧之一。 学习网页制作首先应掌握网页中文本的制作和编辑方法。学习网页制作首先应掌握网页中文本的制作和编辑方法。3.1.1 插入文本、符号、日期插入文本、符号、日期、水平线v Enter 插入插入  （硬回车）（硬回车）v shiftenter 插入插入 （软回车）（软回车）v Ctrlshiftspace 插入一个插入一个 特殊字符特殊字符v 日期日期分段换行 分段换行与预格式分段换行与预格式 以下是直接写文本的情况：以下是直接写文本的情况： 星期一、星期二、星期三、星期四、星期一、星期二、星期三、星期四、 星期五

3、、星期六、星期日。星期五、星期六、星期日。 以下是使用了三个换行标记的情况：以下是使用了三个换行标记的情况： 星期一、星期二、星期一、星期二、星期三、星期四、星期三、星期四、 星期五、星期六、星期日。星期五、星期六、星期日。 以下使用分段标记（分为两段）：以下使用分段标记（分为两段）： 星期一、星期二、星期三、星期一、星期二、星期三、星期四、星期四、 星期五、星期六、星期日。星期五、星期六、星期日。 以下使用预格式：以下使用预格式： 星期一、星期二、星期三、星期四、星期一、星期二、星期三、星期四、 星期五、星期六、星期日。星期五、星期六、星期日。 以下以下 HTML 代码显示了如何用代码显示了

4、如何用 HR 标记符的各种标记符的各种属性控制水平线的显示，效果如下图所示。属性控制水平线的显示，效果如下图所示。 水平线效果水平线效果 以下是默认水平线：以下是默认水平线： 以下是粗为以下是粗为 5 像素的水平线：像素的水平线： 以下是长度为以下是长度为100像素的水平线：像素的水平线： 以下是长度为屏幕宽度以下是长度为屏幕宽度 50% 的水平线：的水平线： 以下是粗为以下是粗为 5 像素的实心水平线：像素的实心水平线： 以下是红色的水平线：以下是红色的水平线： 插入水平线3.1.2 添加字体添加字体执行菜单命令执行菜单命令“文本文本”|“字体字体”|“编辑字体列表编辑字体列表” 3.1.3

5、 设置文本的属性设置文本的属性图图3-4 文本的文本的“属性属性”面板面板【例例3-1】设计一个只有文字的页面，以下网页为例，对文字的格设计一个只有文字的页面，以下网页为例，对文字的格式、字体、字号、颜色以及对齐格式等属性进行设置。式、字体、字号、颜色以及对齐格式等属性进行设置。v 学习双标签学习双标签、及单标签及单标签、的使用的使用 v 文本的字体、字号、风格等属性以文本的字体、字号、风格等属性以CSS样式写在样式写在中中 v 自定义的自定义的CSS样式优先级高于网页样式样式优先级高于网页样式body,td,th 的优先级的优先级 用用设置标题的大小。设置标题的大小。网页设计网页设计今天天气

6、真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!今天天气真好今天天气真好!强制换行标记的使用强制换行标记的使用 强制换行标记的使用强制换行标记的使用欢迎进入牡丹园欢迎进入牡丹园!新闻新闻    影视影视聊聊 天天 室室v 强制不换行标记强制不换行标记，常用英文人名，常用英文人名v Bill Gates“计算机简史计算机简史”网页的显示效果网页的显示效果设置文字格式1 1 设置文字的大小设置文字的大小设置文字的大小的格式为：设置文字的大小的格式为：v fon

7、t size= 被设置的文字被设置的文字 fontv 标记可设定文字的字体、字号和颜色。标记可设定文字的字体、字号和颜色。v sizesize用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从1 17 7，sizesize取取1 1时时最小，取最小，取7 7时最大。时最大。v faceface用来设置字体。如黑体、宋体、楷体用来设置字体。如黑体、宋体、楷体GB2312GB2312、仿宋、仿宋GB2312GB2312、隶书、隶书、Times New RomanTimes New Roman等。等。v colorcolor用来设置文字颜色。用来设置文字颜色。和和标记都可以设置

8、文字的大小，当标记都可以设置文字的大小，当中的中的size取取7时的文字比时的文字比要大。要大。【例例2-52-5】用用设置文字的大小。设置文字的大小。 用用设置文字的大小设置文字的大小文字的大小文字的大小!文字的大小文字的大小 size=1文字的大小文字的大小 size=2文字的大小文字的大小 size=3文字的大小文字的大小 size=4文字的大小文字的大小 size=5文字的大小文字的大小 size=6文字的大小文字的大小 size=7 上标（sup）和下标（sub）标记 v用于书写数学公式或分子式。用于书写数学公式或分子式。v如：如：H2O X2v由于字体标记属于对文本由于字体标记属于

9、对文本外观外观进行修饰的标记，进行修饰的标记，是由于当时是由于当时CSS语言尚未出现时语言尚未出现时html定义的表现定义的表现的范畴，随着的范畴，随着CSS的出现，这些表现功能均可以的出现，这些表现功能均可以由由CSS完成，所以不含有语义的字体标记慢慢过完成，所以不含有语义的字体标记慢慢过时了。时了。 3.1.4 建立列表建立列表 v 与列表有关的标签为与列表有关的标签为、等，格式。等，格式。 v 通过文本的通过文本的“属性属性”面板建立列表面板建立列表创建有序列表创建有序列表v 创建有序列表创建有序列表v 创建有序列表需要使用有序列表标记符创建有序列表需要使用有序列表标记符 OL 和列表项

10、标记符和列表项标记符 LI，其中其中 LI 标记符的结束标记符可以省略，基本语法如下：标记符的结束标记符可以省略，基本语法如下：v v 列表项列表项 1v 列表项列表项 2v 列表项列表项 3v v OL标记符具有两个常用的属性：标记符具有两个常用的属性：type 和和 start，分别用来设置数，分别用来设置数字序列样式和数字序列的起始值。字序列样式和数字序列的起始值。start 属性的值可以是任意整属性的值可以是任意整数，数，type 属性的值如表属性的值如表 2-3 所示：所示：有序列表的 type 属性值值值含义含义1阿拉伯数字：1、2、3 等，此选项为默认值A大写字母：A、B、C 等

11、a小写字母：a、b、c 等I大写罗马数字：I、II、III、IV 等i小写罗马数字：i、ii、iii、iv 等v 当位于当位于 OL 标记符内时，标记符内时，LI 标记符具有两个常用的属性：标记符具有两个常用的属性：type 和和 value。type 属性用于设置数字样式，取值与属性用于设置数字样式，取值与 OL 的的 type 属性属性相同；相同；value 属性用于指定一个新的数字序列起始值，以获得非属性用于指定一个新的数字序列起始值，以获得非连续性的数字序列。连续性的数字序列。v 例如以下例如以下HTML 代码显示了如何创建不同的有序列表，效果代码显示了如何创建不同的有序列表，效果如下

12、图所示。如下图所示。用大写罗马字母表示用大写罗马字母表示的有序列表：的有序列表：列表值列表值1列表值列表值2列表值列表值3 数字序列的有序列表数字序列的有序列表张三张三李四李四王五王五字母序列的有字母序列的有序列表序列表： 列表值列表值1 列表值列表值1 列表值列表值1编号不连续编号不连续的有序列表的有序列表：列表值列表值1列表值列表值1列表值列表值1其实数字为其实数字为3的有序的有序列表：列表：列表值列表值1列表值列表值2列表值列表值3 有序列表示例有序列表示例用大写罗马字母表示的有序列表：用大写罗马字母表示的有序列表： 列表项列表项1 列表项列表项2 列表项列表项3起始数字为起始数字为 3

13、 的有序列表：的有序列表： 列表项列表项1 列表项列表项2 列表项列表项3编号不连续的有序列表编号不连续的有序列表列表项列表项1 列表项列表项2 列表项列表项3变换了数字样式的有序列表变换了数字样式的有序列表列表项列表项1 列表项列表项2 列表项列表项3 有序列表的嵌套有序列表的嵌套 以下以下HTML代码即显示了一个嵌套的有序列表，效果如下图所代码即显示了一个嵌套的有序列表，效果如下图所示。示。嵌套的有序列表嵌套的有序列表嵌套的有序列表嵌套的有序列表列表项列表项 1子列表项子列表项 1子列表项子列表项 2子列表项子列表项 3列表项列表项 2列表项列表项 3创建无序列表创建无序列表 无序列表使用

14、无序列表使用和和标记，它包含的内容项没有指定顺序，标记，它包含的内容项没有指定顺序，表示彼此相关但却不遵循某一顺序的一组信息。无序列表的每一项表示彼此相关但却不遵循某一顺序的一组信息。无序列表的每一项不再用编号表示，而是用某种类型的标志（如实心圆、空心圆圈等）不再用编号表示，而是用某种类型的标志（如实心圆、空心圆圈等）表示。一个典型的无序列表如下定义：表示。一个典型的无序列表如下定义：第第1项项第第2项项 第第n项项列表项标志可以通过列表项标志可以通过标记的标记的type属性来设置。属性来设置。type属性可以选属性可以选择以下几项之一：择以下几项之一：circle：空心圆点空心圆点squar

15、e：方块方块disc：实心圆点实心圆点无序列表无序列表 以下以下 HTML 代码显示了如何创建无序列表，效果如下图代码显示了如何创建无序列表，效果如下图 所示。所示。无序列表示例无序列表示例默认无序列表：默认无序列表：列表项列表项1列表项列表项2列表项列表项3使用方块作为列表项标记的无序列表：使用方块作为列表项标记的无序列表： 列表项列表项1列表项列表项2列表项列表项3嵌套的无序列表示例 文章文章 CSS教程教程 DOM教程教程 XML教程教程 参考参考 XHTML XMLCSS 定义项目列表定义项目列表v 定义项目列表定义项目列表 用项目列表表示单词或语句用项目列表表示单词或语句, ,使之具

16、有交互凹进的特点使之具有交互凹进的特点. .定义项目定义项目列表使用标记列表使用标记、和和。往往用于定义单词，往往用于定义单词，用于定义语句。由用于定义语句。由定义的项目会自动换行左对齐，但项目之定义的项目会自动换行左对齐，但项目之间没有空行。格式为：间没有空行。格式为： 定义单词定义单词1 1 单词单词1 1的说明的说明 定义单词定义单词2 2 单词单词2 2的说明的说明 . .项目列表应用示例项目列表应用示例 项目列表应用项目列表应用 院系设置院系设置 计算机应用专业计算机应用专业 专业内容有专业内容有 计算机软件专业计算机软件专业 专业内容有专业内容有 计算机网络专业计算机网络专业 专业

17、内容有专业内容有 课堂练习：定义列表项目 湖南城市湖南城市长沙长沙衡阳衡阳常德常德 湖北城市湖北城市武汉武汉襄樊襄樊宜昌宜昌混合嵌套列表混合嵌套列表有序列表和无序列表也可有序列表和无序列表也可互相嵌套，如以下互相嵌套，如以下 HTML 代码所示：代码所示： 列表项列表项1 列表项列表项2 子列表项子列表项1 子列表项子列表项2 列表项列表项3超链接超链接 站内文档链站内文档链接接 要点要点1 要点要点2 站外文档链站外文档链接接课堂练习：制作诗歌目录课堂练习：制作诗歌目录3.2 超链接超链接 3.2.1 路径路径v 绝对路径绝对路径 ：是是Internet上资源的完整地址。上资源的完整地址。

18、包括包括3部分：协议种类、放有所须文件的计算机地址（计部分：协议种类、放有所须文件的计算机地址（计算机域名）、具体文件的路径及文件名。算机域名）、具体文件的路径及文件名。协议协议:/计算机域名计算机域名/文件路径及文件名文件路径及文件名 创建对站点以外的链接必须用绝对路径。创建对站点以外的链接必须用绝对路径。 v 根相对路径根相对路径 ：从站点根文件夹到文档所经过的路程，以斜杠：从站点根文件夹到文档所经过的路程，以斜杠/开始，例如：开始，例如：/support/tips.html就是站点根文件夹下的就是站点根文件夹下的support子文件夹中的一个文件的根相对路径。子文件夹中的一个文件的根相对

19、路径。 浏览器不能像服务器那样识别站点根目录，故与根目录相对的路径浏览器不能像服务器那样识别站点根目录，故与根目录相对的路径必须放在远程服务器上才能浏览必须放在远程服务器上才能浏览 。v 文档相对路径文档相对路径 ：相对当前文档的路径：相对当前文档的路径 。3.2.2 建立超链接建立超链接v 建立超链接由锚点（建立超链接由锚点（anchor）标签）标签定义：定义：v 它在网页上建立超文本链接。通过单击一个词、句或图片，可从它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源此处转到另一个链接资源(目标资源目标资源)，这个目标资源有唯一的地，这个目标资源有唯一的地址址(

20、URL)。以上特点的词、句或图片就称为热点。以上特点的词、句或图片就称为热点。 热点热点 属性属性href指定超链接的目标网页地址，包括路径和文件名指定超链接的目标网页地址，包括路径和文件名 属性属性target指定超链接文件被打开的目标窗口，有如下指定超链接文件被打开的目标窗口，有如下4个选个选项：项：_blank：将链接的文件载入到新的无标题浏览器窗口中。：将链接的文件载入到新的无标题浏览器窗口中。_parent：将链接的文件载入到父框架，若该框架非嵌入式：将链接的文件载入到父框架，若该框架非嵌入式框架，则链接到整个浏览器窗口。框架，则链接到整个浏览器窗口。3.2.2 建立超链接_self

21、（默认值）：将链接的文件载入到自身框架或自（默认值）：将链接的文件载入到自身框架或自身窗口中。身窗口中。_top：将链接的文件载入到整个浏览器窗口中，并删：将链接的文件载入到整个浏览器窗口中，并删除所有框架。除所有框架。在在Dreamweaver中提供了中提供了6种常用的链接：种常用的链接：外部文档链接外部文档链接、书书签链接签链接、E-mail链接链接、无址链接无址链接、脚本链接脚本链接和和指向下载文件的指向下载文件的链接链接。1外部文档链接外部文档链接指链接到本文档之外的文档，包括站内和站外的网页。指链接到本文档之外的文档，包括站内和站外的网页。 在热字在热字“属性属性”面板的面板的“链接

22、链接”框中填入超链接的外部框中填入超链接的外部文档地址（属性文档地址（属性href的值的值)； 在在“目标目标”下拉列表框中设置超链接的目标窗口下拉列表框中设置超链接的目标窗口(属性属性target的值的值)。 标记的格式为：标记的格式为： 热点热点 属性属性href为超文本引用，它的值为一个为超文本引用，它的值为一个URL，是目标，是目标 资源的有效地址。资源的有效地址。 属性属性name指定当前文档内的一个字符串，作为链接时指定当前文档内的一个字符串，作为链接时 可以使用的有效的目标资源的地址。可以使用的有效的目标资源的地址。 热点可以根据需要设置颜色，利用热点可以根据需要设置颜色，利用标

23、记中相关标记中相关 的属性。的属性。 建立指向其他页面的链接建立指向其他页面的链接其格式为：其格式为： 热点文本热点文本 v 根据目标文件与当前文件的目录关系，有如以下根据目标文件与当前文件的目录关系，有如以下4 4种写法。种写法。1 1）链接到同一目录内的网页文件链接到同一目录内的网页文件链接到同链接到同目录内的网页文件的格式为：目录内的网页文件的格式为： 热点文本热点文本 2 2）链接到下一级目录中的网页文件链接到下一级目录中的网页文件链接到下一级目录中的网页文件的格式为：链接到下一级目录中的网页文件的格式为： 热点文本热点文本 3 3）链接到上一级目录中的网页文件）链接到上一级目录中的网

24、页文件链接到上一级目录中的网页文件的格式为：链接到上一级目录中的网页文件的格式为： 热点文本热点文本 其中其中“”表示退到上一级目录中。表示退到上一级目录中。4 4）链接到同级目录中的网页文件）链接到同级目录中的网页文件链接到同级目录中的网页文件的格式为：链接到同级目录中的网页文件的格式为： 热热点文本点文本 5 5） 创建指向本页中的链接创建指向本页中的链接要在当前页面内实现超链接，需要定义两个标记：一个为超要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：链接标记，另一个为书签标记。超链接标记的格式为： 热点文本热点文本即单击热点文本，将跳

25、转到即单击热点文本，将跳转到“记号名记号名”开始的文本。开始的文本。书签就是用书签就是用标记对该文本做一个记号。若有多个链接的书签标记对该文本做一个记号。若有多个链接的书签名，书签名在名，书签名在的的namename属性中定义。属性中定义。格式为：格式为： 目标文本附近的字符串目标文本附近的字符串 v 使用了使用了name属性的锚站称为命名锚站，它用于创建指向同一属性的锚站称为命名锚站，它用于创建指向同一页面中指定位置的链接，以便直接跳到此位置，而不是像一页面中指定位置的链接，以便直接跳到此位置，而不是像一般锚站那样在不同页面间跳转。命名锚站的一般语法格式为：般锚站那样在不同页面间跳转。命名锚

26、站的一般语法格式为：锚站锚站A 属性属性name的值的值“书签名书签名”用来标示用来标示“锚站锚站A”在在HTML文文档中的位置。档中的位置。 要找到命名锚站所在的位置，就必须使用要找到命名锚站所在的位置，就必须使用。例如，要找到上述锚站，就要编写如下。例如，要找到上述锚站，就要编写如下代码：代码： 点击此处将使浏览器跳到锚站点击此处将使浏览器跳到锚站A处处 注意：注意：href属性赋的值若是锚站的属性赋的值若是锚站的name属性值，则必属性值，则必须在书签名前边加一个须在书签名前边加一个“#”号号。2书签链接书签链接 热点热点 建立书签：建立书签：“插入插入”面板的面板的“命名锚记命名锚记”

27、 按钮按钮 链接书签：链接书签： # 书签名。书签名。3无址链接无址链接 返回页面的无址连接返回页面的无址连接 热点热点 不返回页面顶端，形成手形光标不返回页面顶端，形成手形光标 热点热点 4E-mail链接（电子邮件链接）链接（电子邮件链接） 热点热点 “插入插入”面板中的面板中的“电子邮件链接电子邮件链接” 按钮按钮3.2.2 建立超链接5脚本链接脚本链接 在选中热字的在选中热字的link框中直接写入脚本。框中直接写入脚本。 例：例：JavaScript:alert(确定删除吗确定删除吗)6指向下载文件的链接指向下载文件的链接 链接的目标文件不是链接的目标文件不是HTML文件，则作为下载文

28、件，格式：文件，则作为下载文件，格式： 热点热点 【例例3-3】试制作外部文档链接、外部文档书签链接、本文档书试制作外部文档链接、外部文档书签链接、本文档书签链接、签链接、E-mail链接、无址链接和脚本链接。链接、无址链接和脚本链接。 3.3 CSS样式 样式是一组可以控制文本块、段落或整篇文档外观的格式样式是一组可以控制文本块、段落或整篇文档外观的格式属性。使用外部样式文件可以一次控制若干篇文档的格式属性。使用外部样式文件可以一次控制若干篇文档的格式 。 CSS（Cascading Style Sheets）即级联样式表或层叠样式表）即级联样式表或层叠样式表通过样式名或通过样式名或HTML

29、标签表示，可以控制绝大多数的传统文标签表示，可以控制绝大多数的传统文本格式，如字体、字号和对齐方式等，还可以指定位置、鼠本格式，如字体、字号和对齐方式等，还可以指定位置、鼠标指针形状和其他特殊效果。标指针形状和其他特殊效果。 为了防止某些浏览器不识别某些为了防止某些浏览器不识别某些 CSS样式，可以用注释标样式，可以用注释标签签将将CSS样式括起来。样式括起来。 样式设计是指应用样式设计是指应用HTML样式和样式和CSS（层叠样式表）设计（层叠样式表）设计网页的外观样式。网页的外观样式。CSS是Cascading Style Sheet的缩写，我们把，我们把它译为它译为“层叠样式表”或或“级联

30、样式表”。 1样式表的优点样式表的优点 （1）同时更新站点的许多页面，更快更容易）同时更新站点的许多页面，更快更容易 （2）制作体积小，下载页面快）制作体积小，下载页面快 （3）样式和结构分离）样式和结构分离 2CSS的基本语法和定义的基本语法和定义 （1）CSS的基本语法的基本语法v CSS样式表的样式规则是由三个部分构成：样式表的样式规则是由三个部分构成：Selector（选择（选择器），器），Property（属性）和（属性）和Value（属性的取值）。基本的格（属性的取值）。基本的格式如下。式如下。v Selector v properties1: value1 ; /*第第1个属性名

31、及属性值个属性名及属性值*/v properties2 : value 2; /*第第2个属性名及属性值个属性名及属性值*/v v selector：第一种是：第一种是HTML标签选择器标签选择器，只对该标签起作用，只对该标签起作用，例如例如body，p，a等。等。 第二种叫第二种叫class，即类选择器，必须以，即类选择器，必须以“”开始，名称可以是开始，名称可以是字母和数字的组合，可应用到任何对象。字母和数字的组合，可应用到任何对象。 第三种叫第三种叫ID选择器选择器，和类选择器类似，必须以，和类选择器类似，必须以“#”开始，名称开始，名称也是字母和数字的组合，可应用到任何对象，但其有一定

32、的也是字母和数字的组合，可应用到任何对象，但其有一定的局限性。局限性。 如：如：# righttext-align: right /*只对只对id=right的的段落起作用段落起作用*/property：就是指将要被修改的性质，例如就是指将要被修改的性质，例如color。value：给给property的值，例如给的值，例如给color的值可以设置为的值可以设置为red或或#00ff00。 （2）CSS的定义的定义 CSS允许网站作者的网页外观以及表示方式更多控制。允许网站作者的网页外观以及表示方式更多控制。 它它们扩展能够精确页上指定元素的位置和外观并创建特殊效果。们扩展能够精确页上指定元素

33、的位置和外观并创建特殊效果。 优先级低高共有三种类型的级联样式表：共有三种类型的级联样式表：外部样式表、嵌入样式表外部样式表、嵌入样式表和和内内联样式表联样式表。v 先创建先创建CSS样式，再对选定文本应用样式，再对选定文本应用CSS样式。样式。v 对选定文本用了某对选定文本用了某CSS样式后，若又改变了该样式的格样式后，若又改变了该样式的格式，则修改之前用了该样式的文本自动更新格式。图式，则修改之前用了该样式的文本自动更新格式。图3-15 “CSS样式样式”面板面板v CSS样式创建之后，样式创建之后，只对本网页有效只对本网页有效。以往创建的。以往创建的CSS样式不存在于新开文件的样式不存在

34、于新开文件的CSS样式列表中，新网页须重样式列表中，新网页须重新附加新附加CSS文件。文件。3.3.3 使用CSS 样式在新建在新建CSS样式窗口中，需要设置样式窗口中，需要设置3个参数：个参数：v 选择器类型选择器类型v 样式名称样式名称v 样式定义的范围样式定义的范围 边框属性边框属性.b font-family: 新宋体新宋体; font-size: 24pt;border-top-width: medium;border-right-width: medium;border-bottom-width: medium;border-left-width: medium;border-to

35、p-style: dotted; border-right-style: dotted;border-bottom-style: dotted;border-left-style: dotted;border-top-color: #FF0000;border-right-color: #000000;border-bottom-color: #0000FF;border-left-color: #00FFFF;font-style: italic; line-height: normal;color: #99FF00; margin: 0.2in;padding: 0.2in; 边框属性边框

36、属性 以下示例显示了边框属性的用法，效果如图所示。以下示例显示了边框属性的用法，效果如图所示。代码v .title font:bolder italic; font-family:楷体楷体_GB2312; text-align:center;background-image:url(background.jpg);border-width:thin medium thick;border-style:solid;border-color:gray v .contentborder:solid #5f9ea0 thinv .authortext-align:rightv BODYbackgrou

37、nd:#f0f8ff;background-image: url(); v v 惜春惜春v v 黑发不知勤学早，白首方悔读书迟。黑发不知勤学早，白首方悔读书迟。v 颜真卿颜真卿 v v 莫等闲白了少年头，空悲切。莫等闲白了少年头，空悲切。v 岳飞岳飞 v v 页面元素周围的空白页面元素周围的空白 以下示例可以显示出这三种空白的区别，效果如图所示（以下示例可以显示出这三种空白的区别，效果如图所示（A 表示边界、表示边界、B 表示边框、表示边框、C 表示填充）。表示填充）。v Pmargin:0.25in; border:0.25in solid black; padding:0.25in; ba

38、ckground:gray页面元素周围的空白页面元素周围的空白 v 1“类类”选择器选择器【例例3-4】在文字上应用样式。在文字上应用样式。.Glow font-size: 24pt;line-height: 25pt;filter: Glow(Color=#ff0000, Strength=4);color: #FFFFFF;.glow font-family: 隶书隶书, 华文中宋华文中宋;font-size: 36px;font-weight: normal;color: #FFFFFF;filter: Glow(Color=#ff0000, Strength=2);.blur font

39、-family: 隶书隶书, 华文中宋华文中宋;font-size: 36px;color: #0000ff;filter: Blur(Add=true, Direction=135, Strength=3); .shadow2 font-family: 隶书隶书, 华文中宋华文中宋;font-size: 36px;color: #0000ff;filter: Shadow(Color=#cccccc, Direction=135);.shadow1 font-family: 隶书隶书, 华文中宋华文中宋;font-size: 36px;color: #0000ff;filter: DropS

40、hadow(Color=#999999, OffX=3, OffY=3, Positive=1); 【例3-5】为图片设置具有透明效果（为图片设置具有透明效果（Alpha滤镜）、风吹效滤镜）、风吹效果（果（Blur滤镜）、黑白效果（滤镜）、黑白效果（Gray滤镜）、反相滤镜）、反相效果（效果（Invert滤镜）的样式。滤镜）的样式。.Alpha filter: Alpha(Opacity=100, FinishOpacity=5, Style=2, StartX=30, StartY=20, FinishX=120, FinishY=50);过滤器效果之二过滤器效果之二 此段文本未使用效果此段

41、文本未使用效果 此段文本使用了此段文本使用了 blur 效果效果 此段文本使用了此段文本使用了 dropShadow 效效果果 此段文本使用了此段文本使用了 glow 效果效果 此段文本使用了此段文本使用了 mask 效果效果 此段文本使用了此段文本使用了 shadow 效果效果CSS竖排文字v 样式表的文字处理属性中有两个重要的属性：样式表的文字处理属性中有两个重要的属性：writing-mode和和text-align。让我们先看看它们的用法：。让我们先看看它们的用法：v 1. writing-mode（设置对象书写方向）（设置对象书写方向）v 语法：语法：writing-mode : l

42、r-tb、tb-rl参数：参数：lr-tb：从左向右，从上往下：从左向右，从上往下 tb-rl：从上往下，从右向左：从上往下，从右向左示例：示例：div writing-mode: tb-rl; v 2. text-align（设置对象中文本的对齐方式）（设置对象中文本的对齐方式）v 语法：语法：text-align : left、right、center、justify参数：参数：left：左对齐：左对齐right：右对齐：右对齐center：居中：居中justify：两端对齐两端对齐示例：示例：div text-align : center; 课堂练习：使用课堂练习：使用CSS竖排诗歌竖排

43、诗歌2“标签标签”选择器选择器3“高级高级”选择器选择器bodyscrollbar-face-color: #3399FF; /立体滚动条凸出部分的颜色立体滚动条凸出部分的颜色scrollbar-highlight-color: #FFFFFF;/滚动条空白部分的颜色滚动条空白部分的颜色scrollbar-3dlight-color: #FFC097;/立体滚动条亮边的颜色立体滚动条亮边的颜色scrollbar-darkshadow-color: #FFFFFF;/立体滚动条强阴影的颜色立体滚动条强阴影的颜色scrollbar-shadow-color: #FF3300;/立体滚动条阴影的颜色

44、立体滚动条阴影的颜色scrollbar-arrow-color: #FF3300; /上下按钮上三角箭头的颜色上下按钮上三角箭头的颜色scrollbar-track-color: #D7EBFF; /滚动条的基本颜色滚动条的基本颜色 v 鼠标属性鼠标属性v 鼠标属性用于设置在对象上面移动的鼠标指针显示的形状，取鼠标属性用于设置在对象上面移动的鼠标指针显示的形状，取值如表值如表 所示。所示。值值含义含义auto浏览器基于当前文本决定显示哪种指针crosshair简单十字形default随平台而定的默认指针（通常为箭头）hand手形move指示某物被移动的交叉箭头*-resize指示边缘被移动的箭

45、头（*可以是 n、ne、nw、s、se、sw、e 以及 w，分别代表北、东北、西北、等方向）text编辑文本指针（通常为 I 形）wait指示程序正忙、用户需要等待的沙漏图标或监视图标help指示用户可以得到帮助的问号图标3.3.4 引用外部CSS文件与导出样式表1引用外部引用外部CSS文件文件“链接链接”是通过指针指向外部是通过指针指向外部CSS文件，文件，“导入导入”相当于存在内部样式表中，相当于存在内部样式表中，这个区别可以从它们在代码中的位置看到。这个区别可以从它们在代码中的位置看到。 /* 链接的链接的CSS文文件件 */【例例3-7】在系统中查找在系统中查找help.css，并引入

46、自己的网页。，并引入自己的网页。 3.3.4 引用外部CSS文件与导出样式表2导出导出CSS样式表样式表 在单个文档中设置的样式只在该文档中有效，要使单个文在单个文档中设置的样式只在该文档中有效，要使单个文档中的样式应用到其他文档，则应将其中的样式导出为样式档中的样式应用到其他文档，则应将其中的样式导出为样式表文件。这样表文件。这样Dreamweaver就可以通过样式表文件链接到其就可以通过样式表文件链接到其他网页，使整个站点具有相同的样式设置。他网页，使整个站点具有相同的样式设置。【例例3-8】建立及导出建立及导出 CSS样式表文件。样式表文件。CSS的盒子模型v盒子模型是盒子模型是CSS的基石之一的基石之一，