注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

love3400wind的blog

like

 
 
 

日志

 
 
 
 

CSS样式表引用方式  

2009-01-08 18:01:09|  分类: IT |  标签: |举报 |字号 订阅

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

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

  P{font-family:'宋体'
  font-size:9pt;
  color:blue}
  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文件,以后内容一多,想调整一下风格会累死你的。

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

  <Style Type="text/css">
  <!--
  P{font-family:'宋体'
  font-size:9pt;
  color:blue}
  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">
  这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。

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

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017