Dreamweaver怎么用代码链接外部样式表
来源:互联网
更新时间:2026-07-22 08:44
Dreamwea ver怎么用代码链接外部样式表
在Dreamwea ver里做网页，外部样式表是管理网站风格最干净的方式。不用每次都在每个页面里重复写样式，改一个文件，全站跟着变。下面就说一下怎么用代码手动链接外部CSS，其实就几步。
先把站点打开，HTML页面准备好。然后点击“文件”菜单，选择“新建”。
在新建对话框里，选择“CSS”类型。
接着会弹出一个保存对话框，让你选择CSS文件要放哪个文件夹。这里建议专门建一个叫“css”的文件夹，把所有样式文件统一管理。
我就选定了css文件夹，并把文件名改成“main.css”，这样以后看到就知道是主要的样式表，好辨认。
CSS文件新建好之后，先别急着写样式，先切回你的HTML页面。
在HTML的`
`标签里，`
`标签的下面，输入这一行代码：</p>
<p><code><link href="css/main.css" type="text/css" rel="stylesheet" /></code></p>
<p><img src="http://www.haoling.cc/uploadfile/2026/0722/39bbf21265d6c995cc8598f25aa7c50d.webp" /><img src="http://www.haoling.cc/uploadfile/2026/0722/92c19f645c19b83c2e03956d8e60b3ff.webp" /></p>
<p>然后保存一下HTML文件。注意看，在Dreamwea ver的标签栏里，页面名称旁边多了一个“css样式”的页面标签，这就表示链接成功了。刚刚新建的空白CSS文件可以直接删掉（其实不用删，留着编辑样式就行）。</p>
<p><img src="http://www.haoling.cc/uploadfile/2026/0722/c6818087a2ef6dfef1a0f687f5c521ed.webp" /></p>
<p>接着，双击那个链接进来的“main.css”标签，打开它，在里面编写你想要的样式规则就行了。写完之后，HTML页面会自动应用这些样式。</p>
<p><img src="http://www.haoling.cc/uploadfile/2026/0722/7963c17db65de485a6eab8a4dc52f9c8.webp" /></p> </div>
<div class="ccRmzxBox">
<div class="ccRmglTitle">
<b></b>
<h2>热门资讯</h2>
<a href="http://www.haoling.cc/wenzhang_list/53-1.html"></a>
<div class="clear"></div>
</div>
<ul class="ccRmzxList">
<li>
<a href="http://www.haoling.cc/wenzhang/603372/" class="aBlack">
<b></b>
<p>问卷星官方网站入口地址 问卷星网页版在线使用</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/604422/" class="aBlack">
<b></b>
<p>币安Binance官方中文网站 币安App最新版下载及新手注册指南</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/607584/" class="aBlack">
<b></b>
<p>为何比特币BTC价格跌破7.3万美元?一文拆解影响近期比特币行情的五大原因</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/603170/" class="aBlack">
<b></b>
<p>豆包AI专业版使用教程【新手必看】</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/614336/" class="aBlack">
<b></b>
<p>摩托车活塞环性能如何</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/617431/" class="aBlack">
<b></b>
<p>ThinkBook系列最新价格全解析：2026年选购避坑与实时询价指南</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/604322/" class="aBlack">
<b></b>
<p>迷你网名古风男生霸气(精选100个)</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/606548/" class="aBlack">
<b></b>
<p>文雅简易网名男生可爱(精选100个)</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/612765/" class="aBlack">
<b></b>
<p>GPT5.6惨遭切脑，Fable 5回归要变弱鸡版?</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/604399/" class="aBlack">
<b></b>
<p>陈姓和杨姓网名大全男生(精选100个)</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/604420/" class="aBlack">
<b></b>
<p>网名开头英文名字男生(精选100个)</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/605241/" class="aBlack">
<b></b>
<p>区块链存储板块是什么？有哪些？一文详解</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/620092/" class="aBlack">
<b></b>
<p>暗黑4S14野蛮人终局BD攻略</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/628371/" class="aBlack">
<b></b>
<p>Ondo将于今日上线股票永续合约</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/605502/" class="aBlack">
<b></b>
<p>免费网络收音机软件有哪些？高评分收音机APP推荐</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/604128/" class="aBlack">
<b></b>
<p>时隔一个多月，Dify v1.15.0终于发布了！</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/603497/" class="aBlack">
<b></b>
<p>郑好办app如何查询档案 郑好办app查询档案方法</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/610433/" class="aBlack">
<b></b>
<p>电视剧《罗曼诺夫后裔》剧情介绍</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/603376/" class="aBlack">
<b></b>
<p>迅雷云盘如何下载到本地速度最快</p>
<div class="clear"></div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/wenzhang/607522/" class="aBlack">
<b></b>
<p>如何在火狐浏览器中彻底禁用自动更新功能？</p>
<div class="clear"></div>
</a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
<!--宸﹁竟 end-->
<!--鍙宠竟-->
<div class="ccRight">
<div class="ccYxphBox">
<div class="ccRmglTitle">
<b></b>
<h2>热门手游</h2>
<a href="http://www.haoling.cc/sjyx_list/38-1-1.html"></a>
<div class="clear"></div>
</div>
<ul class="ccYxphList">
</ul>
</div>
<div class="ccYxphBox">
<div class="ccRmglTitle">
<b></b>
<h2>相关攻略</h2>
<a href="http://www.haoling.cc/wenzhang_list/53-1.html"></a>
<div class="clear"></div>
</div>
<ul class="ccXgglList djScList">
<li>
<div class="ccXgglCont1 hover1" >
<span class="bg1">1</span>
<a href="http://www.haoling.cc/wenzhang/562015/" title="Hello Kitty My Dream Store赛季任务如何完成-Hello Kitty My Dream Store赛季任务的做法" class="aBlack">Hello Kitty My Dream Store赛季任务如何完成-Hello Kitty My Dream Store赛季任务的做法</a>
<em>06-05</em>
<div class="clear"></div>
</div>
<div class="ccXgglCont2 hover2" style="display:none;">
<span class="bg1">1</span>
<a href="http://www.haoling.cc/wenzhang/562015/" title="Hello Kitty My Dream Store赛季任务如何完成-Hello Kitty My Dream Store赛季任务的做法"></a>
<dl>
<dt><a href="http://www.haoling.cc/wenzhang/562015/" title="Hello Kitty My Dream Store赛季任务如何完成-Hello Kitty My Dream Store赛季任务的做法" class="aBlack">Hello Kitty My Dream Store赛季任务如何完成-Hello Kitty My Dream Store赛季任务的做法</a></dt>
<dd><b></b>06-05</dd>
</dl>
<div class="clear"></div>
</div>
</li>
<li>
<div class="ccXgglCont1 hover1" >
<span class="bg2">2</span>
<a href="http://www.haoling.cc/wenzhang/564373/" title="Hello Kitty My Dream Store店铺排名怎么提升" class="aBlack">Hello Kitty My Dream Store店铺排名怎么提升</a>
<em>06-06</em>
<div class="clear"></div>
</div>
<div class="ccXgglCont2 hover2" style="display:none;">
<span class="bg2">2</span>
<a href="http://www.haoling.cc/wenzhang/564373/" title="Hello Kitty My Dream Store店铺排名怎么提升"></a>
<dl>
<dt><a href="http://www.haoling.cc/wenzhang/564373/" title="Hello Kitty My Dream Store店铺排名怎么提升" class="aBlack">Hello Kitty My Dream Store店铺排名怎么提升</a></dt>
<dd><b></b>06-06</dd>
</dl>
<div class="clear"></div>
</div>
</li>
<li>
<div class="ccXgglCont1 hover1" >
<span class="bg3">3</span>
<a href="http://www.haoling.cc/wenzhang/579393/" title="降低门槛、自带生态:腾讯内测“TDream”欲重构视频生产体验" class="aBlack">降低门槛、自带生态:腾讯内测“TDream”欲重构视频生产体验</a>
<em>06-13</em>
<div class="clear"></div>
</div>
<div class="ccXgglCont2 hover2" style="display:none;">
<span class="bg3">3</span>
<a href="http://www.haoling.cc/wenzhang/579393/" title="降低门槛、自带生态:腾讯内测“TDream”欲重构视频生产体验"></a>
<dl>
<dt><a href="http://www.haoling.cc/wenzhang/579393/" title="降低门槛、自带生态:腾讯内测“TDream”欲重构视频生产体验" class="aBlack">降低门槛、自带生态:腾讯内测“TDream”欲重构视频生产体验</a></dt>
<dd><b></b>06-13</dd>
</dl>
<div class="clear"></div>
</div>
</li>
<li>
<div class="ccXgglCont1 hover1" >
<span class="bg4">4</span>
<a href="http://www.haoling.cc/wenzhang/598964/" title="Hello-Kitty-My-Dream-Store零氪如何经营-零氪经营Hello-Kitty-My-Dream-Store的方法" class="aBlack">Hello-Kitty-My-Dream-Store零氪如何经营-零氪经营Hello-Kitty-My-Dream-Store的方法</a>
<em>06-23</em>
<div class="clear"></div>
</div>
<div class="ccXgglCont2 hover2" style="display:none;">
<span class="bg4">4</span>
<a href="http://www.haoling.cc/wenzhang/598964/" title="Hello-Kitty-My-Dream-Store零氪如何经营-零氪经营Hello-Kitty-My-Dream-Store的方法"></a>
<dl>
<dt><a href="http://www.haoling.cc/wenzhang/598964/" title="Hello-Kitty-My-Dream-Store零氪如何经营-零氪经营Hello-Kitty-My-Dream-Store的方法" class="aBlack">Hello-Kitty-My-Dream-Store零氪如何经营-零氪经营Hello-Kitty-My-Dream-Store的方法</a></dt>
<dd><b></b>06-23</dd>
</dl>
<div class="clear"></div>
</div>
</li>
<li>
<div class="ccXgglCont1 hover1" >
<span class="bg4">5</span>
<a href="http://www.haoling.cc/wenzhang/654616/" title="Hello Kitty My Dream Store店铺排名如何提升" class="aBlack">Hello Kitty My Dream Store店铺排名如何提升</a>
<em>07-19</em>
<div class="clear"></div>
</div>
<div class="ccXgglCont2 hover2" style="display:none;">
<span class="bg4">5</span>
<a href="http://www.haoling.cc/wenzhang/654616/" title="Hello Kitty My Dream Store店铺排名如何提升"></a>
<dl>
<dt><a href="http://www.haoling.cc/wenzhang/654616/" title="Hello Kitty My Dream Store店铺排名如何提升" class="aBlack">Hello Kitty My Dream Store店铺排名如何提升</a></dt>
<dd><b></b>07-19</dd>
</dl>
<div class="clear"></div>
</div>
</li>
<li>
<div class="ccXgglCont1 hover1" >
<span class="bg4">6</span>
<a href="http://www.haoling.cc/wenzhang/659944/" title="Dreamweaver CS4怎么通过链接使用外部样式" class="aBlack">Dreamweaver CS4怎么通过链接使用外部样式</a>
<em>07-22</em>
<div class="clear"></div>
</div>
<div class="ccXgglCont2 hover2" style="display:none;">
<span class="bg4">6</span>
<a href="http://www.haoling.cc/wenzhang/659944/" title="Dreamweaver CS4怎么通过链接使用外部样式"></a>
<dl>
<dt><a href="http://www.haoling.cc/wenzhang/659944/" title="Dreamweaver CS4怎么通过链接使用外部样式" class="aBlack">Dreamweaver CS4怎么通过链接使用外部样式</a></dt>
<dd><b></b>07-22</dd>
</dl>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div class="ccYxphBox">
<div class="ccRmglTitle">
<b></b>
<h2>热门专题</h2>
<a href="http://www.haoling.cc/heji/p_1/"></a>
<div class="clear"></div>
</div>
<ul class="ccRmztList">
<li>
<a href="http://www.haoling.cc/heji/xunixiaozhenyx/" title="虚拟小镇游戏" class="aWhite">
<div class="ccRmztCont1">
<img src="http://www.haoling.cc/uploadfile/2022/1128/20221128030923126.png" alt="虚拟小镇游戏"/>
<span><p>虚拟小镇游戏</p></span>
</div>
<div class="ccRmztCont2">
<span><b class="icon1"></b><p>虚拟小镇游戏</p><b class="icon2"></b></span>
<em>绔嬪嵆鏌ョ湅</em>
</div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/heji/dpgyxzwb/" title="打屁股游戏中文版" class="aWhite">
<div class="ccRmztCont1">
<img src="http://www.haoling.cc/uploadfile/2021/0622/20210622080344898.jpg" alt="打屁股游戏中文版"/>
<span><p>打屁股游戏中文版</p></span>
</div>
<div class="ccRmztCont2">
<span><b class="icon1"></b><p>打屁股游戏中文版</p><b class="icon2"></b></span>
<em>绔嬪嵆鏌ョ湅</em>
</div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/heji/lhhhzyxhjzz/" title="冷狐汉化组游戏合集直装" class="aWhite">
<div class="ccRmztCont1">
<img src="http://www.haoling.cc/uploadfile/2023/0914/20230914051554654.jpg" alt="冷狐汉化组游戏合集直装"/>
<span><p>冷狐汉化组游戏合集直装</p></span>
</div>
<div class="ccRmztCont2">
<span><b class="icon1"></b><p>冷狐汉化组游戏合集直装</p><b class="icon2"></b></span>
<em>绔嬪嵆鏌ョ湅</em>
</div>
</a>
</li>
<li>
<a href="http://www.haoling.cc/heji/hwdyxmn/" title="很污3D模拟养成游戏手游大全" class="aWhite">
<div class="ccRmztCont1">
<img src="http://www.haoling.cc/uploadfile/2021/0224/20210224100712905.jpg" alt="很污3D模拟养成游戏手游大全"/>
<span><p>很污3D模拟养成游戏手游大全</p></span>
</div>
<div class="ccRmztCont2">
<span><b class="icon1"></b><p>很污3D模拟养成游戏手游大全</p><b class="icon2"></b></span>
<em>绔嬪嵆鏌ョ湅</em>
</div>
</a>
</li>
</ul>
</div>
</div>
<!--鍙宠竟 end-->
<div class="clear"></div>
</div>
<!--涓讳綋 end-->
<!--底部-->
<div class="ccFoot">
<div class="ccFootIn">
<p>
<a href="/" title="手机号码测吉凶">手机号码测吉凶</a>
<br>
本站所有软件，都由网友上传，如有侵犯你的版权，请发邮件haolingcc@hotmail.com 联系删除。 版权所有 Copyright@2012-2013 haoling.cc
<!-- <a href="https://beian.miit.gov.cn/" style="color:#FFFFFF ;text-decoration: none" rel="nofollow">湘ICP备2020018889号</a> -->
</p>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/tongji.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script language="JavaScript" src="/api.php?op=count&id=659935&modelid=1"></script>
<!--底部 end-->
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?b10b7ce524b7312f3e04066c263323dc34d74a39f743bb7932ac3b4dd512bbadfd9a9dcb5ced4d7780eb6f3bbd089073c2a6d54440560d63862bbf4ec01bba3a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></body>
</html>