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

  • 39
  • 0
  • 约1.31千字
  • 约 4页
  • 2021-08-16 发布于北京
  • 举报

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

博学谷——让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代码分离为两个或多个文件,实现了结构和表现的完全分离,使得网页的前期制作和后期维护都十分方便。

文档评论(0)

1亿VIP精品文档

相关文档