网页制作中CSS应用.docVIP

实验四 CSS的应用 一、实验目的： 1、掌握和应用CSS样式及CSS样式表的方法。 2、熟悉CSS样式的各种特殊效果的用法 二、实验内容 （一）设置页面属性 1. 打开页面属性对话框 　 选取文件菜单中的打开命令 → 打开网页artical.htm → 选取修改菜单 → 选取页面属性选项 2. 设置外观属性 　 选取页面字体框 → 选取宋体项目 → 选取大小文本框 → 选取单位框 → 设置文本大小12 → 选取点数项目 → 点击文本颜色按钮 → 选择所需的颜色#333333 →设置左边距为10→输入上边距值20→点击确定按钮 3.设置页面的链接属性 　 选取链接项目 → 选取链接字体框 → 设置链接字体为：仿宋_GB2312 →设置链接文字大小10 → 选取点数(pt)项目 → 点击链接颜色按钮 → 选取所需的颜色#990000 → 选取下划线设置框 → 选取仅在变换图像时显示下划线项目 4.设置标题样式属性 　 选取标题项目 → 选取标题字体框 → 选取标题字体黑体 → 点击粗体按钮 → 选取标题1文本框 → 设置标题1字体大小为20象素 → 点击标题 1 的颜色按钮 → 选择所需的字体颜色#003300 → 点击确定按钮 5.对网页文本设置标题样式 　 选择要设置标题1字体的文字 → 选取格式框 → 选取标题1格式 → 重复选择文本并设置标题1样式 6．按F12浏览网页 （二）重新设置html标签 1. 打开重定义标签对话框 　 打开网页文档poem1.htm→点击新建 CSS 样式按钮 → 选取标签(重新定义特定标签的外观) → 点击标签 “ 下拉菜单 ” 箭头 → 选取要重新定义的标签body → 选取仅对该文档按钮 → 点击确定按钮设置body的CSS 样式（该标签控制整个网页外观 ) 新建CSS样式按钮 新建CSS样式按钮 2.设置背景图象不重复 　 选取背景项目→点击浏览按钮→选择所需的背景图象→点击确定按钮→打开重复框→选取不重复项目(选择不重复则背景图象不会平铺)→选取附件框→选取固定项目(附件：用来确定背景图像是固定在原来位置还是随内容进行滚动)→选取水平位置框→选取右对齐项目→选取垂直位置框→选取顶部项目→点击确定按钮 3、按F12浏览网页 （三）创建自定义样式 1. 创建样式表文件 　打开网页文档poem1.htm →选取窗口菜单 → 选取 CSS 样式 → 点击新建 CSS 样式按钮 → 输入新建的 CSS 样式名 → 点击确定按钮 → 点击保存(S)按钮 → 输入要保存的样式表文件名（默认扩展名为. css) 将新样式存放在样式表文件中可以在其它网页中使用，该样式表文件应存放在自己的站点文件夹中 ” 2. 设置新建样式 　 选取字体框 → 选取方正姚体, 黑体项目 → 选取大小文本方块 → 选取24 → 选取粗细框 → 选取粗体项目 → 选取行高框 → 选取行高单位框 → 输入行高 → 选取倍行高项目 → 点击文本颜色按钮 → 选取要设置的文本颜色 → 点击确定按钮 3.应用样式 　 选择要应用样式的文本 →选取样式框 → 选取bt1样式 → 文本应用所选样式 4.添加新的样式 　 点击新建 CSS 样式按钮 → 点击确定按钮 → 输入自定义样式名 → 样式自动存放在已建立的样式表文件中 ） 5. 设置新的样式 　选取字体框→选取幼圆→选取大小框→选取12→选取单位框→选取点数(pt)→选取粗细框→选取细体→选取行高文本方块→选取单位框→输入行高值1→选取倍行高项目→选取颜色框→选取区块项目→选取单词间距文本方块→设置字间距10→选取像素px项目→选取文字缩进文本方块→选取单位框→设置文字缩进值4个字→选取字体高 (em) 项目→点击确定按钮 6.应用样式 　 选择要应用样式的文本 → 右键点击要应用的样式名text → 选取套用选项 → 应用样式的文本 右单击，选“套用 右单击，选“套用” 7、按F12浏览网页