工信版（中职）网页设计与制作教程6.ppt

《工信版（中职）网页设计与制作教程6.ppt》由会员分享，可在线阅读，更多相关《工信版（中职）网页设计与制作教程6.ppt（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Y CF（中职）网页设计与制作教程6项目活动六CSS 样式的应用 任务一CSS 基础知识 任务二CSS 的具体应用返回任务一 的基础知识 一、所加位置 编辑 时，使用记事本或 打开网页代码。找到 和，在 和 之间加入语句，然后所有的样式表都定义在 和 之间。下面我们来看具体的应用。():,:这句表示网页的字 体大小为 磅，文字行距，是单元格元素，这句代码是对单元格内的字体起控制作用。这里的 后面的 是选择符，网页内所有的 元素都会起作用。这些选择符可以是所有的 标记，下一页 返回任务一 的基础知识():表示超链接都为红 色，单行文本框的字体大小是 磅。二、的作用 的作用是可以大量减少网页代码，

2、从而为网页减肥。原理是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。目前大部分网站都是使用 来引用的。在 中，和 的作用是完全一样的。的使用方法:在网页 和 之间定义选择符名，选择符名前加。这些选择符名可以是字母、数字，或者是字母、数字的组合，然后在网页元素中使用 来引用它。上一页 下一页 返回任务一 的基础知识.选择符名语法:，然后在网页使用这句引用它:黑蓝色的字 磅的字。也就是说，黑蓝色的字 等价于 黑蓝色的字,磅的字 等价于 磅的字。上一页 下一页 返回任务一 的基础知识 注意:在一定条件下，使用 来引用可能不起作用或报错，或与 的 发生冲突，这种情况下，可以使用 来引用

3、。的使用方法与 一样，所不同的是:在网页的 和 之间定义选择符名，选择符名前加“.”(即点)。.样式表语法 样式表的项和它的值应该用冒号连接，例如:。样式表也可直接嵌在段落当中，而不用 或 引用，.最常用的样式表语言()(颜色，()(字体大小)。()(字体类型)。上一页 下一页 返回任务一 的基础知识()和(宽度和高度)。()(段落行距，建议使用百分比的形式，()(表示段前),(表示段后),(表示段落 左边距左边框的距离),(表示段落右边距右边框的距离)。()(段落的对齐方式，例如、等)。()(背景颜色)。():,:,:(表示绝对定位)。上一页 下一页 返回任务一 的基础知识.最常用的样式表代

4、码实例()去掉超链接下划线，:。()超链接变色，:。()改变超链接的颜色且去掉下划线，:,:。上一页 下一页 返回任务一 的基础知识()改变超链接的颜色且鼠标停在超链接上有下划线，鼠标离开时下划线消失，:,:,:。()网页的文字大小不随 浏览器文字大小的设置而改变，:,:。上一页 下一页 返回任务一 的基础知识.控制文字的样式 文字的样式主要包括文字大小写、文字修饰两个部分。()文字大小写。基本格式如下:参数。参数取值范围:所有文字大写显示,:所有文字小写显示,:每个单词的头字母大写显示。上一页 下一页 返回任务一 的基础知识()文字修饰。文字修饰的主要用途是改变浏览器显示文字链接的方式。基本

5、格式如下:参数。参数取值范围:为文字加下划线,:为文字加上划线,:为文字加删除线,:使文字闪烁,:不显示上述任何效果。上一页 下一页 返回任务一 的基础知识()行距。行距是指上、下两行基准线之间的垂直距离。基本格式如下:行间距离。()文本水平对齐。文本水平对齐可以控制文本的水平对齐方式。基本格式如下:参数。参数的取值:左对齐,:右对齐,:居中对齐,:相对左右对齐。上一页 下一页 返回任务一 的基础知识()文本垂直对齐。基本格式如下:参数。参数取值:顶对齐,:底对齐,:相对文本顶对齐,:相对文本底对齐,:基准线对齐,:中心对齐,:以下标的形式显示,:以上标的形式显示。上一页 下一页 返回任务一

6、的基础知识.控制颜色和背景的样式 控制颜色和背景的样式包括控制颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定和背景定位六个部分。()颜色属性。基本格式如下:参数。颜色参数取值范围:以 值表示,以 进制的色彩值表示,以默认颜色的英文名称表示。上一页 下一页 返回任务一 的基础知识()背景颜色。基本格式如下:参数。参数取值和颜色属性的参数取值一样。()背景图片。基本格式如下:。就是背景图片的存放路径。如果用 来代替背景图片的存放路径，将什么也不显示上一页 下一页 返回任务一 的基础知识)背景图片重复。基本格式如下:参数。参数取值范围:不平铺背景图片,:使图片只在水平方向上平铺,:使图片只

7、在垂直方向上平铺。如果不指定背景图片重复属性，浏览器默认的是背景图片在水平、垂直两个方向上 平铺。上一页 下一页 返回任务一 的基础知识()背景图片固定。基本格式如下:参数。参数取值范围:网页滚动时，背景图片相对于浏览器的窗口而言，固定不动,:网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动。()背景定位。基本格式如下:参数。上一页 下一页 返回任务一 的基础知识 参数取值范围:带长度单位的数字参数,:相对前景对象顶对齐,:相对前景对象底对齐,:相对前景对象左对齐,:相对前景对象右对齐,:相对前景对象中心对齐。注意:的内容很多，以上只是列举了常见的知识点，其他的就不再一一赘述了。上一页 返

8、回任务二 的具体应用 一、设置网页的背景颜色为黄色 代码如下:bodybackground-color:#FF0()单击 样式面板的 按钮，进入“新建 规则”对话框，如图 所示。下一页 返回任务二 的具体应用()在选择器名称栏中，输入 名称,在规则定义栏中，选择“仅限该文档”，单击“确定”按钮。进入“规则定义”对话框，如图 所示。()在“分类”栏中选择“背景”选项，将出现如图 所示的对话框，其中 即设置背景颜色。()单击“确定”按钮即可完成页面背景颜色的设置。二、设置边框为虚线边框()插入一个 行 列的表格。将其宽度设为 像素，对齐方式设为“居中对齐”。()单击 样式面板的 按钮，进入“新建

9、规则”对话框，如图 所示。上一页 下一页 返回任务二 的具体应用()在选择器名称栏中，输入 名称,在规则定义栏中，选择“仅限该文档”，单击“确定”按钮。进入“规则定义”对话框，如图 所示。()在“分类”栏中选择“边框”选项，将出现“边框”选项卡对话框。分别设置、里的参数，如图 所示。()单击“确定”按钮即可，此时的边框样式已经定义成虚线，像素，红色。()然后再选中表格，在属性面板的“类”中选择刚定义为 的类，如图 所示。上一页 下一页 返回任务二 的具体应用()此时，表格的边框会变成虚线样式，颜色为红色，边框粗细为 像素，如图 所示。()至此，表格的边框被设置为虚线样式，该案例制作完成。从以上两个例子中可以看出，用 样式来设置网页的背景颜色、边框样式，很方便，也很简单。如果想要设置页面的其他效果，只需建立不同的 样式，但创建 样式的方法都跟这两个案例的制作过程相类似。上一页 返回图“新建 规则”对话框返回图“规则定义”对话框返回图“背景颜色”对话框返回图“新建 规则”对话框返回图“规则定义”对话框返回图 设置边框样式返回图 在“类”中选择 的属性面板返回图 表格的边框为“虚线边框”返回