收藏本站
 
设为主页
     您的位置:首页资源库网页制作Dreamweaver
== 资 源 搜 索 ==
 
高级搜索
== 学 习 资 源 ==
操 作 系 统
Windows DOS
Linux Unix
Novell OS/2
办 公 软 件
Word Excel
Access Powerpoint
Outlook Wps
媒 体 处 理
网页制作 动画制作
图片处理 视频处理
媒体播放 音频处理
课件制作 其它……
网 络 工 具
网页浏览 下载工具
FTP 工具 邮件工具
网络安全 服 务 器
联络聊天 其它……
工 具 软 件
压缩工具 系统工具
文件工具 磁盘工具
病毒防治 阅读工具
测试工具 程序设计
== 素 材 资 源 ==
GIF动画 Flash动画
按钮图库 图标图库
线条图库 背景图库
创意图库 音频素材
== 教 程 下 载 ==
 
CSS样式表的设置和应用

作者:

 

1、CSS基础

  CSS是Cascading Style Sheets(层叠样式表单)的简称。它允许作者在HTML文档中加入样式(如字体类型、颜色、大小等等)。对于设计者来说它是一个非常灵活的工具,不必再把繁杂的样式定义编写在文档结构中,可以将所有有关于文档的样式指定内容全部脱离出来,在行内定义、在标题中定义,甚至作为外部样式文件供HTML调用。CSS在当前的网页设计中已经成为不可缺少的技术,例如我们现在最常见的去除连接文字的下划线就是CSS最简单的应用。

  Dreamweaver是最早使CSS的应用方便于使用者的网页工具之一。通过直观的界面设计者可以定义超过70种不同的CSS设置,这些设置可以影响到网页中的任何元素,从文本的间距到类似于多媒体的转换。你可以随时创建自己的样式单,然后在任何时候连接调用它。

  首先让我们了解CSS最基本的特性:分组、继承、层叠

  分组:通常我们需要同时改变几种样式的属性,CSS允许声明通过使用分号分隔其内容的方式来进行分组。例如:body,td,p {color:#000000,text-align:left}

  继承:通过继承,CSS设置可以被应用到多个标识中。绝大部分(但不是全部)的CSS声明可以通过封闭CSS选择器中的HTML标识来被继承。例如通过一个CSS设置来改变整个页面的字体:
body { font-family: "Arial"; font-size: 14px; line-height: 18px; color: #000000}
这种形式的定义之所以可能,是因为<body>标识被认为是页面上所有元素的父标识。

  层叠:Cascading描述了覆盖通用样式的局部样式的能力。在相同的方式中,一个普遍地应用到某一块文本上的CSS规则可以被其他应用到相同文本中某个更为特殊的部分的规则所覆盖。例如你所看到的本文中的所有英文字体均属特别定义。

  样式表的使用有三种方式:连接、导入、嵌入。其中连接和导入可用于多个页面共用一个样式表文件(在这两种方式中,通常Link方式在浏览器中等到更好的支持);嵌入则仅对单一页面起作用。在Dreamweaver3及以前版本中,用户可以选择使用哪种方式设置CSS,但在Dreamweaver4 中,默认的是使用LINK方式,即只要用户设置CSS,那么就自动将其设置保存为一个CSS文件,以便在站点文件中调用。

    下面以嵌入式定义本页的样式。按下Shift+F11打开CSS面板,点击CSS面板上的新建一个样式表,如下图:

    选中重新定义HTML标签仅这个文档两项,标签这里选取<body>,按确定后,出现:

    具体设定如下图,设好后按确定。

    再次点击CSS面板上的,这次选中使用CSS选择器仅使这个文档两项,选择器哪里,选a:link,确定后的参数设定如下:(字本装饰那里选无,表示无下划线)

    然后重复几次上面步骤,按你的喜欢分别定义好下面几个标签:

    a:hover:表示鼠标移上链接时;

    a:active:表示链接激活时;

    a:visited:表示己点击过的链接。

    下面使用Class定义一个表格,在新建样式表的对话框里选中制作自定义样式表仅这个文档两项,名称那里把.unnamed1改为:.bu(注意:前面是有个小圆点的)设定参数如下:

    插入一个一行一列的表格,边框为0,宽为100像素,右键点击刚插入的表格,在弹出的菜单里选CSS样式,然后再选bu,看看下面的效果吧。

 

    好,CSS样式就说这么多了,其实使用链接的方式也是一样道理的,只不过,生成了一个CSS后缀的文件,以后多个网页可以共同使用,慢慢体会下吧。

[上一页] [下一页]

 

Copyright © 2001-2002 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View