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

2025-07-19 06:44:32

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

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

2、然后随意写个标签,和写个网页内部的样式,我们已上次的网页布局为例。<st鲻戟缒男yle 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样式的语句如下:<hea蟠校盯昂d><tit造婷用痃le>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。
猜你喜欢