《层叠样式表》PPT课件.ppt

《《层叠样式表》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《层叠样式表》PPT课件.ppt（26页珍藏版）》请在三一办公上搜索。

1、第4章 层叠样式表,4.1 CSS 概 述4.2 创建和编辑CSS样式4.3 设置CSS样式参数,4.1 CSS 概 述,4.1.1 CSS基本概念4.1.2 CSS基本语法,4.1.1 CSS基本概念,所谓CSS样式就是层叠样式表，是用来控制一个文档中某一文本区域外观的一组格式属性。CSS样式可以一次性对若干个文档所有的样式进行控制。同HTML样式相比，使用CSS样式表的好处除了在于它可以同时连接多个文档之外，还在于当CSS样式有所更新或被修改以后，所有应用了该样式表的文档都会被自动更新。CSS样式表的功能一般可以归纳为以下几点：（1）可以更灵活地控制网页中文字的字体、颜色、大小、间距、风格

2、和位置。（2）可以灵活地设置一段文字的行高、缩进，并可以为其加入三维效果的边框。,4.1.1 CSS基本概念,（3）可以方便地为网页中的任何元素设置不同的背景颜色和背景图像。（4）可以精确地控制网页中各元素的位置。（5）可以为网页中各元素设置过滤器，从而产生如阴影、模糊、透明等效果。（6）可以与脚本语言结合，从而产生各种动态效果。（7）由于是直接的HTML格式的代码，因此网页打开的速度非常快。,4.1.2 CSS基本语法,样式表的脚本语法结构是：HTML标记标记属性：属性值；标志属性：属性值；标志属性：属性值；现在首先讨论在HTML页面直接引用样式表的方法。这个方法必须把样式表信息包含在和标记

3、中，为了使样式表在整个页面中产生作用，应把该组标记及内容放到和标记中。在使用样式表的过程中，经常会有几个标记用到同一个属性，例如规定HTML中凡是粗体字、斜体字、1号标题字均显示为红色，按照上面介绍的方法应该书写为：Bcolor:redIcolor:red H1color:red 显然这样书写比较麻烦，引进分组的概念就会使其变得非常简单，可以写成：B,I,H1color:red，用逗号分隔各个HTML标志，把三行代码合并为一行。此外同一个HTML标记，还可以定义多个属性，例如把H1H6各级标题定义为红色、黑体字，带下划线，则应写为：H1,H2,H3,H4,H5,H6color:red;text

4、-decoration:underline;font-family:”黑体”,4.2 创建和编辑CSS样式,4.2.1 创建自定义CSS样式4.2.2 动态链接CSS样式4.2.3 导出CSS文件4.2.4 导入CSS文件4.2.5 链接外部CSS样式,4.2.1 创建自定义CSS样式,下面介绍如何创建一个自定义的CSS样式，并将其应用于网页文字的美化，步骤如下：（1）选择菜单命令【文件新建】，弹出【新建文档】对话框，在此对话框中选择“常规”选项卡，然后选择类别为“基本页”，在右边选项卡中选择“CSS”，单击【确定】按钮，即可创建一个新的CSS样式表文件。（2）单击【文本】CSS样式】新建】命

5、令，弹出【新建CSS规则】对话框，如图4-1所示。（3）在【选择器类型】中选择“类（可用于任何标签）”单选按钮。（4）在【名称】文本框中输入自定义的样式名称，这里输入“.td”。,4.2.1 创建自定义CSS样式,（5）在【定义】中选择“仅对该文档”单选按钮，如图4-1所示。（6）单击【确定】按钮，弹出【.td的CSS规则定义】对话框，如图4-2所示。（7）在【分类】列表中选择“类型”选项，右边显示对应的参数设置。（8）在“字体”列表中单击“编辑字体列表”选项，如图4-3所示。（4）打开【编辑字体列表】对话框，在【可用字体】列表中点击【新宋体】选项，然后将其加入到【选择的字体】列表中，如图4-

