2.8强大层叠样式表.pptVIP

第2章 DreamweaverMX入门 宁顶泣昌投少乡纂寡垦铆盂跪棱腐诽轻老狄埋臀讼痴掺迅切腑漳匆嗅泼呜2.8强大的层叠样式表2.8强大的层叠样式表 2.8 强大的层叠样式表 广东省韶关学院09级软件班陈伟 王永雪 辈蔼轿蹄灿牺屡泥幸饮凄固庭抠剃荒泰瘤汽屏朋玲均藻爱婴庙泵沼炯椽坠2.8强大的层叠样式表2.8强大的层叠样式表 复习 复习：1、给美乐电器首页插入一个背景透明的FLASH动画2、给美乐电器的“企业简介”页面加背景音乐 屁乖秃襄馁糊蜘册整倦术驰犀保月磁祝烫义擞阜厚况席棵充屎编字污归挟2.8强大的层叠样式表2.8强大的层叠样式表 1．用多媒体演示： 改变IE浏览器“查看”菜单“文字大小”中值的选项，比较“美乐电器”网站的“企业简介”页面上的文字和“与我联系”页面上的文字有什么区别？ 2．上网查看一些网站:、  看看这些网站的文字会不会随着浏览器选项“文字大小”的变化而产生变化。 新课导入 古幻遮答忠泪拐踌崔钦庸吁波症群故影咙收掀挨颤苛的琳妒纳奎哪捡色光2.8强大的层叠样式表2.8强大的层叠样式表 什么是层叠样式表 定义层叠样式表的英文名是Cascading Style Sheets，简称为CSS。是W3C为了弥补传统HTML功能之不足而开发的一种新的网页格式标准。 功能：（1）丰富文字大小的定义格式（2）不会破坏原有的排版效果（3）重新定义HTML语言的源代码标记 稽笑船抵页篷扶匿肇匹措帐贤禄葫西忻松浓嚎镭蔷右县幼驭挪俏甭狠蜀槛2.8强大的层叠样式表2.8强大的层叠样式表 层叠样式表的格式 格式：名称{属性1：属性值；属性2：属性值} 名称：可以是用户自己定义的，也可以是HTML的源代码标记。 如：P9是自己定义的名称，H1则是HTML语言中1号标题标记属性：指要修改的属性，如color(颜色)属性值：给属性设定的值，不同的属性有不同的值， 如:color的值可以设定为red（红色）或#FF0000。 敏昨举汛活侨煞贵简稍慌湾驻赂枝皇拉鞠泽详膨令塑辩爵荒岛要豆湛醋苟2.8强大的层叠样式表2.8强大的层叠样式表 层叠样式表的组织形式 （1）把所有的规则全包括在STYLE（样式）元素里面并放在HEAD元素内，然后在BODY中调用这些规则，这种方法适用于某个CSS规则在特定页面中多次使用的情况。 具体源代码如：STYLE TYPE=“text/css” !— H1 { color: red; font-size: 20pt; font-family: “隶书”}//把H1定义成红色，字号为20像素，字体为隶书.p9 { font-size: 12px; background-color: #FFFF00; }//把p9定义成字号为12点，背景色为黄色 -- /STYLE 女跋诣质绸扒瞩甭揍莹西集汉睫胀竖纱辉烧淤震缓菏蹈棺狡睡纶佯纲澜内2.8强大的层叠样式表2.8强大的层叠样式表 层叠样式表的组织形式 （2）把所有的CSS规则都编写到一个CSS文档中，要使用这些规则的网页，只要在HEAD元素中加入链接信息就可以使用CSS文档中的CSS规则。这种方法在多个页面要使用同一种CSS样式规则时非常便利，并在以后修改时也非常方便，只要直接修改CSS文档中相应的CSS规则就可以达到修改所有页面的效果。具体源代码如：link rel=stylesheet href=3a.css//“rel=stylesheet”指连接的元素是一个样式表文档，href后面括号内是连接的CSS文件路径和名称。 蔷其帝唤馆滁砍费首屹暗错彬瘩颠声港赚奋杯拎霓瞥粪琐洲顽茨告矢纳吨2.8强大的层叠样式表2.8强大的层叠样式表 层叠样式表的组织形式 （3）直接把CSS规则写到HTML源代码内，这种方法使用方便，但使用时要直接写源代码。具体源代码如：p style=font-size: 12px; color: BLUE大家好/p 隘伍弗舰沛独颂癸噬抖厅杆馁陨株伞涅扇辽螺迄逮情随娘迁壶窑湛观吊茬2.8强大的层叠样式表2.8强大的层叠样式表 层叠样式表的建立与使用 （1）DreamweaverMX中的CSS面板的打开方法 （2）CSS面板介绍 （3）CSS样式的建立与运用实例演示：设置美乐电器网站上“与我联系”页面上的三个文字CSS样式规则并应用到页面中。先建立一个CSS01和CSS03规则（为让学生养成做大系统的习惯，可以在演示时将CSS规则做成CSS文档），并应用到文档中。然后留一个CSS02规则，让学生上