- CSS网页布局与浏览器兼容
- 张晓景
- 749字
- 2021-01-08 17:58:58
实战 在网页中链接外部CSS样式表文件
最终文件：最终文件\第1章\1-7-4.html 视频：视频\第1章\1-7-4.mp4
01 执行“文件>打开”命令，打开页面“源文件\第1章\1-7-4.html”，可以看到页面的HTML代码，如图1-1所示。在IE浏览器中预览该页面，可以看到该页面目前没有应用任何效果，如图1-2所示。
02 在Dreamweaver中执行“文件>新建”命令，新建一个外部CSS样式表文件，如图1-3所示，并将其保存为“源文件\第1章\style\1-7-4.css”。返回到HTML页面中，在<head>与</head>标签之间添加<link>标签，在该标签中添加相应的属性设置以链接刚创建的外部CSS样式表文件1-7-4.css，如图1-4所示。
图1-1 页面HTML代码
图1-2 预览页面效果
图1-3 “新建文档”对话框
图1-4 链接外部CSS样式表文件代码
提示
创建外部CSS样式表文件的方法有很多，甚至可以创建一个文本文件将其扩展名修改为.css，但是我们推荐使用专业的网页制作软件Dreamweaver来进行操作，本书中所有的讲解操作都是在Dreamweaver软件中进行的。
03 转换到刚链接的外部CSS样式表文件中，创建名为*的通配选择器和名为body的标签选择器，如图1-5所示。保存外部CSS样式表文件，在浏览器中预览页面，可以看到页面的效果，如图1-6所示。
图1-5 CSS样式代码
图1-6 预览页面效果
提示
各种CSS选择器将在第2章中详细介绍，各种CSS样式属性的设置也会在后面的章节中进行详细介绍。
04 转换到外部CSS样式表文件中，根据HTML页面中元素id名称的设置，创建名称为#menu的ID选择器，如图1-7所示。保存外部CSS样式表文件，在浏览器中预览页面，可以看到页面的效果，如图1-8所示。
图1-7 CSS样式代码
图1-8 预览页面效果
05 转换到外部CSS样式表文件中，创建名称为#text的ID选择器和名为#text p的后代选择器，如图1-9所示。保存外部CSS样式表文件，在浏览器中预览页面，可以看到页面的效果，如图1-10所示。
图1-9 CSS样式代码
图1-10 预览页面效果
提示
在页面中应用CSS样式的主要目的在于实现良好的网站文件管理及样式管理，分离式的结构有助于合理分配网站的内容与表现。