《学习使用CSS样式表.ppt》由会员分享，可在线阅读，更多相关《学习使用CSS样式表.ppt（21页珍藏版）》请在三一办公上搜索。
1、学习使用CSS样式表,课程：网页设计学校：广西交通运输学校教师：廖常羽,引入课题:,两个网页特点:工整,美观易于阅读,这组网页比前一组网页明显就显得字体混乱,版面不易阅读,第一节 CSS基本概念,在网页设计中,CSS是一个非常灵活的工具，利用CSS样式表可以对文本格式进行精确的页面美化。,.aaa border:thin solid#009900;font-size:24px;.ccc font-family:宋体;font-size:16px;font-style:normal;line-height:20px;color:#000000;,如下是CSS的HTML语言,CSS套用到多个网页，
2、可以得到统一的文字、表格等风格形式。,CSS在DM有后台语言,但在前台设计中该如何去设置呢?,CSS面板：,第二节 CSS设置方法,设置CSS样式的方法：,（1）在【CSS样式】面板中单击面板底部的（新建）按钮，弹出【新建CSS规则】对话框，根据【选择器类型】的不同，CSS样式被划分为3大类：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。,设置CSS样式的方法,（2）在面板中选择“类”，为其命名“.ccc”，CSS样式设置都要求有“.”这是语法规则.包括其他三种选择器，都要这样命名。（3）观察“.ccc的CSS规则定义”对话框，然后看各选项名称，了解其含义
3、：,CSS样式的分类,设置文字.ccc 的CSS的方法,在对话框中设置文字CSS样式,在DM中选择文字，进行套用，得到效果，看第九页幻灯片。,进入下一页,设置边框.ddd的CSS的方法,在对话框中设置边框CSS样式,在DM中选择文字，进行套用，得到效果，看第九页幻灯片。,应用CSS样式的方法：,打开另一个文件 绿茶.HTML，导入 CSS文件abc.css，然后在绿茶文件中套用即可得到统一样式的网页文件,CSS样式的类别,进入下一页,我们学了知识：1.新建一个CSS样式文件2.新建一个CSS样式表和设置一个样式表3.套用样式表，得到效果4.如何将一个CSS样式表文件导入到另一个网页中，然后进行
4、套用。分别提问学生,小结：,1.两个CSS样式表.ccc 和.ddd是同一个CSS样式文件里的内容,请问如果将文字和边框效果同时设置在同一个CSS样式表里，比如.ccc,请问是否可以得到两个CSS样式表同时设置效果呢?,图例：,提高概念：,1.完成教学案例中的两个网页中的文字和边框CSS样式设置，并进行套用。2.设计名为.bbb的CSS样式，为标题文字设计为红色，字体：特大，粗体，,下划线，并对”红茶”和”绿茶”网页的标题进行套用。3.教师检查实验作业,找一位同学操作，并总结。,学生实验：,实验步骤：,1.新建一个CSS样式文件abc.css2.在样式文件中又新建两个样式表，为.ccc 和.ddd3.设置文字CSS,文字.CCC样式表设置框,4.设置边框css边框,.ddd样式表设置对话框,有个提高设置练习，请问如何设置网页中标题的样式表设置？,5.设计名为.bbb的CSS样式表，保存在abc.css中，设置参数为：红色，字体：特大，粗体，,下划线，对”红茶”和”绿茶”网页的标题进行套用，效果如后面两幻灯片图。,设置完成的网页效果图一:,设置完成的网页效果图二:,