6、4所示。（10）单击【确定】按钮返回【.td的CSS规则定义】对话框。,4.2.1 创建自定义CSS样式,（11）设置字体为【新宋体】，大小为12像素，颜色设置为#CCCCCC，如图4-5所示。（12）单击【确定】按钮，完成对CSS样式的创建，此时在【CSS样式】面板中会出现一个名为.td的自定义样式，如图4-6所示。（13）在网页中选定一段要应用样式的文字，如图4-7所示。（14）在【属性】面板的【样式】下拉列表中单击【td】选项，为文字应用自定义的样式，如图4-8所示。（15）保存后浏览的效果如图4-4所示。,4.2.2 动态链接CSS样式,应用动态链接CSS样式，可以美化页面文字的链接效

7、果。具体的操作步骤如下：（1）定义超链接的HTML标签。（2）单击【文本CSS样式新建】选项，打开【新建CSS规则】对话框。（3）在【选择器类型】中选择【标签（重新定义特定标签的外观）】单选按钮。（4）在【标签】下拉列表中选择【a】选项，因为超链接都在标签内。（5）在【定义在】中选择【仅对该文档】单选按钮，如图4-10所示。6）单击【确定】按钮，打开【a的CSS规则定义】对话框。,4.2.2 动态链接CSS样式,（7）在【分类】列表中选择【类型】选项，设置大小为12像素，选中【无】复选框，颜色设置为#00CCFF，如图4-11所示。（8）单击【确定】按钮，完成标签的样式定义。（4）下面定义超链

8、接的样式，单击【文本CSS样式新建】选项，打开【新建CSS规则】对话框，如图4-12所示。（10）在【选择器类型】中选中【高级（ID、伪类选择器等）】单选按钮。（11）在【选择器】下拉列表中选择【a:link】选项。（12）在【定义在】中选择【仅对该文档】单选按钮。,4.2.2 动态链接CSS样式,（13）单击【确定】，此时将会打开【a:link的CSS规则定义】对话框，如图4-13所示。（14）在【分类】列表中选择【类型】选项，设置大小为12像素，选中【无】复选框，设置颜色为#0066CC。（15）单击【确定】按钮，完成链接样式的定义。（16）下面定义当鼠标移到超链接上的样式，单击【文本CS

9、S样式新建】选项，打开【新建CSS规则】对话框，如图4-14所示。（17）在【选择器类型】中选中【高级（ID、伪类选择器等）】单选按钮。（18）在【选择器】下拉列表中选择【a:hover】选项。,4.2.2 动态链接CSS样式,（14）在【定义在】中选择【仅对该文档】单选按钮。（20）单击【确定】按钮，此时将会弹出【a:hover的CSS规则定义】对话框。（21）在【分类】列表中选择【类型】选项，设置大小为12像素，选中【无】复选框，设置颜色为#FF4433，如图4-15所示。（22）此时在【CSS样式】面板中就会出现所设置的动态链接样式，如图4-16所示。（23）在浏览器中预览网页，可以看到

10、网页的动态链接效果，如图4-17所示。,4.2.3 导出CSS文件,下面介绍如何导出CSS样式表，具体操作步骤如下：（1）选择菜单命令【文件】导出】CSS样式表】，如图4-18所示。（2）打开【导出CSS样式为CSS文件】对话框，在【保存在】下拉列表中设置文件的保存路径，在【文件名】文本框中设置保存CSS的文件名，如图4-14所示。（3）单击【保存】按钮，导出网页中的CSS文件。,4.2.4 导入CSS文件,下面介绍如何导入CSS样式表，具体步骤如下：（1）在【CSS样式】面板中单击鼠标右键，从弹出的菜单中选择【附加样式表】选项，如图4-20所示。（2）打开【链接外部样式表】对话框，如图4-2

11、1所示。（3）单击【浏览】按钮，打开【选择样式表文件】对话框，选择要导入的CSS文件，如图4-22所示。（4）单击【确定】按钮返回到【链接到外部样式表】对话框中。（5）选中【导入】单选按钮，如图4-23所示。（6）单击【确定】按钮，将CSS文件导入到编辑的网页中，如图4-24所示。,4.2.5 链接外部CSS样式,下面介绍如何链接外部CSS样式，具体操作步骤如下：（1）在【CSS样式】面板中单击鼠标右键，从弹出的菜单中选择【附加样式表】选项，如图4-25所示。（2）在打开的【链接外部样式表】对话框中单击【浏览】按钮。（3）打开【选择样式文件】对话框，选择一个CSS文件，如图4-26所示。（4）

