追学网

Dreamweaver应用CSS样式表

UPDATE:2014/11/18 | 分类:网页设计
  CSS是网页设计制作中不可缺少的部分。使用CSS可以精确地对页面的布局、文本样式、颜色、边框、背景等进行控制,还可以为网页添加许多特殊效果。而且应用了CSS样式的文件非常容易更新,只需改变CSS样式,所有应用CSS的文件就都自动更新。

  1.新建CSS样式表

  (1)新建一个HTML文档,在菜单栏的“窗口”下确认“CSS样式”被选中,在“插入”工具栏的下方出现CSS样式面板。

  (2)在CSS样式面板上点击“新建CSS规则”按钮。

  (3)弹出“新建CSS规则”窗口。

  (4)在“选择器类型”处点击,列出了Dreamweaver CS4的四种CSS规则。在这里我们选择“类(可应用于任何HTML元素)”。

  四种CSS规则:

  ◆类(可应用于任何HTML元素):也被称为自定义规则,可以将该样式属性设置为任何文本范围和文本区域。在一个页面中的部分文本需要应用其他样式的时候,可以使用“类”。

  ◆ID(仅应用于一个HTML元素):个别定义每个元素的样式,具有一定的局限。

  ◆标签(重新定义HTML元素):重新定义特定标签的样式,使所有应用该标签的部分都按照新定义的样式被更新。

  ◆复合内容(基于选择的内容):可以同时创建两个类、标签或ID的复合规则。

  (5)在“选择器名称”处输入新建样式表的名称,该名称必须以英文字母开头或句点开头,不能包含特殊字符。

   (6)在“规则定义”中选择定义规则的位置。CSS样式按使用方法可以分为外部样式和内部样式。“仅限该文档”选择的是内部样式,它表示新建的样式表只 能应用于这个文档内。“新建样式表文件”不仅可以应用于本文档,还可以应用到其他文档中。在这里选择“新建样式表文件”。

  (7)设置好新建CSS的规则后点击“确定”,弹出“保存”窗口。在文件名中,为了方便记忆,建议输入与样式表一样的名称,然后点击“保存”。

  (8)此时弹出了“.style1的CSS规则定义”窗口,在窗口中有“类型”、“背景”、“区块”等八个选项,根据需要在“类型”中对文本选择进行设置。

  (9)点击“确定”按钮后,就完成了一个CSS样式表的创建。在CSS样式表面板中也出现了新建的样式表。

  2.在文档设置中应用CSS样式表

  当建立好CSS样式表后,有多种方法将CSS样式表应用到文档中。

  方法一:在文档中选择要应用样式表的内容,然后在CSS样式面板中选择要应用的样式名称,点击CSS样式面板右上角的,在弹出的菜单中选择“套用”,这样就可以将CSS样式应用到文档内容中。

  方法二:在文档中选择要应用样式表的内容,在属性栏的“类”中点击,在下拉列表中选择要应用的CSS样式名称,就将CSS样式应用到文档内容中。

  方法三:在文档中选择要应用样式表的内容,在菜单栏点击“格式”→“CSS样式”,选择要应用的CSS样式名称,这样也可以将CSS样式应用到文档内容中。

  3.使用附加样式表

  在制作网站时,可能很多网页的风格都相似,如果使用内部样式表,只能应用于一个文档。为了减少重复工作,我们经常会使用外部样式表,将它应用于不同的文档。下面就来看看如何应用外部样式表。

  (1)在文档中选择要应用外部样式表的内容,在CSS样式面板中点击附加样式表按钮。

  (2)在弹出的对话框中,通过点击“浏览”按钮选择外部样式表,可以选择“链接”和“导入”两种添加形式。“链接”是创建当前文档与外部样式表之间的链接;“导入”就是引用外部样式表,它也会应用已发布的样式表所在URL。

  (3)点击“确定”后,外部样式表就出现在CSS样式面板中,就可以像应用内部样式表一样将它应用于文档了。

  此外,在Dreamweaver CS4里也提供了很多样式表供用户选择。点击“范例样式表”的文字链接,在弹出的“范例样式表”窗口选择一种样式,点击“确定”,该范例样式表就出现在CSS样式面板中。
学习网

世界看中国 娱乐情感文化观点视频