《《网页设计与制作》-邬锦霞-电子教案 第9章 层叠样式表》由会员分享，可在线阅读，更多相关《《网页设计与制作》-邬锦霞-电子教案 第9章 层叠样式表（26页珍藏版）》请在金锄头文库上搜索。
1、第9章 层叠样式表,9.1 CSS 概 述 9.2 创建和编辑CSS样式 9.3 设置CSS样式参数,9.1 CSS 概 述,9.1.1 CSS基本概念 9.1.2 CSS基本语法,9.1.1 CSS基本概念,所谓CSS样式就是层叠样式表，是用来控制一个文档中某一文本区域外观的一组格式属性。CSS样式可以一次性对若干个文档所有的样式进行控制。同HTML样式相比，使用CSS样式表的好处除了在于它可以同时连接多个文档之外，还在于当CSS样式有所更新或被修改以后，所有应用了该样式表的文档都会被自动更新。 CSS样式表的功能一般可以归纳为以下几点： （1）可以更灵活地控制网页中文字的字体、颜色、大小、
2、间距、风格和位置。 （2）可以灵活地设置一段文字的行高、缩进，并可以为其加入三维效果的边框。,9.1.1 CSS基本概念,（3）可以方便地为网页中的任何元素设置不同的背景颜色和背景图像。 （4）可以精确地控制网页中各元素的位置。 （5）可以为网页中各元素设置过滤器，从而产生如阴影、模糊、透明等效果。 （6）可以与脚本语言结合，从而产生各种动态效果。 （7）由于是直接的HTML格式的代码，因此网页打开的速度非常快。,9.1.2 CSS基本语法,样式表的脚本语法结构是： HTML标记标记属性：属性值；标志属性：属性值；标志属性：属性值； 现在首先讨论在HTML页面直接引用样式表的方法。这个方法必须
3、把样式表信息包含在和标记中，为了使样式表在整个页面中产生作用，应把该组标记及内容放到和标记中。 在使用样式表的过程中，经常会有几个标记用到同一个属性，例如规定HTML中凡是粗体字、斜体字、1号标题字均显示为红色，按照上面介绍的方法应该书写为： Bcolor:red Icolor:red H1color:red 显然这样书写比较麻烦，引进分组的概念就会使其变得非常简单，可以写成：B,I,H1color:red，用逗号分隔各个HTML标志，把三行代码合并为一行。此外同一个HTML标记，还可以定义多个属性，例如把H1H6各级标题定义为红色、黑体字，带下划线，则应写为： H1,H2,H3,H4,H5,
4、H6color:red;text-decoration:underline; font-family:”黑体”,9.2 创建和编辑CSS样式,9.2.1 创建自定义CSS样式 9.2.2 动态链接CSS样式 9.2.3 导出CSS文件 9.2.4 导入CSS文件 9.2.5 链接外部CSS样式,9.2.1 创建自定义CSS样式,下面介绍如何创建一个自定义的CSS样式，并将其应用于网页文字的美化，步骤如下： （1）选择菜单命令【文件新建】，弹出【新建文档】对话框，在此对话框中选择“常规”选项卡，然后选择类别为“基本页”，在右边选项卡中选择“CSS”，单击【确定】按钮，即可创建一个新的CSS样式表
5、文件。 （2）单击【文本】CSS样式】新建】命令，弹出【新建CSS规则】对话框，如图9-1所示。 （3）在【选择器类型】中选择“类（可用于任何标签）”单选按钮。 （4）在【名称】文本框中输入自定义的样式名称，这里输入“.td”。,9.2.1 创建自定义CSS样式,（5）在【定义】中选择“仅对该文档”单选按钮，如图9-1所示。 （6）单击【确定】按钮，弹出【.td的CSS规则定义】对话框，如图9-2所示。 （7）在【分类】列表中选择“类型”选项，右边显示对应的参数设置 。 （8）在“字体”列表中单击“编辑字体列表”选项，如图9-3所示。 （9）打开【编辑字体列表】对话框，在【可用字体】列表中点击
6、【新宋体】选项，然后将其加入到【选择的字体】列表中，如图9-4所示。 （10）单击【确定】按钮返回【.td的CSS规则定义】对话框。,9.2.1 创建自定义CSS样式,（11）设置字体为【新宋体】，大小为12像素，颜色设置为#CCCCCC，如图9-5所示。 （12）单击【确定】按钮，完成对CSS样式的创建，此时在【CSS样式】面板中会出现一个名为.td的自定义样式，如图9-6所示。 （13）在网页中选定一段要应用样式的文字，如图9-7所示。 （14）在【属性】面板的【样式】下拉列表中单击【td】选项，为文字应用自定义的样式，如图9-8所示。 （15）保存后浏览的效果如图9-9所示。,9.2.2
7、 动态链接CSS样式,应用动态链接CSS样式，可以美化页面文字的链接效果。具体的操作步骤如下： （1）定义超链接的HTML标签。 （2）单击【文本CSS样式新建】选项，打开【新建CSS规则】对话框。 （3）在【选择器类型】中选择【标签（重新定义特定标签的外观）】单选按钮。 （4）在【标签】下拉列表中选择【a】选项，因为超链接都在标签内。 （5）在【定义在】中选择【仅对该文档】单选按钮，如图9-10所示。 6）单击【确定】按钮，打开【a的CSS规则定义】对话框。,9.2.2 动态链接CSS样式,（7）在【分类】列表中选择【类型】选项，设置大小为12像素，选中【无】复选框，颜色设置为#00CCFF
8、，如图9-11所示。 （8）单击【确定】按钮，完成标签的样式定义。 （9）下面定义超链接的样式，单击【文本CSS样式新建】选项，打开【新建CSS规则】对话框，如图9-12所示。 （10）在【选择器类型】中选中【高级（ID、伪类选择器等）】单选按钮。 （11）在【选择器】下拉列表中选择【a:link】选项。 （12）在【定义在】中选择【仅对该文档】单选按钮。,9.2.2 动态链接CSS样式,（13）单击【确定】，此时将会打开【a:link的CSS规则定义】对话框，如图9-13所示。 （14）在【分类】列表中选择【类型】选项，设置大小为12像素，选中【无】复选框，设置颜色为#0066CC。 （15
9、）单击【确定】按钮，完成链接样式的定义。 （16）下面定义当鼠标移到超链接上的样式，单击【文本CSS样式新建】选项，打开【新建CSS规则】对话框，如图9-14所示。 （17）在【选择器类型】中选中【高级（ID、伪类选择器等）】单选按钮。 （18）在【选择器】下拉列表中选择【a:hover】选项。,9.2.2 动态链接CSS样式,（19）在【定义在】中选择【仅对该文档】单选按钮。 （20）单击【确定】按钮，此时将会弹出【a:hover的CSS规则定义】对话框。 （21）在【分类】列表中选择【类型】选项，设置大小为12像素，选中【无】复选框，设置颜色为#FF9933，如图9-15所示。 （22）此
10、时在【CSS样式】面板中就会出现所设置的动态链接样式，如图9-16所示。 （23）在浏览器中预览网页，可以看到网页的动态链接效果，如图9-17所示。,9.2.3 导出CSS文件,下面介绍如何导出CSS样式表，具体操作步骤如下： （1）选择菜单命令【文件】导出】CSS样式表】，如图9-18所示。 （2）打开【导出CSS样式为CSS文件】对话框，在【保存在】下拉列表中设置文件的保存路径，在【文件名】文本框中设置保存CSS的文件名，如图9-19所示。 （3）单击【保存】按钮，导出网页中的CSS文件。,9.2.4 导入CSS文件,下面介绍如何导入CSS样式表，具体步骤如下： （1）在【CSS样式】面板
11、中单击鼠标右键，从弹出的菜单中选择【附加样式表】选项，如图9-20所示。 （2）打开【链接外部样式表】对话框，如图9-21所示。 （3）单击【浏览】按钮，打开【选择样式表文件】对话框，选择要导入的CSS文件，如图9-22所示。 （4）单击【确定】按钮返回到【链接到外部样式表】对话框中。 （5）选中【导入】单选按钮，如图9-23所示。 （6）单击【确定】按钮，将CSS文件导入到编辑的网页中，如图9-24所示。,9.2.5 链接外部CSS样式,下面介绍如何链接外部CSS样式，具体操作步骤如下： （1）在【CSS样式】面板中单击鼠标右键，从弹出的菜单中选择【附加样式表】选项，如图9-25所示。 （2
12、）在打开的【链接外部样式表】对话框中单击【浏览】按钮。 （3）打开【选择样式文件】对话框，选择一个CSS文件，如图9-26所示。 （4）单击【确定】按钮返回【链接外部样式表】对话框。 （5）选中【链接】单选按钮，如图9-27所示。 （6）单击【确定】按钮，将CSS样式文件链接到网页中。,9.3 设置CSS样式参数,9.3.1 文本样式设置 9.3.2 背景样式设置 9.3.3 区块样式设置 9.3.4 方框样式设置 9.3.5 边框样式设置 9.3.6 列表样式设置 9.3.7 定位样式设置 9.3.8 扩展样式设置,9.3.1 文本样式设置,使用CSS样式最常用的是设置文本的样式，打开文档中
13、定义好的要编辑的样式，单击CSS面板中的【编辑样式】按钮，在打开的【CSS规则定义】对话框，选择分类中的【类型】选项进行文本样式的设置，如图9-28所示。 在对话框中该类别的各项参数设置如下： 字体font-family：在下拉列表框中选择相应的字体，或使用编辑字体列表进行添加； 大小font-size：设置字体的大小，常使用正文字号为12px、14px、9pt、10.5pt等； 粗细font-weight：设置文字的粗细，可以使列表中默认的值，也可以手动输入； 样式font-style：设置字体的外观，如正常、粗体、偏斜体； 变体font-variant：设置为正常或小型大写字母。设置为小型
14、大写字母时，将大写字母缩小； 行高line-height：设置文本的高度，默认状态为系统自行调整行高，行高可设置为%或数值； 修饰text-decoration：可以为文本设置添加下划线、上划线、删除线、闪烁、无等，常用于设置链接的样式； 颜色color：设置文本的颜色，使用颜色拾取器或在文本框中直接输入颜色值。,9.3.2 背景样式设置,在CSS规则定义的类型中选择【背景】，可以设置背景的样式，如图9-29所示。 在对话框中各参数设置如下： 背景颜色background-color：选择颜色作为背景，使用颜色拾取器或在文本框中直接输入颜色值； 背景图片background-image：选择背
15、景图片，在文本框中输入背景图片路径或单击浏览按钮选择路径； 重复background-repeat：设置背景图片时此项有用。此列表框用以设置图片的重复方式为不重复、重复、横向重复、纵向重复； 附件：设置背景图片时此项有用。用以设置背景图像，当网页长度超过一屏时是否随网页滚动，可以设置为固定、滚动； 水平位置：设置文本的水平方向位置，可以使用数值或像素等其他单位，来表示水平位置，也可以设置左对齐、居中、右对齐； 垂直位置：设置同水平位置，设置为顶部、底部、居中或数值。,9.3.3 区块样式设置,在分类中选择【区块】，可以设置区块中的样式，如图9-30所示。 对话框中各参数设置如下： 单词间距wo
16、rd-spacing：是指英文单词间的距离，一般选择默认。如需设置时，使用数字和后面的单位相结合，正值为增加间距，负值为缩小间距； 字母间距letter-spacing：是指英文单词字母间的距离，一般选择默认。如需设置时，使用数字和后面的单位相结合，正值为增加间距，负值为缩小间距； 垂直对齐vertical-align：设置对象的垂直对齐方式，可以设置为基线、下标、上标、顶部、文本顶对齐、中线对齐、底部和文本底对齐，当设置使用数值时，后面对应的单位只有%可选； 文本对齐align：设置对象的水平对齐方式，可设置为左对齐、右对齐、居中对齐和两端对齐；,9.3.3 区块样式设置,文字缩进letter-indent：这是设置段落排版时最重要的设置，如段落首行缩进； 空格：此处设置网页源代码中的空格，有正常、保留和不换行3个选项。正常表示忽略源代码之间的所有空格；保留表示保留由空格键、Tab键Enter键产生的空格；不换行表示文本不自动换行； 显示：设置对象如何显示或是否显示，在实际制作中一般不常使用，在下拉列表框可以选择的选项有无、内嵌、列表项、r