12、单击【确定】按钮返回【链接外部样式表】对话框。（5）选中【链接】单选按钮，如图4-27所示。（6）单击【确定】按钮，将CSS样式文件链接到网页中。,4.3 设置CSS样式参数,4.3.1 文本样式设置4.3.2 背景样式设置4.3.3 区块样式设置4.3.4 方框样式设置4.3.5 边框样式设置4.3.6 列表样式设置4.3.7 定位样式设置4.3.8 扩展样式设置,4.3.1 文本样式设置,使用CSS样式最常用的是设置文本的样式，打开文档中定义好的要编辑的样式，单击CSS面板中的【编辑样式】按钮，在打开的【CSS规则定义】对话框，选择分类中的【类型】选项进行文本样式的设置，如图4-28所示。

13、在对话框中该类别的各项参数设置如下：字体font-family：在下拉列表框中选择相应的字体，或使用编辑字体列表进行添加；大小font-size：设置字体的大小，常使用正文字号为12px、14px、4pt、10.5pt等；粗细font-weight：设置文字的粗细，可以使列表中默认的值，也可以手动输入；样式font-style：设置字体的外观，如正常、粗体、偏斜体；变体font-variant：设置为正常或小型大写字母。设置为小型大写字母时，将大写字母缩小；行高line-height：设置文本的高度，默认状态为系统自行调整行高，行高可设置为%或数值；修饰text-decoration：可以为文

14、本设置添加下划线、上划线、删除线、闪烁、无等，常用于设置链接的样式；颜色color：设置文本的颜色，使用颜色拾取器或在文本框中直接输入颜色值。,4.3.2 背景样式设置,在CSS规则定义的类型中选择【背景】，可以设置背景的样式，如图4-24所示。在对话框中各参数设置如下：背景颜色background-color：选择颜色作为背景，使用颜色拾取器或在文本框中直接输入颜色值；背景图片background-image：选择背景图片，在文本框中输入背景图片路径或单击浏览按钮选择路径；重复background-repeat：设置背景图片时此项有用。此列表框用以设置图片的重复方式为不重复、重复、横向重复、

15、纵向重复；附件：设置背景图片时此项有用。用以设置背景图像，当网页长度超过一屏时是否随网页滚动，可以设置为固定、滚动；水平位置：设置文本的水平方向位置，可以使用数值或像素等其他单位，来表示水平位置，也可以设置左对齐、居中、右对齐；垂直位置：设置同水平位置，设置为顶部、底部、居中或数值。,4.3.3 区块样式设置,在分类中选择【区块】，可以设置区块中的样式，如图4-30所示。对话框中各参数设置如下：单词间距word-spacing：是指英文单词间的距离，一般选择默认。如需设置时，使用数字和后面的单位相结合，正值为增加间距，负值为缩小间距；字母间距letter-spacing：是指英文单词字母间的距

16、离，一般选择默认。如需设置时，使用数字和后面的单位相结合，正值为增加间距，负值为缩小间距；垂直对齐vertical-align：设置对象的垂直对齐方式，可以设置为基线、下标、上标、顶部、文本顶对齐、中线对齐、底部和文本底对齐，当设置使用数值时，后面对应的单位只有%可选；文本对齐align：设置对象的水平对齐方式，可设置为左对齐、右对齐、居中对齐和两端对齐；,4.3.3 区块样式设置,文字缩进letter-indent：这是设置段落排版时最重要的设置，如段落首行缩进；空格：此处设置网页源代码中的空格，有正常、保留和不换行3个选项。正常表示忽略源代码之间的所有空格；保留表示保留由空格键、Tab键E

