CSS课件.ppt

1、网络技术与因特网,HTML样式,作用：快速的对网页中的文字应用字体 格式，并保证格式的统一。 创建一个HTML样式：方法一：在HTML样式面板中进行创建。方法二：根据网页中已选文本的格式来创建网页样式。 Paragraph Styles:作用在段落标记之前， 实现对整个段落的格式应用。 Selection Style:对选定的文本应用样式。,HTML样式的使用,如果是Paragraph Styles，只需要将光标移动到目标段落，点击一下HTML Styles面板中的样式即可。 如果是Selection Style ，则需要选中要使用样式的文本，再点击一下HTML Styles面板中的样式即可。

2、,查看、修改已有的HTML样式,查看一个HTML样式的属性：选中需要查看的样式，点击鼠标右键，在弹出的菜单中选择Edit。 修改已有的HTML样式： 在上一步弹出的对话框中编辑HTML样式。 注意：对HTML样式重新编辑后，DreamweaverMX并不会自动更新已经作用在网页中的HTML样式。如果需要对应用以前样式的文本更新，需要重新应用一下样式。,HTML样式的删除,方法：选中需要删除的样式，点击鼠标右键，在弹出的菜单中选择Delete。 注意：把HTML样式删除后，已经作用在网页中的HTML样式仍起作用。,清除网页中的文本格式,Clear Selection Style Clear Pa

3、ragraph Styel,CSS层叠样式表,CSS：Cascading Style Sheets（层叠样式表）。 作用：扩展原先的标记功能，能够实现更多的效果。例如：双划线、边框等。 将对象真正引入了HTML，使得可以使用脚本程序（JavaScript，VBScript）调用对象属性，并且可以改变对象属性，达到动态的目的。,创建一个CSS层叠样式表,Make Custom Style:自定义CSS样式 Redefine HTML Tag：HTML标签样式 a:link：设置有链接的文字的样式； a:visited：浏览者已经访问过的链接的样式； a:hover：鼠标停留在链接的文字上时的样式

4、； a:active：链接被击活的样式； Use CSS Selector：CSS选择器样式,保存位置,New Style Sheet File：新建一个CSS文件 如果你的CSS样式表有多个文件需要使用，则选择该选项。 This Document Only：仅该文档可用 如果你的CSS样式表只有目前编辑的文件需要使用，则选择该选项。,CSS的应用、编辑和导出,自定义CSS的应用 外部CSS样式表的应用: Link:IE和Navigator都支持 Import：仅IE支持 CSS样式的编辑 CSS样式的导出,注意,注意：对CSS样式重新编辑后，已经作用在网页中的CSS样式会自动更新。如果是修改

5、了外部的CSS样式表文件，则所有的使用了该样式表文件的那些网页都会自动更新。,CSS的复合定义（1）,基本的三种类型： 1.Make Custom Style:自定义CSS样式 .类名称 或者 #ID 定义：.mytitle 使用：class=“mytitle” #mytitle 使用：id=“mytitle” 2.Redefine HTML Tag：HTML标签样式（标记） 标记 定义： p 使用： 3.Use CSS Selector：CSS选择器样式（标记：状态） 标记：状态 定义：a:link 使用： a:visited a:hover a:active 注意：Num3可以看成Num2

6、的特例。,CSS的复合定义（2）,存在的问题： 一个页面中所有的相同标记只能使用同一种CSS样式表的效果。例如：一个页面中所有的超级链接的都是相同的。显然，这不能满足开发的需要。 解决办法： 将前面介绍的三种类型结合，进行复合定义。,CSS的复合定义（3）,复合定义格式1：标记.类名称：状态 举例： 定义 使用 p.mytitle a.news:hover a.notice:hover ,CSS的复合定义（4）,复合定义格式2：标记1 标记2 举例： 定义 h1 em color:#ff0000 使用 这段文字里强调的文字被设置为红色,CSS的复合定义（5）,复合定义格式3：标记1,标记2 举

7、例： 定义 h1,h2 color:#ff0000 使用 这里的文字是红色 这里的文字是红色,CSS的效果,Type：文字格式 Background：背景格式 Block：块格式 Box：框格式 Border：边框格式 List：列表格式 Positioning：定位格式 Extensions：扩展格式,CSS对话框参数设置（Type）,主要是对文字属性的设置,CSS对话框参数设置（Background）,主要是对背景属性的设置,CSS对话框参数设置（Block）,即区模式，是对某区域内文本的各种空隙大小的设置,CSS对话框参数设置（Box）,是容器设置模式,CSS对话框参数设置（Border）,即设置容器边框的属性，也是容器的一个组成部分。,CSS对话框参数设置（List）,设置列表的属性,CSS对话框参数设置（Positioning