学习使用 CSS 样式表

学习使用CSS样式表 课程：网页设计学校：广西交通运输学校教师：廖常羽

两个网页特点:工整,美观易于阅读 引入课题:

这组网页比前一组网页明显就显得字体混乱,版面不易阅读这组网页比前一组网页明显就显得字体混乱,版面不易阅读

第一节 CSS基本概念 • 在网页设计中,CSS是一个非常灵活的工具，利用CSS样式表可以对文本格式进行精确的页面美化。

如下是CSS的HTML语言, CSS套用到多个网页，可以得到统一的文字、表格等风格形式。 • .aaa { border: thin solid #009900; • font-size: 24px; • } • .ccc { • font-family: "宋体"; • font-size: 16px; • font-style: normal; • line-height: 20px; • color: #000000; CSS在DM有后台语言,但在前台设计中该如何去设置呢?

第二节 CSS设置方法 CSS面板：

设置CSS样式的方法： • （1）在【CSS样式】面板中单击面板底部的（新建）按钮，弹出【新建CSS规则】对话框，根据【选择器类型】的不同，CSS样式被划分为3大类：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。

设置CSS样式的方法 （2）在面板中选择“类”，为其命名“.ccc”，CSS样式设置都要求有“.”这是语法规则.包括其他三种选择器，都要这样命名。（3）观察“.ccc的CSS规则定义”对话框，然后看各选项名称，了解其含义： CSS样式的分类

设置文字.ccc 的CSS的方法 在DM中选择文字，进行套用，得到效果，看第九页幻灯片。在对话框中设置文字CSS样式进入下一页

设置边框 .ddd的CSS的方法 在DM中选择文字，进行套用，得到效果，看第九页幻灯片。在对话框中设置边框CSS样式

应用CSS样式的方法： 打开另一个文件绿茶.HTML，导入 CSS文件abc.css，然后在绿茶文件中套用即可得到统一样式的网页文件

CSS样式的类别

进入下一页

小结： 我们学了知识： 1.新建一个CSS样式文件 2.新建一个CSS样式表和设置一个样式表 3.套用样式表，得到效果 4.如何将一个CSS样式表文件导入到另一个网页中，然后进行套用。分别提问学生

.ccc样式表 Abc.css是样式表文件 .ddd样式表提高概念： 1.两个CSS样式表.ccc 和.ddd是同一个CSS样式文件里的内容,请问如果将文字和边框效果同时设置在同一个CSS样式表里，比如.ccc,请问是否可以得到两个CSS样式表同时设置效果呢? 图例：

学生实验： 1.完成教学案例中的两个网页中的文字和边框CSS样式设置，并进行套用。 2.设计名为. bbb的CSS样式，为标题文字设计为红色，字体：特大，粗体，,下划线，并对”红茶”和”绿茶”网页的标题进行套用。 3.教师检查实验作业,找一位同学操作，并总结。

实验步骤： 文字.CCC样式表设置框 1.新建一个CSS样式文件abc.css 2.在样式文件中又新建两个样式表，为.ccc 和.ddd 3.设置文字CSS

4.设置边框css边框,.ddd样式表设置对话框

有个提高设置练习，请问如何设置网页中标题的样式表设置？有个提高设置练习，请问如何设置网页中标题的样式表设置？ 5.设计名为. bbb的CSS样式表，保存在abc.css中，设置参数为：红色，字体：特大，粗体，,下划线，对”红茶”和”绿茶”网页的标题进行套用，效果如后面两幻灯片图。

设置完成的网页效果图一:

设置完成的网页效果图二:

学习使用 CSS 样式表

学习使用 CSS 样式表

Presentation Transcript