网页开发与制作CSS3入门3-3链接式CSS样式表.docVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 2 下面通过一个案例分步骤地演示如何通过链接式引入CSS样式表，具体步骤如下： 创建HTML文档 首先创建一个HTML文档，并在该文档中添加一个标题和一个段落文本，如例3-3所示。 example03.html !doctype html html head meta charset=utf-8 title链接式引入CSS样式表/title /head body h2链接式CSS样式/h2 p通过link 标记可以将拓展名为.css的外部样式表文件链接到HTML文档中。/p /body /html 将该HTML文档命名为example03.html，保存在chapter03文件夹中。 创建样式表 打开Dreamweaver工具，在菜单栏点击【文件】→【新建】选项，界面中会弹出“新建文档”窗口，如图3-3所示。 新建CSS文档 在“新建文档”窗口的基本页选项卡中选中【CSS】选项，点击【创建】按钮，弹出CSS文档编辑窗口，如图3-4所示。 CSS文档编辑窗口 保存CSS文件 选择【文件】→【保存】选项，弹出“另存为”对话框窗口，如图3-5所示。 另存为窗口 在图3-6所示窗口中，将文件命名为style.css，保存在example03.html文件所在的文件夹chapter03中。 书写CSS样式 在图3-7所示的CSS文档编辑窗口中输入以下代码，并保存CSS样式表文件。 h2{ text-align:center;} p{ /*定义文本修饰样式*/ font-size:16px; color:red; text-decoration:underline; } 链接CSS样式表 方法1： 在例3-3的head头部标记中，添加link /语句，将style.css外部样式表文件链接到example03.html文档中，具体代码如下： link href=style.css type=text/css rel=stylesheet / 方法2： 在CSS样式面板中选择“链接”按钮，如图3-6所示。 CSS样式面板 在链接外部样式表窗口中，添加为选择“链接”选项；再点击“浏览”按钮，如图3-7所示。 链接外部样式表 在跳出的“选择样式表文件”窗口中，选择对应的样式文件即可，如图3-8所示。 选择样式表文件 然后，保存example03.html文档，在浏览器中运行，效果如图3-9所示。 链接式效果展示 链接式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个link /标记链接多个CSS样式表。 链接式是使用频率最高，也最实用的CSS样式表。它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和表现的完全分离，使得网页的前期制作和后期维护都十分方便。