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

2025-12-27 04:57:11

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

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

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

<style type="text/css">

#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>

<div id="top"></div>

<div id="middle"></div>

<div id="foot"></div>

</body>

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

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

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

3、我们新建一个CSS后缀格式的样式文件,用来做外部调用的文件。保存为style.css

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

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

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

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

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

<title>CSS调用</title>

</head>

<body>

<div id="top"></div>

<div id="middle"></div>

<div id="foot"></div>

</body>

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

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

<head>

<title>CSS调用</title>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

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

结果如下:

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

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