17、nter键产生的空格；不换行表示文本不自动换行；显示：设置对象如何显示或是否显示，在实际制作中一般不常使用，在下拉列表框可以选择的选项有无、内嵌、列表项、run-in、紧凑、标记、表格、内嵌表格、表格行组、表格标题组、表格注脚组、表格行、表格列组、表格列、表格单元格和表格标题。,4.3.4 方框样式设置,选择CSS样式规则定义左侧的类型为【方框】，在设置图像距离、所在单元格四周的距离或图文混排时，会用到这一设置，设置面板如图4-31所示。在对话框中该类别的各项参数设置如下：宽width：设置对象的宽度；浮动float：设置对象的环绕效果，可以设置为左对齐、右对齐、无，选择“无”，则无环绕效果；

18、高height：设置对象的高度；清除clear：设置对象的一侧不可有层，可以选择左对齐、右对齐、两者或无，如果清除层的一侧还有层，则对象将自动移到层的下面，选择“两者”指两侧都不可有层；选择“无”表示不限制左右是否有层；填充padding：如果对象有边框，且图像设为边框为1，那么填充指的就是边框于图像之间的空白区域；边界margin：如果对象有边框，且图像设为边框为1，那么边界指的就是边框外面的空白区域。,4.3.5 边框样式设置,在CSS规则定义左侧的【分类】列表框中选择【边框】选项，如图4-32所示，通过边框样式的设置，可以将对象的边框颜色、粗细等各项参数按如下设置：样式：此项可以设置边框

19、的样式，可以选择样式有无、点划线、实线、双线、槽状、脊状、凹陷、凸出，如图4-33所示；宽度：设置边框在是个方向的宽度，可以选择细、中、粗或整数的数值配合对应的单位；颜色：设置边框的颜色，仅当边框设置宽度存在值时才有效。如选中“全部相同”复选框，那么上、下、左、右的样式相同。,4.3.6 列表样式设置,应用CSS规则定义的列表样式，可以设置多种列表的外观样式。在分类中选择【列表】，则在右侧可以设置列表样式，如图4-34所示。在对话框中各项参数的设置如下：类型list-style-type：设置列表的符号类型，可以选择的类型如图4-35所示；项目符号图像：可以自定义项目列表的图像，在文本框中，输

20、入图像的路径或单击【浏览】按钮，选择本地图像源文件；位置list-style-position：有“内”和“外”两个选择，选择“内”时列表缩进，浏览时效果不明显；选择“外”时列表贴近左边框，有明显的缩进。,4.3.7 定位样式设置,选择【定位】选项，切换面板如图4-36所示。定位样式在实际中是对层的设置使用，因为在Dreamweaver 8中，有专门关于层的可视化控制面板，因此这个设置一般用不到。关于定位样式各参数的设置如下：类型position：设置层的定位方式，有绝对、固定、相对、静态4种可选；显示visability：设置层的显示方式，有继承、可见、隐藏3个方式；宽width：设置层的宽

21、度，选择【自动】，则层可以根据层中的内容自动调整宽度；高度height：设置同宽度；Z轴z-index：设置层的先后顺序；溢位overfloat：设置当层中的内容超过界面范围时的显示方式，有可见、隐藏、滚动、自动4种方式；置入：以网页的左上角为原点，设置层在网页中的位置，因为层是矩形区域，只需要设置2个点的距离即可；裁切：设置层只显示裁切后的区域，只设置2个点即可，用法同置入。,4.3.8 扩展样式设置,用CSS样式还可以实现一些扩展功能，通过扩展样式设置实现。扩展样式面板主要包括3种效果，即分页、光标、过滤器。在对话框左侧选择【扩展】项，可以在右边区域种设置CSS样式的扩展格式，如图4-37所示。扩展样式中各参数的设置如下：分页page-break：通过样式来为网页添加分页符号。允许用户指定在某元素前后进行分页。分页的概念是指在打印网页中内容的时候，在某指定的位置停止，然后将接下来的内容继续打印在下一页；光标cursor：通过样式改变鼠标形状，当放置于被此项设置修饰的区域上时，形状会发生改变，单击【光标】下拉列表框旁的按钮，多种光标的样式可供选择，如图4-38所示；滤镜filter：使用CSS语言实现过滤器效果，单击【过滤镜】下拉列表框旁的按钮，多种滤镜的样式可供选择，如图4-34所示。,