Dreamweaver 入门：使用CSS设置页面格式

goodluck

本文章介绍如何在 Dreamweaver 中使用层叠<a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a> (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本，从而能更加灵活自如地控制页面的外观。<>　　了解 CSS</P><>　　层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容(HTML 代码)位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件(外部<a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a>)或 HTML 文档的另一部分(通常为 部分)中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。</P><>　　CSS 使您可以控制许多仅使用 HTML 无法控制的属性。例如，您可以为所选文本指定不同的字体大小和单位(像素、磅值等)。通过使用 CSS 从而以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。</P><>　　CSS 格式设置规则由两部分组成:选择器和声明。选择器是标识已设置格式元素(如 P、H1、类名称或 ID)的术语，而声明则用于定义样式元素。在下面的示例中，H1 是选择器，介于大括号 ({}) 之间的所有内容都是声明:</P><>　　H1 {</P><>　　font-size:16 pixels;</P><>　　font-family:Helvetica;</P><>　　font-weight:bold;</P><>　　}</P><>　　声明由两部分组成:属性(如 font-family)和值(如 Helvetica)。上述示例为 H1 标签创建了样式:链接到此样式的所有 H1 标签的文本都将是 16 像素大小并使用 Helvetica 字体和粗体。</P><>　　术语"层叠"是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式"层叠"到您的 Web 页面上的元素，并最终创建您想要的设计。</P><>　　CSS 的主要优点是容易更新;只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。</P><>　　在 Dreamweaver 中可以定义以下规则类型:</P><>　　自定义 CSS 规则(也称为"类样式")使您可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点 (.) 开头。例如，您可以创建称为 .red 的类样式，设置规则的 color 属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。</P><>　　HTML 标签规则重定义特定标签(如 p 或 h1)的格式。创建或更改 h1 标签的 CSS 规则时，所有用 h1 标签设置了格式的文本都会立即更新。</P><>　　CSS 选择器规则(高级样式)重定义特定元素组合的格式，或其它 CSS 允许的选择器形式的格式(例如，每当 h2 标题出现在表格单元格内时，就应用选择器 td h2)。高级样式还可以重定义包含特定 id 属性的标签的格式(例如，由 #myStyle 定义的样式可以应用到所有包含属性/值对 id="myStyle" 的标签)。</P><>创建新的<a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a></P><>　　首先，您将创建包含 CSS 规则(定义段落文本样式)的外部样式表。在外部<a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a>中创建样式时，可以在一个中央位置同时控制多个 Web 页面的外观，而不需要为每个 Web 页面分别设置样式。</P><>　　CSS 规则可以位于以下位置:</P><>　　外部 CSS <a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a>是存储在一个单独的外部 .css 文件(并非 HTML 文件)中的一系列 CSS 规则。利用文档 head 部分中的链接，该 .css 文件被链接到 Web 站点中的一个或多个页面。</P><>　　内部(或嵌入式)CSS <a class="channel_keylink" href="http://edu.itbulo.com/web/hc/Css/" target="_blank">样式表</a>是包含在 HTML 文档 head 部分的 style 标签内的一系列 CSS 规则。例如，下面的示例为已设置段落标签的文档中的所有文本定义字体大小:</P><><TABLE style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0><TBODY><TR><TD style="WORD-WRAP: break-word" bgColor=#f3f3f3>&lt;head&gt; <BR>&lt;style&gt;  <BR>   p{ <BR>   font-size:80px <BR>   } <BR>&lt;/style&gt; <BR>&lt;/head&gt; 　</TD></TR></TBODY></TABLE></P><>　　内联样式是在 HTML 文档中的特定标签实例中定义的。例如，&lt;p style="font-size: 9px"&gt; 仅对用含有内联样式的标签设置了格式的段落定义字体大小。 <>　　Dreamweaver 会呈现您所应用的大多数样式属性并在"文档"窗口中显示它们。您也可以在浏览器窗口中预览文档以查看样式的应用情况。有些 CSS 样式属性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中呈现的外观不相同。</P><>　　选择"文件"&gt;"新建"。</P><>　　在"新建文档"对话框中的"类别"列中选择"基本页"，在"基本页"列中选择"CSS"，然后单击"创建"。</P><>　　<IMG height=417 alt="" src="http://edu.itbulo.com/UploadFiles_1485/200608/20060804132056551.jpg" width=483></P><><FONT color=#ff0000></p><p align='center'><b><font color='red'>[1]</font> <a href='http://edu.itbulo.com/200608/103608_2.htm'>[2]</a> <a href='http://edu.itbulo.com/200608/103608_3.htm'>[3]</a> <a href='http://edu.itbulo.com/200608/103608_4.htm'>[4]</a> <a href='http://edu.itbulo.com/200608/103608_5.htm'>[5]</a> <a href='http://edu.itbulo.com/200608/103608_6.htm'>[6]</a> <a href='http://edu.itbulo.com/200608/103608_7.htm'>[7]</a> <a href='http://edu.itbulo.com/200608/103608_8.htm'>[8]</a> <a href='http://edu.itbulo.com/200608/103608_2.htm'>下一页</a></b></p><div class="box_art_07"><div id="left03"></div></div><div id="rrxgxx">关注此文的读者还看过：</div><div id="rrxgxx1"><ul><li>2009-9-24 12:36:39 <a class='LinkAC' href='http://edu.itbulo.com/200909/126286.htm' target="_blank">去除Dreamweaver表格宽度辅助线</a></li><li>2008-6-9 12:15:04 <a class='LinkAC' href='http://edu.itbulo.com/200806/124321.htm' target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></li><li>2008-4-15 18:39:07 <a class='LinkAC' href='http://edu.itbulo.com/200804/123795.htm' target="_blank">Dreamweaver CS3中Spry详细区域功能</a></li><li>2008-4-10 18:42:44 <a class='LinkAC' href='http://edu.itbulo.com/200804/123695.htm' target="_blank">网站设计师职业生涯状况及前景</a></li><li>2008-4-10 18:41:32 <a class='LinkAC' href='http://edu.itbulo.com/200804/123694.htm' target="_blank">如何制作出非常美观的网页</a></li><li>2008-4-8 20:50:12 <a class='LinkAC' href='http://edu.itbulo.com/200804/123660.htm' target="_blank">建立自己的博客的过程中学习到的知识</a></li><li>2008-4-7 21:19:58 <a class='LinkAC' href='http://edu.itbulo.com/200804/123633.htm' target="_blank">网站栏目和页面的策划</a></li><li>2008-3-24 18:47:21 <a class='LinkAC' href='http://edu.itbulo.com/200803/123400.htm' target="_blank">海量素材的准确位置和用途</a></li></ul></div></div><!--最新文章--><div id="left04"></div><!--评论--><div id="rrxgpl"><ul><span class="cDRed">用户评论</span></ul></div><!--评论开始--><script language=javascript>function refreshimg(){  document.all.checkcode.src='http://img.itbulo.com/Inc/CheckCode.asp?'+Math.random();}</script><script language='JavaScript' type='text/JavaScript'>   function Check()   {    if (document.form1.Name.value=='')    {     alert('请输入姓名！');     document.form1.Name.focus();     return false;    }    if (document.form1.Content.value=='')    {     alert('请输入评论内容！');     document.form1.Content.focus();     return false;    }return true;   }   </script><div class="yzsmpl"><b>评论内容：</b>不能超过100字，需审核，请自觉遵守互联网相关政策法规。</div><div class="globalComments"><table cellSpacing="1" cellPadding="3" width="95%"  border="0" align="center"><form action="/Comment.asp" onsubmit="return Check();" method="post" name="form1" id="form1"><tr><td class="title12"><table width="100%" border="0" cellspacing="3"><tr><td>发表评论：</td><td><input name="anonymous" type="checkbox" value="1" checked="checked"/>                        匿名发表</td><td>用户名:<Input name="Name" type="text" id="Name" size="16" value="部落网友" maxLength="16" class="input1" /></td><td><font color="#999999">有 <span id="CommentCount">loading</span> 位网友发表了评论　<a href="/Comment.asp?Articleid=103608&Action=ShowAll" target="_blank">查看评论</a></font></td></tr></table></td></tr><tr><td class="title12"><center><table width="100%" border="0"><tr><td><div class="editorContent"><textarea name="Content" rows="5" cols="45" id="Content" onpropertychange="if(value.length>100) value=value.substr(0,100);sNum.innerText=this.value.length;" onkeyup="" style="background:url(http://img.itbulo.com/images/pllogo.gif) center no-repeat #fff;"></textarea></div></td><Input id="Action" type="hidden" value="Save" name="Action" /><Input id="ArticleID" type="hidden" value="103608" name="ArticleID" /><td>(<FONT color=red><SPAN id=sNum>0</SPAN></FONT>/100)<input type="image" src="http://img.itbulo.com/images/kp_submit.jpg" value="发送" onclick="ShowComment();" /></td></tr></table></center></td></tr></form></table></div><!-- 评论代码结束 --></div></div><div id="fleft"><img src=http://img.itbulo.com/images/zfbg.gif width="25" height="400"></div><!--右侧--><div id="slistr" class="right"><!-- 赞助A --><div id="right01"></div><!-- 最新 --><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 最新文章</span></div><div class="crc list"><ul><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200806/124321.htm" target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></td><td align="left" width="34" class="tj1">06-09</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123795.htm" target="_blank">Dreamweaver CS3中Spry详细区域功能</a></td><td align="left" width="34" class="tj1">04-15</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123695.htm" target="_blank">网站设计师职业生涯状况及前景</a></td><td align="left" width="34" class="tj1">04-10</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123694.htm" target="_blank">如何制作出非常美观的网页</a></td><td align="left" width="34" class="tj1">04-10</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123660.htm" target="_blank">建立自己的博客的过程中学习到的知识</a></td><td align="left" width="34" class="tj1">04-08</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123633.htm" target="_blank">网站栏目和页面的策划</a></td><td align="left" width="34" class="tj1">04-07</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123366.htm" target="_blank">页面设计中的层次感</a></td><td align="left" width="34" class="tj1">03-21</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123296.htm" target="_blank">改进网站设计提供的有意的建议</a></td><td align="left" width="34" class="tj1">03-18</td></tr><tr></tr></table></ul></div></div><!-- 设计相关 --><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://edu.itbulo.com/show/" class="cDRed1">平面设计作品欣赏</a><a href="http://edu.itbulo.com/show/poster/">海报</a><a href="http://edu.itbulo.com/show/bz/">包装</a><a href="http://edu.itbulo.com/show/biaoz/">标志</a><a href="http://edu.itbulo.com/show/chahua/">插画</a><a href="http://edu.itbulo.com/show/ads/">招贴</a></span></div><div class="crc1 list1"><ul><table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'><tr valign='top'><td align='center'><a class="" href="http://edu.itbulo.com/200912/128018.htm" title="rudy hurtado 标志设计（二）" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009121016101973.gif'  width='130' height='98' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/128018.htm" title="rudy hurtado 标志设计（二）" target="_blank">rudy hurtado 标志设计（二）</a></td><td align='center'><a class="" href="http://edu.itbulo.com/200912/127984.htm" title="创导国际标志设计作品欣赏" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009120918040463.gif'  width='130' height='98' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127984.htm" title="创导国际标志设计作品欣赏" target="_blank">创导国际标志设计作品欣赏</a></td></tr></table></ul></div></div><!-- 推荐 --><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 推荐文章</span></div><div class="crc list"><ul><li>此栏目下没有推荐文章</li></ul></div></div><!-- IT职场 --><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/" class="cDRed1">软件学院</a>" 焦点图文</span></div><div class="crc1 list1"><ul><table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'><tr valign='top'><td align='center'><a class="" href="http://edu.itbulo.com/200912/127997.htm" title="hotoshop制作千与千寻的DVD封面" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009121010160758.gif'  width='130' height='90' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127997.htm" title="hotoshop制作千与千寻的DVD封面" target="_blank">hotoshop制作千与千寻的DVD封面</a></td><td align='center'><a class="" href="http://edu.itbulo.com/200912/127873.htm" title="hotoshop制作简洁红色圣诞壁纸" target="_blank"><img class='pic1' src='http://edu.itbulo.com/UploadFiles_1485/200912/2009120521123294.gif'  width='130' height='90' border='0'></a><br><a class="" href="http://edu.itbulo.com/200912/127873.htm" title="hotoshop制作简洁红色圣诞壁纸" target="_blank">hotoshop制作简洁红色圣诞壁纸</a></td></tr></table></ul></div></div><!-- 赞助B --><div id="right02"></div><!-- 热门 --><div class="crclass"><div class="crt"><span class="cDRed1">"<a href="http://edu.itbulo.com/web/Dreamweaver/jc/" class="cDRed1">DreamWeaver基础教程</a>" 热门文章</span></div><div class="crc list"><ul><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123694.htm" target="_blank">如何制作出非常美观的网页</a></td><td align="left" class="tj1" width="34">28125</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94701.htm" target="_blank">初学解惑：常用CSS样式图文设置教程</a></td><td align="left" class="tj1" width="34">17629</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200806/124321.htm" target="_blank">Dreamweaver CS4 Beta版初步试用感受</a></td><td align="left" class="tj1" width="34">16027</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200803/123295.htm" target="_blank">什么是静态网页和动态网页？</a></td><td align="left" class="tj1" width="34">12801</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200608/103608.htm" target="_blank">Dreamweaver 入门：使用CSS设置页面格式</a></td><td align="left" class="tj1" width="34">12447</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200804/123695.htm" target="_blank">网站设计师职业生涯状况及前景</a></td><td align="left" class="tj1" width="34">10149</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94704.htm" target="_blank">用Dreamweaver自己动手制作网页活动菜单条</a></td><td align="left" class="tj1" width="34">9026</td></tr><tr><td width="12" align="right"><img src="http://edu.itbulo.com/images/Article_common5.gif"></td><td class="tj1"><a class="tj2" href="http://edu.itbulo.com/200604/94630.htm" target="_blank">DW网页设计：制作弹出菜单</a></td><td align="left" class="tj1" width="34">8800</td></tr><tr></tr></table></ul></div></div><!-- 壁纸桌面 --><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://desk.itbulo.com/" class="cDRed1">桌面壁纸</a><a href="http://desk.itbulo.com/star/">明星</a><a href="http://desk.itbulo.com/katong/">卡通</a><a href="http://desk.itbulo.com/game/">游戏</a><a href="http://desk.itbulo.com/scenery/">风景</a><a href="http://desk.itbulo.com/auto/">汽车</a><a href="http://desk.itbulo.com/paint/">艺术</a><a href="http://desk.itbulo.com/feast/">节日</a></span></div><div class="crc"><ul class="ulPic picExtr2"><li><i class="iPic"><a href="http://desk.itbulo.com/200508/30368.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/katong/disney/160/25.jpg" alt="迪士尼-25" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200508/30368.html">迪士尼-25</a></i></li><li><i class="iPic"><a href="http://desk.itbulo.com/200802/75440.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/katong/KTMHTN/160/40.jpg" alt="卡通梦幻童年40" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200802/75440.html">卡通梦幻童年40</a></i></li><li><i class="iPic"><a href="http://desk.itbulo.com/200704/73664.html"><img class="pic01" width="90" height="68" src="http://desk1.itbulo.com/design/KrCartoon/160/120.jpg" alt="韩国风格壁纸120" /></a></i><i class="iTitle"><a href="http://desk.itbulo.com/200704/73664.html">韩国风格壁纸120</a></i></li></ul></div></div><!-- 设计图库 --><div class="crclass"><div class="crt"><span class="cDRed1"><a href="http://photo.itbulo.com/" class="cDRed1">素材图库</a><a href="http://photo.itbulo.com/tour/">旅游</a><a href="http://photo.itbulo.com/mrxx/">美容</a><a href="http://photo.itbulo.com/plant/">植物</a><a href="http://photo.itbulo.com/personality/">人物</a><a href="http://photo.itbulo.com/tour/">旅游</a><a href="http://photo.itbulo.com/food/">食物</a><a href="http://photo.itbulo.com/tech/">科技</a></span></div><div class="crc"><ul class="ulPic picExtr2"><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42590.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/frog/120/14.jpg" alt="青蛙-14" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42590.html">青蛙-14</a></i></li><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42555.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/dog/120/19.jpg" alt="小狗写真-19" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42555.html">小狗写真-19</a></i></li><li><i class="iPic"><a href="http://photo.itbulo.com/200511/42592.html"><img class="pic01" width="90" height="68" src="http://photo1.itbulo.com/animal/frog/120/16.jpg" alt="青蛙-16" /></a></i><i class="iTitle"><a href="http://photo.itbulo.com/200511/42592.html">青蛙-16</a></i></li></ul></div></div><!-- 赞助C --><div id="right03"></div></div></div><!-- 底部版权 --><script src='http://img.itbulo.com/js/10/09_footer.js' language='javascript'></script>