实验四 CSS样式的应用

实验四  CSS样式的应用

注意：以下实验项目皆以本文件为操作对象，实验结果用记事本保留后预览，最后将添加的CSS代码转载到实验报告中

另本网页中蓝色加下划线的字即为默认的超链接样式

实验目的：

1. 掌握CSS样式的语法规则；
2. 掌握CSS样式的类选择器的使用；
3. 掌握CSS样式表的定义位置；
4. 重点培养应用CSS样式的能力。

实验内容:

1. 创建一个名为biaoti的类选择器将本网页css.html中的所有二级标题（如实验目的：）变成黑体18像素大小加粗的字体；
2. 使用内嵌样式表修饰本页面中的最大标题（第一行的文字）使之字体变隶书，加粗，24px大小；
3. 创建一个symd类用以修饰实验目的的各项使之文字变为斜体，微软雅黑，20px大小，白色，加粗，且背景为浅蓝色；
4. 通过创建样式表使得注意中所有的超链接变为默认是绿色加下划线，鼠标移上去字体会加大至20px且变为红色；
5. 通过创建样式表使得所有“实验内容”中的超链接变为默认是红色不加下划线，鼠标移上去字体会加大至20px且变为绿色加粗字体（如下图效果）；

6.使用CSS使得网页背景变为下图且不平铺居中置顶显示；

  7.
将“实验内容”中各行之间的间距设至10px，已知字体是16px大小的，并设定字与字之间的间隔为5px；

完成1-7后，页面效果如下图将所示

8. 请将图下面的诗《临洞庭上张丞相》变成类似下图白居易的诗的竖排的古文风格。

临洞庭上张丞相

唐. 孟浩然

八月湖水平，涵虚混太清

气蒸云梦泽，波撼岳阳城

欲济无舟楫，端居耻圣明

坐观垂钓者，徒有羡鱼情

说明：文本书写顺序从上到下，行数从右到左排列，可用layout-flow:vertical-ideographic（适用于亚洲语系）或writing-mode:tb-rl。