1 / 21

学习使用 CSS 样式表

学习使用 CSS 样式表. 课程：网页设计 学校：广西交通运输学校 教师：廖常羽. 两个网页特点 : 工整 , 美观易于阅读. 引入课题 :. 这组网页比前一组网页明显就显得字体混乱 , 版面不易阅读. 第一节 CSS 基本概念. 在网页设计中 ,CSS 是一个 非常灵活的工具 ， 利用 CSS 样式表可以对文本格式进行精确的页面美化。. 如下是 CSS 的 HTML 语言 , CSS 套用到多个网页，可以得到统一的文字、表格等风格形式。. .aaa { border: thin solid #009900; font-size: 24px; }

oliana
Télécharger la présentation

学习使用 CSS 样式表

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. 如下是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有后台语言,但在前台设计中该如何去设置呢?

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

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

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

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

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

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

  12. CSS样式的类别

  13. 进入下一页

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

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

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

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

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

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

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

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

More Related