小蔡学Web：[10]web样式调用

时间：2026-02-17 02:16:26

1、首先我们打开DW网页编辑器然后新建一个CSS调用.html文件。

小蔡学Web：[10]web样式调用

2、然后随意写个标签，和写个网页内部的样式，我们已上次的网页布局为例。

#top{ height:800px; width:200px; background-color:#CC0000; float:left;}

#middle{ height:800px; width:500px; background-color:#FF9900;

float:left;}

#foot{ height:800px; width:200px; background-color:#FFFF00; float:left;}

</style>

<body>

</body>

这个代码的调试结果如下。

小蔡学Web：[10]web样式调用

3、我们新建一个CSS后缀格式的样式文件，用来做外部调用的文件。保存为ｓｔｙｌｅ.css

小蔡学Web：[10]web样式调用

4、然后我把上面<style>里面的内容剪切到style.css文件内。并且在原来的CSS调用.html文件内删掉style标签。

小蔡学Web：[10]web样式调用

5、我们现在看一下失去样式之后的网页是怎么样的，调试如下代码：

<title>CSS调用</title>

</head>

<body>

</body>

小蔡学Web：[10]web样式调用

6、在<head>标签里面输入调用外部ＣＳＳ样式的语句如下：

<head>

<title>CSS调用</title>

</head>

用的是<link>标签rel是关联的意思,关联的是一个样式表(stylesheet)文档，herf是一个链接，type是调用的文件类型。

结果如下：

小蔡学Web：[10]web样式调用