《DreamWeaver网页设计课程 CSS样式表单运用》由会员分享，可在线阅读，更多相关《DreamWeaver网页设计课程 CSS样式表单运用（17页珍藏版）》请在金锄头文库上搜索。
1、DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师1/16关于关于 CSSCSS 样式表单样式表单 HTML 虽为网页撰写的主要标记语言，但早期的 HTML 功能薄弱， 无法满足大 众对文字控制及版面编辑的需求。 W3C (world wide web consortium) 遂公布共 享样式表单 (cascading style sheets, CSS)， 以扩充 HTML 的功能。 CSS 样式表单的优点如下： 可以设定所有对象 (object) 的变化，包括文字、图片、按钮、窗口等 。 可以建立样式指令，在不同的对象套用相同的样式设定。 可以制作个人化的的样式档案，以统一更
2、新网站内的各网页变化。 CSS 样式表单的使用方式有三种： 网页内嵌式 (embedded)： 在 HTML 文件的 之间，以 来定义共同样式，使整 个网页使用同一样式。 标记加注式 (in-line)：如果只有一个 HTML 标记需要设定样式， 则可在该标记 内，加上属性 style=“ “ ，以个别修订样式。 外部设定式 (external)：由于一个网站有许多网页，最好是统一样式， 以免眼花 缭乱，失去浏览的重点。但如果每一网页均个别做样式设定， 万一将来要修改 时，又怕会挂一漏万， 因此可使每个网页均连结到一个 .css 的纯文本档，以设 定整个网站的样式。 如果同一 HTML 文件内
3、有两个样式定义，以最后的定义为准。 在浏览器方面，IE 5.0 版与 NetScape Communicator 均支持 CSS， 但部份浏览器 不支持 CSS 样式指令。 为免这些浏览器在无法辨识时，将 CSS 语法当成本文， 则在 之间可用 将 CSS 语法隐藏起来。 在网页编辑软件方面，IE 的 FrontPage 2000 可撰写 CSS，但 NetScape Composer 无法使用 CSS。 CSSCSS 样式表单的基本语法样式表单的基本语法 CSS 样式表单的基本语法是标记加注式 (in-line) 的表示法，亦即在 HTML 标记后面，加上 style=“.“， 内含属性名称
4、 (properties) 与属性值 (value)，以定义样式。 两个属性间，以分号区隔；而属性与属性值间，以 冒号分开。 例如：原来标题文字之 HTML 标记为 标题文字 若想要标题文字变成绿色且改变字型为标楷体， 使用 CSS 的标记加注式语 法如下：其中 font-famlily、color、size 分别是 CSS 的一项属性，而标楷体、 #FF0000、48 等，则是对应之属性值。DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师2/16样式指令样式指令 ClassClass 的用法的用法 使用 class 样式指令可以使同时套用一个样式指令在不同地方，而不需 要一再
5、定义。 Class 的语法包含定义样式指令及执行样式指令两部份： 定义样式指令是在 之间设定一个样式指令，其语 法是以句号开头， 后接样式名称，再加上一个大括号 ，内含属 性名称与属性值， 即可定义样式指令。两个属性间，以分号区隔； 而属性与属性值间，以冒号分开。 执行样式指令时，则在 HTML 标记内，加上 class=样式名称 即可 执行样式指令。 例如：原来标题文字之 HTML 标记为 标题文字 若想要标题文字变成绿色且改变字型为标楷体， 使用 class 的语法如下：.heading font-family:“标楷体“;color:#0000FF标题文字 其中 heading 为样式名
6、称，font-famlily 与 color 分别是 CSS 的一项属性，而 标楷体与 #00FFFF 则是对应之属性值。DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师3/16 一个 只能用一个样式设定； 如果同时有二个或二个以上 的样式要设定，则需分别使用不同的 样式指令样式指令 IDID 的用法的用法 和 class 指令一样，使用 id 样式指令可以使同一个网页重复使用同一个 样式指令，而不需要一再定义。 与 class 样式指令不同的是一个 HTML 文 件只能有一个 id 样式指令， 且 id 样式指令是以 # 表示。 id 的语法的定义及执行方式与 class 指
7、令相似，包含定义及执行两部份： 定义 id 指令是在 之间设定一个 id 样式指令，其语法 是以 # 开头，后接样式名称，再加上一个大括号 ，内含属性名称与属 性值， 即可定义样式指令。两个属性间，以分号区隔； 而属性与属性值 间，以冒号分开。 执行 id 指令时，则在 HTML 标记内，加上 id=样式名称 即可执行。 例如：原来标题文字之 HTML 标记为DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师4/16标题文字 若想要标题文字变成绿色且改变字型为标楷体， 使用 id 指令的语法如下：#text font-family:“标楷体“;color:#00FFFF;size
8、:48标题文字 其中 text 为 id 样式名称，font-famlily、color、size 分别是 CSS 的属性， 而标楷 体、#00FFFF、48 等，则是对应之属性值。 连结样式表单连结样式表单 如果一个网站的许多网页均使用相同的样式，则可指定一个样式表单档 案， 而不需要一再定义，且万一要修改时，可一次解决，不会挂一漏万。 连结样式表单的方法分为制定样式表单档案及定样式表单档案两步骤： 制定样式表单档案，只须将 之间的样式内容储存到一个档案， 并将其扩展名订为 .css 即可。 执行连结样式表单时，则在 HTML 文件 之间，加入 ， 即可执行样式指令。文本属性的设定文本属性的
9、设定 所谓预设用法，是指如不使用此指令，会出现的样式， 所谓 normal (标 准) 用法，是指如果在一开始时设定为特效，则使用此指令，可还原成默认 的样式。 在 CSS 内可使用的长度单位有 pt (point)、px (pixel)、pc (pica, 1/6 in)、cm (centimeter)、 mm (milimeter)、% (percentage)。 颜色表示法有颜色代码=#RRGGBB、颜色英文名称、颜色比重 RGB(%,%,%)、 颜色数码 RGB(#,#,#)。 如果采用字型为用户所无，则会被改成该计算机之默认字型。为防止此现 象，可采用多次宣告如下： .textfon
10、t-family:Verdana, Arial, Helvetica, sans-serif 亦即先采用 Verdana，如无则采用 Arial；再无，则采用 Helvetica；再无，则 为 sans-self。 DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师5/16使用 Dreamweave 来设计网页的最大好处就是我们不需要懂得 CSS 样式表单的 内容与撰写方式就可轻易获得 CSS 样式表单所带来的网页丰富性、美观性，在 本范例中笔者将以实作方式告诉各位如何在 Dreamweaver 网页编辑器中使用 CSS 样式设定。 本范例中将介绍与 CSS 相关的超链结文字样式
11、功能设定，如果您并不具备 相关的 CSS 样式表单知识，笔者在文章内容中也会作一些相关的原理说明，当 然，Dreamweave 中可使用的 CSS 功能不只这一项，后续笔者将再陆续的为各位 介绍其他的 CSS 功能，例如图层(Layer)控制等，甚至是含有 Java Script 效果的 DHTML。何谓 CSS 样式表单？CSS 的全名是Casciding Style Sheet，以字面上来解释就 是连(串)接样式表单！简单的说，就是网页的格式设定啦！ 与超链结相关的 CSS 样式 当当我们将鼠标指针移制网页中的超链结上时，这个超链结若会产生变化， 例如：字体的颜色改变或字体变粗体等，这就是
12、使用了CSS 虚拟类别！ 所谓的虚拟类别就是让我们可以很轻易的控制被包括在与链结卷标中的文字链 结字符串的变化的 CSS 标准性质。包括了：尚未浏览过的链结字符串颜色、正 要开始浏览的链结字符串颜色、已经浏览过的链结字符串颜色及鼠标指针移至 链结字符串时所显现的文字外观颜色等四种：a:active：正要开始浏览的链结字符串颜色 a:link：尚未浏览过的链结字符串外观颜色 a:visited：已经浏览过的链结字符串颜色 a:hover：鼠标指针移至链结字符串时所显现的外观 特别要注意的是：前三种属性设定不管是 NetScapt4、IE3、IE4 都有支援解析； 但是第四种属性也就是：设定鼠标指
13、针移至链结字符串时所显现的文字外观颜 色属性，这个虚拟类别属性目前只有 IE4 以上版本有支持解析！ 建立文字超链结 我们要设定文字超链结的外观样式设定，当然得先建立一个基本文文字超链结 喽！首先在编辑器主窗口中键入单纯文本，如下图所示。 接着将这段要作为超链结文字的字符串反白标示起来。 然后在内容面板(英文版为 Properties 面板)中的连结字段(Link)中填入我们 要进行超链接的网页 URL 数据 DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师6/16这样就大功告成，建立了一个超链结的文字字符串啦，你可以看见字符 串已经变成蓝色而且加上了底线： 提示： 作为超链结
14、文字的字符串反白标示起来后，直接在反白区域中单击鼠标 右键，于蹦出来的快选菜单中选取Make Link项目. 选取项目后将会出现选取档案(Select File)对话窗口，直接在对话窗 口中的 URL 字段填入超链接的网页 URL 资料也可以建立超链接. 使用 CSS 样式表单在主菜单项窗口(Window)中选取CSS 样式(CSS Styles)功能项目：DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师7/16在CSS 样式(CSS Styles)对话窗口中，点选向右的黑色三角箭头进行 新增 CSS 样式的工作： 选择新增项目后将会出现新增样式(New Styles)对话窗口
15、，请点选类 型字段中的使用 CSS 判断规则(Use CSS Selector)项目： 自定义链结样式在新增样式(New Styles)对话窗口，点选类型字段中的使用 CSS 判 断规则(Use CSS Selector)项目后，接着点选判断规则(Selector)字段 右方的三角形下拉选单按钮，则将会出现下图中的四个选项： 先选定 a:link(尚未浏览过的链结字符串外观)项目，然后按下确定按 钮进行外观属性设定： DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师8/16回到网页编辑主画面中你会发现网页中的超链结字符串一点改变都没有(在本例， 如上图所示，我们是将尚未浏览过的
16、链结字符串外观设为红色 18 点字)，别紧 张！在编辑画面中是看不出变化的，当我们以浏览器预览时就会出现正确结果 啦！依照上述的步骤请自行练习设定 1. a:active：正要开始浏览的链结字符串外观 2. a:visited：已经浏览过的链结字符串外观 3. a:hover：鼠标指针移至链结字符串时所显现的外观 当我们完成了 CSS 样式表单中的卷标属性设定后，万一我们对于设定的结果不 是很满意那怎么办？那当然就是要进行属性设定修改喽！你可不要又重复我们 前面所说的步骤想要进行修改喔！如果你这样做将会出现下列的错误提示对话 窗口：DW 网页设计课程网页设计课程 CSS 样式表单运用陈炫助 讲师9/16要进行样式表单的修改我们应该点选CSS 样式
