Flash专栏: 基础教程 | 技巧运用 | MTV实例教程 | 游戏实例教程 | 实例教程 | AS教程(new)
photoshop专栏: 基础 | 进阶 | 技巧总汇 | 精彩实例 | 文字特效 | 滤镜魔术 | 实际应用
网页设计: Dreamweaver教程 | FireWorks教程 | CorelDraw设计 | Freehand/Illustrator教程 | 音乐转换教程
其他教程: 操作系统 | 程序设计 | 网站开发 | 图形图像 | 数据库 | 网络技术 | 安全相关 | 认证考试 | 硬件知识 | 服务器
Dreamweaver专栏>Dreamweaver设计>将层叠样式单放在何处   返回上一页

  日期:2004-07-27 18 作者:秋实 来源:天极网
天气预报 IP地址 手机号码 邮编 翻译 在线代理 在线评书 好dj


将层叠样式单放在何处


 层叠样式单写好后,放在什么地方呢?大体说来有三种方式,一种是外部文件方式;一种是内部文档头方式;另一种是直接插入式。三种方式各有妙用,主要的差别在于它们规定的风格使用的范围不同。我们分别讲述:

  一、外部文件方式

  外部文件方式即将CSS写成一个文件的方式,在HTML文档头通过文件引用来进行风格控制。CSS文件可在DreamWeaver的Window菜单下的styles选项或在FrontPage Editor98中Format菜单下StyleSheet菜单项来创建,相对说来,在DreamWeaver下创建比较简单;当然了,如果你熟悉CSS属性,可直接在记事本里写,最后的文件扩展名为CSS。
  CSS文件的引用是在HTML的<head></head>标志之间写下列语句:
  <Link Rel="STYLESHEET" Href="文件名.CSS" Type="text/css">,如当前文件目录下有一CSS 文件名为myStyle.css,内容如下

P
H2{font-family:‘宋体’
 font-size:13pt;
 color:red
}

  则在引用是,用下列语句
  <Link Rel="STYLESHEET" Href="myStyle.css" Type="text/css">,当然,如果你在DreamWeaver中用styles功能可直接连接(Link)一个CSS文件,这些语句会自动生成的。
  应用CSS文件的一个最大好处就是,你可以在每个HTML文件中引用这个文件,从而可使整个站点的HMTL文件在风格上保持一致,避免重复的CSS属性设置;另外,当你遇上改版或作某些重大调整要对风格进行修改时,可直接修改这个CSS文件,当然了,HTML文件一直引用最近更新的样式单,而不必每个每个HTML文件进行整,你说是不是挺方便的呀!特别提醒一下,如果你想建立自己的网站,这方面不可忽视哟,如果在建站之初没有网站风格的统一规划并形成CSS文件,以后内容一多,想调整一下风格会累死你的。

  二、内部文档头方式

  这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头<Head></Head>之间,而不是形成文件。这种风格定义产生作用的范围也只局限于本文件,其格式如下(套用上边的CSS)

<Style Type="text/css">
 <!--
  P
  H2{font-family:‘宋体’
   font-size:13pt;
   color:red
  }
 -->
</Style>


  如果在DreamWeaver中用Styles来书写,以上一些代码会自动生成的。 这种方式的主要用处是,在一些方面统一风格的前提下,可针对具体页面进行具体调整。这两种方式并不相排斥,而是相互结合,比如在CSS文件中定义了P标志的字体大小font-size为10pt,而在内部文档中可定义P标志字体颜色font-color为Red;而在另一个HTML文件中定义颜色为Green,从这里,你也可能明白为什么风格样式单叫层叠式样单了。

  三、直接插入式

  直接插入式很简单,只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接,如我们想规定一个Table标志中的字为红色,字体大小为10pt,则可书写如下:
  <Table style="color:red;font-size:10pt">
  这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。

  综上所述,这几种方式各有用途,在统一整个站点风格上,用第一种方式;在整个页内风格统一上,用第二种方式;而在页内某个标志的具体微调上,第三种方式也有用武之地,所以各有千秋吧!前两种的目的在于一是统一风格,二是减少繁琐的标志属性设置,真是功不可没哟!


 
高手云集 版权所有 1998-2006