Dreamweaver中如何用代码链接外部CSS样式表

时间：2026-07-21 | 作者：318050 | 阅读：0

Dreamweaver 怎么用代码链接外部样式表

在 Dreamweaver 里做网页，外部样式表是管理网站风格最干净的方式。

不用每次在每个页面里重复写样式。改一个文件，全站跟着变。

下面说一下怎么用代码手动链接外部 CSS，其实就几步。

第一步：新建 CSS 文件

先把站点打开，HTML 页面准备好。然后点击“文件”菜单，选择“新建”。

在新建对话框里，选择“CSS”类型。

接着会弹出一个保存对话框，让你选择 CSS 文件要放哪个文件夹。

建议专门建一个叫“css”的文件夹，把所有样式文件统一管理。

我选定了 css 文件夹，并把文件名改成“main.css”。

这样以后看到就知道是主要的样式表，好辨认。

第二步：在 HTML 中链接 CSS 文件

CSS 文件新建好之后，先别急着写样式，先切回你的 HTML 页面。

在 HTML 的标签里，</code> 标签的下面，输入这一行代码：</p> <p><strong><code><link href="css/main.css" type="text/css" rel="stylesheet" /></code></strong></p> <p><a href="https://img.wishdown.com/upload/news/202607213786824f918d611291242361022d7488.webp" target="_blank"><img title="Dreamweaver中如何用代码链接外部CSS样式表_wishdown.com" alt="Dreamweaver中如何用代码链接外部CSS样式表_wishdown.com" src="https://img.wishdown.com/upload/news/202607213786824f918d611291242361022d7488.webp" /></a><a href="https://img.wishdown.com/upload/news/20260721b65c91ac5fb12f5080c5e0de4a3b953b.webp" target="_blank"><img title="Dreamweaver中如何用代码链接外部CSS样式表_wishdown.com" alt="Dreamweaver中如何用代码链接外部CSS样式表_wishdown.com" src="https://img.wishdown.com/upload/news/20260721b65c91ac5fb12f5080c5e0de4a3b953b.webp" /></a></p> <p>然后保存一下 HTML 文件。注意看，在 Dreamweaver 的标签栏里，页面名称旁边多了一个“css样式”的页面标签，这就表示链接成功了。</p> <p><strong>刚刚新建的空白 CSS 文件可以直接删掉</strong>（其实不用删，留着编辑样式就行）。</p> <p><a href="https://img.wishdown.com/upload/news/202607218682e60c0399e063a4ab582df02ab017.webp" target="_blank"><img title="Dreamweaver中如何用代码链接外部CSS样式表_wishdown.com" alt="Dreamweaver中如何用代码链接外部CSS样式表_wishdown.com" src="https://img.wishdown.com/upload/news/202607218682e60c0399e063a4ab582df02ab017.webp" /></a></p> <h3>第三步：编写样式并自动应用</h3> <p>接着，双击那个链接进来的“main.css”标签，打开它。</p> <p>在里面编写你想要的样式规则就行了。写完之后，HTML 页面会自动应用这些样式。</p> <p><a href="https://img.wishdown.com/upload/news/202607215668514e91120d847e6e0778f4ea337a.webp" target="_blank"><img title="Dreamweaver中如何用代码链接外部CSS样式表_wishdown.com" alt="Dreamweaver中如何用代码链接外部CSS样式表_wishdown.com" src="https://img.wishdown.com/upload/news/202607215668514e91120d847e6e0778f4ea337a.webp" /></a></p><div class="app-button-container"> <a href="https://pan.quark.cn/s/c82ffec00f32" class="app-button"> <div class="button-text"> <div class="title"> <p>《夸克》非常好用的免费AI浏览器</p> </div> <div class="subtitle"> 下载APP查看 <img src="/style/jiantou.webp" alt=""> </div> </div> </a> </div> </div> <div class="zxwz_tjList dd"> <p> <span style="color:#FF6701;font-size:12px;">来源:整理自互联网 <br> 免责声明：文中图文均来自网络，如有侵权请联系删除，心愿游戏发布此文仅为传递信息，不代表心愿游戏认同其观点或证实其描述。</span> </p></div> <div class="con_page"> </div> <div class="wzxq_recmd"> </div> </div>     <div class="con_box2"> <div class="con_tit1"> <h2><em class="tit_before"></em>相关文章<em class="tit_after"></em></h2> <a href="/article/561101" class="tit_more">更多</a> </div> <ul class="zxwz_tjList"> <li> <a href="/article/965496.html" title="Dreamweaver CS4如何通过链接使用外部样式表"><img src="https://img.wishdown.com/upload/news/202607224e7828821b6673d2e1b460bfb4bfa544.webp" alt="Dreamweaver CS4如何通过链接使用外部样式表"/></a> <dl> <dt><a href="/article/965496.html">Dreamweaver CS4如何通过链接使用外部样式表</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/962869.html" title="Hello Kitty My Dream Store节日主题布置攻略"><img src="https://img.wishdown.com/upload/news/2026072124c43622e662309810af2e443f8bbc23.webp" alt="Hello Kitty My Dream Store节日主题布置攻略"/></a> <dl> <dt><a href="/article/962869.html">Hello Kitty My Dream Store节日主题布置攻略</a></dt> <dd>时间：2026-07-21</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/959427.html" title="Hello Kitty My Dream Store店铺排名提升技巧"><img src="https://img.wishdown.com/upload/news/20260720cc4222963cd3418d601277b42feef4f2.webp" alt="Hello Kitty My Dream Store店铺排名提升技巧"/></a> <dl> <dt><a href="/article/959427.html">Hello Kitty My Dream Store店铺排名提升技巧</a></dt> <dd>时间：2026-07-20</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/949251.html" title="Dreamweaver CS3模板中定义重复区域的操作步骤与方法详解"><img src="https://img.wishdown.com/upload/news/202607179f8c8ccb9c37fbb2e7097477920e7c50.webp" alt="Dreamweaver CS3模板中定义重复区域的操作步骤与方法详解"/></a> <dl> <dt><a href="/article/949251.html">Dreamweaver CS3模板中定义重复区域的操作步骤与方法详解</a></dt> <dd>时间：2026-07-17</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/949237.html" title="Dreamweaver页面合成类标签插入教程"><img src="https://img.wishdown.com/upload/news/202607170b1c885d87a00eddc87c8711f92ac6e3.webp" alt="Dreamweaver页面合成类标签插入教程"/></a> <dl> <dt><a href="/article/949237.html">Dreamweaver页面合成类标签插入教程</a></dt> <dd>时间：2026-07-17</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/924544.html" title="BanGDream交织的乐章派对玩法全解析"><img src="https://img.wishdown.com/upload/news/20260706ed0a05cede2ace874a0442231daf90ff.webp" alt="BanGDream交织的乐章派对玩法全解析"/></a> <dl> <dt><a href="/article/924544.html">BanGDream交织的乐章派对玩法全解析</a></dt> <dd>时间：2026-07-06</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/915588.html" title="BanGDream OurNotes游戏值得玩吗"><img src="https://img.wishdown.com/upload/news/20260702fb21dc8adcf36b1a3cf1a2d18d1a467f.webp" alt="BanGDream OurNotes游戏值得玩吗"/></a> <dl> <dt><a href="/article/915588.html">BanGDream OurNotes游戏值得玩吗</a></dt> <dd>时间：2026-07-02</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/912757.html" title="Dreamweaver插入多媒体插件完整方法与步骤教程详解"><img src="https://img.wishdown.com/upload/news/2026070167e9a38378504710a9b55a4aedb16e30.webp" alt="Dreamweaver插入多媒体插件完整方法与步骤教程详解"/></a> <dl> <dt><a href="/article/912757.html">Dreamweaver插入多媒体插件完整方法与步骤教程详解</a></dt> <dd>时间：2026-07-01</dd> </dl><div class="clear"></div> </li> </ul> </div>   <div class="con_box1"> <div class="con_tit1"> <h2><em class="tit_before"></em>精选合集<em class="tit_after"></em></h2> <a href="/tag/" class="tit_more">更多</a> </div> <div class="tshj_box"> <div class="clear"></div> </div> </div>   <div class="con_box1"> <div class="con_tit1"> <h2><em class="tit_before"></em>大家都在玩<em class="tit_after"></em></h2> </div> <div class="swiper-container gamefl_list3"> <ul class="swiper-wrapper"> </ul> </div> </div>   <div class="con_box1"> <div class="con_tit1"> <h2><em class="tit_before"></em>热门话题<em class="tit_after"></em></h2> </div> <ul class="wzxq_rmht_list"> <li> <a href="/article/965497.html" class="one"> <img class="img_show2" src="https://img.wishdown.com/upload/news/20260722f2887d89fd23c473331029ab912899d8.webp" alt="realme手机状态栏电量百分比隐藏设置教程"> <div class="tj_tit2"> <span>realme手机状态栏电量百分比隐藏设置教程</span> </div> </a> <a href="/article/965496.html" > <img class="img_show2" src="https://img.wishdown.com/upload/news/202607224e7828821b6673d2e1b460bfb4bfa544.webp" alt="Dreamweaver CS4如何通过链接使用外部样式表"> <div class="tj_tit2"> <span>Dreamweaver CS4如何通过链接使用外部样式表</span> </div> </a> <div class="clear"></div> </li> <li> <a href="/article/965495.html" class="one"> <img class="img_show2" src="https://img.wishdown.com/upload/news/202607228ce986c0e891cdad6418a1963cd511c1.webp" alt="TapTap官方最新版安卓安装包下载教程"> <div class="tj_tit2"> <span>TapTap官方最新版安卓安装包下载教程</span> </div> </a> <a href="/article/965494.html" > <img class="img_show2" src="https://img.wishdown.com" alt="蚂蚁AI眼镜参考设计首次公开亮相光机采用蜻蜓C1"> <div class="tj_tit2"> <span>蚂蚁AI眼镜参考设计首次公开亮相光机采用蜻蜓C1</span> </div> </a> <div class="clear"></div> </li> </ul> </div>   <div class="con_box3"> <div class="con_tit1"> <h2><em class="tit_before"></em>大家都在看<em class="tit_after"></em></h2> <a href="/article/newlist_5_1.html" class="tit_more">更多</a> </div> <ul class="zxwz_tjList"> <li> <a href="/article/965502.html"><img src="https://img.wishdown.com/upload/news/202607222e493063a2f5d72424fe617920b63d24.webp" onerror="this.src='/images/wezmoren/72_72.png'" alt="防线守卫战强度排行榜分享"></a> <dl> <dt><a href="/article/965502.html">防线守卫战强度排行榜分享</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/965501.html"><img src="https://img.wishdown.com/upload/news/202607222f34d5cfc7be76f34ef161e171a91b34.webp" onerror="this.src='/images/wezmoren/72_72.png'" alt="vivo互传相册隔空投送照片操作步骤"></a> <dl> <dt><a href="/article/965501.html">vivo互传相册隔空投送照片操作步骤</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/965500.html"><img src="https://img.wishdown.com/upload/news/2026072277d7edf9051fee486acc1ee7ae8f645e.webp" onerror="this.src='/images/wezmoren/72_72.png'" alt="魅族手机桌面图标包设置方法"></a> <dl> <dt><a href="/article/965500.html">魅族手机桌面图标包设置方法</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/965499.html"><img src="https://img.wishdown.com/upload/news/202607220418588e92b43db7575a2c3291465055.webp" onerror="this.src='/images/wezmoren/72_72.png'" alt="vivo手机开发者选项模式开启隐藏功能教程"></a> <dl> <dt><a href="/article/965499.html">vivo手机开发者选项模式开启隐藏功能教程</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/965497.html"><img src="https://img.wishdown.com/upload/news/20260722f2887d89fd23c473331029ab912899d8.webp" onerror="this.src='/images/wezmoren/72_72.png'" alt="realme手机状态栏电量百分比隐藏设置教程"></a> <dl> <dt><a href="/article/965497.html">realme手机状态栏电量百分比隐藏设置教程</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/965496.html"><img src="https://img.wishdown.com/upload/news/202607224e7828821b6673d2e1b460bfb4bfa544.webp" onerror="this.src='/images/wezmoren/72_72.png'" alt="Dreamweaver CS4如何通过链接使用外部样式表"></a> <dl> <dt><a href="/article/965496.html">Dreamweaver CS4如何通过链接使用外部样式表</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/965495.html"><img src="https://img.wishdown.com/upload/news/202607228ce986c0e891cdad6418a1963cd511c1.webp" onerror="this.src='/images/wezmoren/72_72.png'" alt="TapTap官方最新版安卓安装包下载教程"></a> <dl> <dt><a href="/article/965495.html">TapTap官方最新版安卓安装包下载教程</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> <li> <a href="/article/965494.html"><img src="" onerror="this.src='/images/wezmoren/72_72.png'" alt="蚂蚁AI眼镜参考设计首次公开亮相光机采用蜻蜓C1"></a> <dl> <dt><a href="/article/965494.html">蚂蚁AI眼镜参考设计首次公开亮相光机采用蜻蜓C1</a></dt> <dd>时间：2026-07-22</dd> </dl><div class="clear"></div> </li> </ul> </div>  </div>   <script> var swiper = new Swiper('.wzxq_tj_swiper', { slidesPerView: 'auto', }); </script> <div class="footer"><a href="https://m.wishdown.com/" class="cBlack">手机版</a> | <a href="/guanyuwomen.html" class="cBlack">关于我们</a> | <a href="https://www.wishdown.com" class="cBlack">电脑版</a> | <a href="#" class="cBlack">返回顶部</a><br>本站所有游戏都由网友上传，如有侵犯您的版权<br>请发邮件<a class="cBlack">wishdown2023@163.com</a></div> <script> var domain = '.wishdown.com';//当前域名前面一个点注意</script> <script> $(document).ready(function () { //头部导航滑动 var swiper = new Swiper('.head_nav', { slidesPerView: 'auto', }); // 头部轮播图 var swiper = new Swiper('.index_swiper', { autoplay: { delay: 3000, disableOnInteraction: false, }, pagination: { el: '.pagination1', }, }); //专题列表滑动 var swiper = new Swiper('.zt_con_menu', { slidesPerView: 'auto', }); // 游戏截图 var swiper = new Swiper('.yxpic_list', { slidesPerView: 'auto', }); //同类专题滑动 var swiper = new Swiper('.ztxq_tl_list', { slidesPerView: 'auto', }); // 热门专区推荐 var swiper = new Swiper('.swiper-container.rmzq_tjList', { pagination: { el: '.pagination2', }, }); getHeight(".center_box_in",87,150); }) // 相关游戏 var swiper = new Swiper('.gamefl_list3', { slidesPerView: 'auto', }); $(".look_more1").click(function(){ $(this).parent().find(".yxzq_xgbb_list").toggleClass("h_auto"); if($(this).find("em").hasClass("down")){ $(this).html('收起更多<em class="up"></em>'); }else{ $(this).html('查看更多<em class="down"></em>'); } }) </script> <script>var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?99f477aebd455053b75a329e4d7f1119"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script> <script>(function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();</script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?3a4382a382b0d29a6e62249a4a29c63e1630e597de8621d83f4027e0959f7e46fd9a9dcb5ced4d7780eb6f3bbd089073c2a6d54440560d63862bbf4ec01bba3a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> </body> </html>