学习使用CSS样式表.ppt

《学习使用CSS样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在PPT专区-天天文库。

1、学习使用CSS样式表课程：网页设计学校：广西交通运输学校教师：廖常羽引入课题:两个网页特点:工整,美观易于阅读这组网页比前一组网页明显就显得字体混乱,版面不易阅读第一节CSS基本概念在网页设计中,CSS是一个非常灵活的工具，利用CSS样式表可以对文本格式进行精确的页面美化。.aaa{border:thinsolid#009900;font-size:24px;}.ccc{font-family:"宋体";font-size:16px;font-style:normal;line-height:20px;color:#0

2、00000;如下是CSS的HTML语言,CSS套用到多个网页，可以得到统一的文字、表格等风格形式。CSS在DM有后台语言,但在前台设计中该如何去设置呢?CSS面板：第二节CSS设置方法设置CSS样式的方法：（1）在【CSS样式】面板中单击面板底部的（新建）按钮，弹出【新建CSS规则】对话框，根据【选择器类型】的不同，CSS样式被划分为3大类：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。设置CSS样式的方法（2）在面板中选择“类”，为其命名“.ccc”，CSS样式设置都要求有“.”

3、这是语法规则.包括其他三种选择器，都要这样命名。（3）观察“.ccc的CSS规则定义”对话框，然后看各选项名称，了解其含义：CSS样式的分类设置文字.ccc的CSS的方法在对话框中设置文字CSS样式在DM中选择文字，进行套用，得到效果，看第九页幻灯片。进入下一页设置边框.ddd的CSS的方法在对话框中设置边框CSS样式在DM中选择文字，进行套用，得到效果，看第九页幻灯片。应用CSS样式的方法：打开另一个文件绿茶.HTML，导入CSS文件abc.css，然后在绿茶文件中套用即可得到统一样式的网页文件CSS样式的类别类别功

4、能类型用于定义网页中文本的字体、颜色、风格等，包含九个属性背景设置网页元素的背景颜色或图象的样式，包含六个属性区块控制区块中内容的间距，对齐方式和缩进，包含七个属性方框控制元素在页面上的放置方式，包含十二个属性边框定义元素周围边框的样式，包含十二个属性列表设置列表的风格，包含三个属性定位用于精确控制元素的位置，包含十四个属性扩展设置打印分页符和各种滤镜视觉效果类型背景区块方框边框列表定位扩展进入下一页我们学了知识：1.新建一个CSS样式文件2.新建一个CSS样式表和设置一个样式表3.套用样式表，得到效果4.如何将一个C

5、SS样式表文件导入到另一个网页中，然后进行套用。分别提问学生小结：1.两个CSS样式表.ccc和.ddd是同一个CSS样式文件里的内容,请问如果将文字和边框效果同时设置在同一个CSS样式表里，比如.ccc,请问是否可以得到两个CSS样式表同时设置效果呢?Abc.css是样式表文件.ccc样式表.ddd样式表图例：提高概念：1.完成教学案例中的两个网页中的文字和边框CSS样式设置，并进行套用。2.设计名为.bbb的CSS样式，为标题文字设计为红色，字体：特大，粗体，,下划线，并对”红茶”和”绿茶”网页的标题进行套用。3.

6、教师检查实验作业,找一位同学操作，并总结。学生实验：实验步骤：1.新建一个CSS样式文件abc.css2.在样式文件中又新建两个样式表，为.ccc和.ddd3.设置文字CSS文字.CCC样式表设置框4.设置边框css边框,.ddd样式表设置对话框有个提高设置练习，请问如何设置网页中标题的样式表设置？5.设计名为.bbb的CSS样式表，保存在abc.css中，设置参数为：红色，字体：特大，粗体，,下划线，对”红茶”和”绿茶”网页的标题进行套用，效果如后面两幻灯片图。设置完成的网页效果图一:设置完成的网页效果图二: