一步一步学用Dramweaver样式表

Author: Date: 2001年 32期

#1?牐犚弧⒍匝奖淼牟僮魍揪犊梢杂幸韵氯?
  ?牐?1.从下拉菜单Window\CSS Styles打开样式面板,如^32040701a^1。
  ?牐?2.从下拉菜单Text\CSS Styles启动样式表对话框,如^32040701b^2。
  ?牐?3.在页面空白处点击鼠标右键启动样式表对话框,如^32040701c^3。
  ?牐牪还苋绾纹舳鲜黾父鲅讲说セ蛎姘澹嵌及嗤募父雒睿盒陆ㄑ奖怼⒈嗉奖怼⒘唇友奖砗偷汲鲅奖怼O旅嫖颐抢聪晗附樯苎降亩ㄒ濉?
  ?牐燙SS──层叠样式表的使用已经变得越来越普及,常见的样式表使用方法有三种:内部样式表文件、外部链接样式表、内部嵌入样式表。关于样式表的优越意义和详细用法以及具体的设置参数不是短短的一篇文章可以说清的。早期创建CSS需要有专门的知识,需要直接编写样式表文件。如今,Dreamweaver使得这项工作可以在一个统一的界面中进行,通过简单的操作即可完成创建、修改、添加等样式表功能。这些设置可以影响到任何事物,从普通的文本布局到复杂的多媒体文件控制。你将会发现通过修改一个单一的外部样式表文件,可以迅速改变整个站点的外观。今天我们不准备详细讨论所有样式表的具体参数和知识,我们只给大家介绍在Dreamweaver中使用样式面板直接创建样式表文件的方法,希望大家能举一反三。
  #1    二、定义样式表选项
  ?牐犉舳陆ㄑ奖砗蠡岽蚩鏭32040701d^4所示的对话框:
  ?牐?1.Define选项
  ?牐?1)New Style Sheet File:此选项将会把你设定的样式最终保存在一个外部单独的样式表文件中,这个样式表文件可以被其他文件共同使用,也就是说你可以使站点内的所有文件使用同一个样式表文件。
  ?牐?2)This Document Only:此选项将会把你设定的样式仅仅放在当前文件的头文件中,这些样式只能在此文件中使用。
  ?牐?2.另一个选项是Type:在这里选择将要创建的样式的类型,包括:
  ?牐?1)Make Custom Style(定制自己的样式类别):选择此类型后,需要在上方的Name中填入一个样式名字,需要注意的是,此类名称必须以“.”开头。这种方式定义的样式我们可以把它赋给绝大多数的HTML对象,这样可以使这些对象有统一的外观。如^32040701e^5我们创建一个myStyle的样式。
  ?牐犚蛭厦嫖颐茄≡竦氖嵌ㄒ逡桓鐾獠垦奖砦募缘慊鱋K后打开保存文件的对话框,如^32040701f^6所示:
  ?牐犙≡衲愕哪柯己臀募4婧蠼胙缴柚枚曰翱颍鏭32040701g^7:
  ?牐犝饫镂颐嵌ㄒ辶艘桓鲎中臀翁澹痔宕笮∥?12pt,行高为20pt,色彩为深绿色,并带有下划线的样式。
  ?牐?2)Redefine HTML Tag(重新定义HTML标识):选择此选项后从上方的Name下拉框里选择需要重新定义的HTML标识。这个选项,将使得文件中具有统一标签的所有内容,使用相同的外观。例如使所有的段落起始位置缩进两个字,可以按照下面的方法重新定义<p>标签,如^32040701h^8。
  ?牐犖淖值拇笮〉榷ㄒ逋厦娴姆椒ǎ温涫仔兴踅梢园碸32040701i^9所示定义:
  ?牐犘枰⒁獾氖牵绻愕淖痔宥ㄒ逦?10pt,则这里的首行缩进可以定义为20pt,即两个中文字。由于所有的相同类型标签使用的样式相同,所以这种方式适合于大量的相同元素的样式定义。例如对网页中所有的段落统一字体、颜色、大小、行距、段首缩进。
  ?牐?3)Use CSS Selector(使用CSS选择器):这个选项的功能是可以设定链接文本的样式,如^32040701j^10:
  ?牐牏僭赟elector下拉列表中内定了四个选项??
  ?牐燼:active ──定义链接被激活时的样式,即鼠标已经点击了链接,但页面还没有跳转时。
  ?牐燼:hover ──定义了鼠标悬浮在链接文字上时的样式。
  ?牐燼:link ──定义了链接文字的样式。
  ?牐燼:visited ──浏览者已经访问过的链接样式。
  ?牐犝飧鲅∠钣辛礁龉δ埽皇嵌跃哂幸欢ü亓楹媳昵┑亩韵笫褂弥付ǖ难健@鏭32040701k^11的设置是:“td p”,这表示文件中所有在表格中使用<P>标签包围的文本将使用这里定义的统一样式,而不在表格中的<P>标签包围的文本将不使用这个样式。
  ?牐牏诶谜飧龉δ芪颐腔箍梢远ㄒ辶街忠陨系牧唇友椒绺瘢咛宀街枞缦拢?
  ?牐犜赟elector下拉框中选择a:link,此为链接文字常规状态下的样式,如^32040701l^12所示。
  ?牐牼咛宀问鏭32040701m^13。注意此样式我们使用的是有下划线(underline),颜色为#0000FF的样式。
  ?牐牻酉吕丛赟elector下拉框中选择a:hover,此为鼠标悬浮在链接文字上方状态时的样式,如^32040701n^14所示。
  ?牐牼咛宀问鏭32040701o^15,我们定义的是无下划线(none),颜色为#00CCFF。
  ?牐犕姆椒ㄎ颐强梢越?立另一个链接样式a.t1:link和a.t1:hover。
  ?牐犜赟elector下拉框中选择a:link,修改为a.t1:link,即在原有的a:link中加入.t1样式类,如^32040701p^16所示。
  ?牐牼咛宀问鏭32040701q^17,注意此样式我们使用的是有无划线(none),颜色为#FF0000的样式。
  ?牐犜僭赟elector下拉框中选择a:hover,修改为a.t1:hover,即在原有的a:hover中同样加入.t1样式类,如^32040701r^18所示。
  ?牐牼咛宀问鏭32040701s^19,注意此样式我们使用的是有下划线(underline),颜色为#FF00FF的样式。
  #1?牐犎? 在文件中使用样式
  ?牐犖颐嵌ㄒ逋暄奖砦募螅涂梢栽贒reamweaver中套用这些样式了。套用样式表的方法主要有三种,我们下面分别介绍。
  ?牐?1.使用样式选项板。
  ?牐犙窖∠畎辶谐隽说鼻拔牡悼捎玫难剑鏭32040701t^20。
  ?牐犘枰赋龅氖牵饫锪谐龅闹皇遣糠忠讯ㄒ宓难剑颐乔懊嬖贑SS Selector中定义的链接样式和重新定义的HTML标签样式,不会出现在这里,这里出现的只是我们自定义的样式类。我们重新定义的HTML标签样式将直接在文档中生效,例如我们前面重新定义的<P>标签样式,将直接在文档中起作用。文档中的内容将按照我们的定义重新排列和显示。而链接样式(A:Link;A:Hover)也将直接作为所有文字链接的默认格式显示,除非我们重新指定了新的链接样式。
  ?牐犑褂醚窖∠畎逯付ㄑ绞保颐潜匦胂妊《?你将要应用此样式的一个内容。例如我们可以用鼠标选定一段文本,然后在样式选项板中单击我们需要的样式,即可将此断文本按我们的设定格式化,如^32040701u^21所示。
  ?牐犚陨衔颐嵌ㄒ辶肆街至唇游淖值难剑竺嫖颐墙樯苋绾我盟恰?
  ?牐?2.使用标志选择器指定样式。
  ?牐犖颐腔箍梢酝ü鼶reamweaver窗口底部的标志选择器快速指定样式(见^32040701v^22)。
  ?牐犖颐鞘紫刃枰诒曛狙≡衿魃涎《ㄒ桓霰昵?,如图中的<td>标签,然后在<td>标签上点击鼠标右键,选择Set Class>>MyStyle,则可以把我们定义的MyStyle样式类快速指定给<td>标签。
  ?牐?3.使用右键快捷菜单。我们也可以从右键快捷菜单中直接给对象指定一个样式,例如我们想为一个链接文字指定另一种定义的链接样式,我们可以先为这段文字添加链接,此时这个文字的链接样式是我们定义的默认样式。接着我们可以选中此链接文字,在右键快捷菜单中指定新的样式类(见^32040701w^23)。
  ?牐犝庋颐蔷驮谖募惺褂昧肆街至唇友健?
  ?牐?4.清除样式。清除样式我们可以使用样式面板,首先选定应用了某种样式的对象,然后在样式选项板中点击None,即可清除原有的样式(见^32040701x^24)。
  ?牐牶昧耍赜谘奖淼拇唇ê褪褂梦揖徒樯艿秸饫锪耍诒疚闹形抑皇墙樯芰巳绾味ㄒ逖健⑷绾问褂醚降募钢滞揪叮咛宓难较晗覆问⒏髦盅降氖视梅段А⒀轿募囊庖搴褪褂霉嬖颍也⑽聪晗附樯埽约貉芯垦芯堪桑嘈拍慊嵊懈嗔煳虻摹?