使用css样式表 - 广西交通运输学校.pptVIP

学习使用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面板： 设置CSS样式的方法： （1） 在【CSS样式】面板中单击面板底部的 （新建）按钮，弹出【新建CSS规则】对话框，根据【选择器类型】的不同，CSS样式被划分为3大类：类（可应用于任何标签）、标签（重新定义特定标签的外观）、高级（ID、伪类选择器等）。 设置CSS样式的方法 （2）在面板中选择“类”，为其命名“.ccc”，CSS样式设置都要求有“.”这是语法规则.包括其他三种选择器，都要这样命名。 （3）观察“.ccc的CSS规则定义”对话框，然后看各选项名称，了解其含义： 设置文字.ccc 的CSS的方法 设置边框 .ddd的CSS的方法 应用CSS样式的方法： CSS样式的类别 我们学了知识： 1.新建一个CSS样式文件 2.新建一个CSS样式表和设置一个样式表 3.套用样式表，得到效果 4.如何将一个CSS样式表文件导入到另一个网页中，然后进行套用。 分别提问学生 1.两个CSS样式表.ccc 和.ddd是同一个CSS样式文件里的内容,请问如果将文字和边框效果同时设置在同一个CSS样式表里，比如.ccc,请问是否可以得到两个CSS样式表同时设置效果呢?  1.完成教学案例中的两个网页中的文字和边框CSS样式设置，并进行套用。 2.设计名为. bbb的CSS样式，为标题文字设计为红色，字体：特大，粗体，,下划线，并对”红茶”和”绿茶”网页的标题进行套用。 3.教师检查实验作业,找一位同学操作，并总结。 实验步骤： 4.设置边框css边框,.ddd样式表设置对话框 有个提高设置练习，请问如何设置网页中标题的样式表设置？ 设置完成的网页效果图一: 设置完成的网页效果图二: * * 两个网页特点:工整,美观易于阅读 这组网页比前一组网页明显就显得字体混乱,版面不易阅读 CSS在DM有后台语言,但在前台设计中该如何去设置呢? 第二节 CSS设置方法 CSS样式的分类 在对话框中设置文字CSS样式 在DM中选择文字，进行套用，得到效果，看第九页幻灯片。 进入下一页 在对话框中设置边框CSS样式 在DM中选择文字，进行套用，得到效果，看第九页幻灯片。 打开另一个文件 绿茶.HTML，导入 CSS文件abc.css，然后在绿茶文件中套用即可得到统一样式的网页文件 设置打印分页符和各种滤镜视觉效果 扩展 用于精确控制元素的位置，包含十四个属性 定位 设置列表的风格，包含三个属性 列表 定义元素周围边框的样式，包含十二个属性 边框 控制元素在页面上的放置方式，包含十二个属性 方框 控制区块中内容的间距，对齐方式和缩进，包含七个属性 区块 设置网页元素的背景颜色或图象的样式，包含六个属性 背景 用于定义网页中文本的字体、颜色、风格等，包含九个属性 类型 功能 类别 扩展 定位 列表 边框 方框 区块 背景 类型 进入下一页 小结： Abc.css是样式表文件 .ccc样式表 .ddd样式表 图例： 提高概念： 学生实验： 1.新建一个CSS样式文件abc.css 2.在样式文件中又新建两个样式表，为.ccc 和.ddd 3.设置文字CSS 文字.CCC样式表设置框 5.设计名为. bbb的CSS样式表，保存在abc.css中，设置参数为：红色，字体：特大，粗体，,下划线，对”红茶”和”绿茶”网页的标题进行套用，效果如后面两幻灯片图。 *