搜索
1CSS样式表（一）第五章2回顾与作业点评•frameset框架的基本语法？•如何设置target属性，实现产品介绍的框架页效果？•iframe框架的基本语法？3预习检查•什么是CSS？使用CSS有何好处？•CSS的基本语法是什么？•选择器分为哪几类？4本章任务•制作贵美“商品分类”版块•制作背景为圆角矩形的效果5本章目标•掌握CSS的基本语法•使用文本和字体样式美化网页•使用背景样式美化网页6•样式表能实现内容与样式的分离，方便团队开发cssgarden程序员写代码美工做样式内容与样式和谐统一的完整网页为什么使用CSS样式表3-1演示示例：cssgarden7•样式复用、方便网站的后期维护为什么使用CSS样式表3-2同一网站共用同一样式，确保网站统一的风格8•页面的精确控制，实现精美、复杂页面为什么使用CSS样式表3-39CSS的用途1、外观美化2、布局、定位10headstyletype=text/css选择器（即修饰对象）{对象的属性1:属性值1;对象的属性2:属性值2;}/style/headstyle标签声明标签内为CSS多条样式规则1.多个属性间用分号分隔2.用冒号声明对应属性值li{color:red;font-size:30px;font-family:隶书;}选择器样式规则CSS基本语法11•标签选择器styletype=text/cssli{color:red;font-size:28px;font-family:隶书;}/style……divulli家用电器/li……/ul/div标签选择器：用于修饰同类HTML标签的共性风格选择器的分类3-1演示案例1：标签选择器12styletype=text/css.blue{color:blue;}……/style……ulliclass=blue家用电器/lili各类书籍/liliclass=blue手机数码/lili日用百货/li/ul……•如果希望部分li标签采用其他样式，怎么办？•类选择器(class)定义样式，注意类名有点号选择器的分类3-2应用类样式，其他元素也可以使用演示案例2：类选择器13style#menu{width:200px;background:#ccc;font:bold14px宋体;}/style……divid=menuulli家用电器/li……/ul/div•ID选择器选择器的分类3-3•如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？演示案例3：ID选择器14练习——CSS选择器•需求说明：–使用各类CSS选择器，实现如下的页面美化效果完成时间：25分钟div块：总宽度200px，背景灰色#ccc商品类别：字体为橘色（#ff7300），粗体，大小为14px其余商品：字体大小为12pxdiv-ul-li组织结构15共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解16•行距、对齐等：–line-height（行高）–text-align（对齐）–letter-spacing（字符间距）–text-decoration（文本修饰）–white-space（空白处理）文本属性2-1字符间距：5px文本修饰：带下划线空白处理：不断行•字体、字号：–font（缩写形式）–font-weight（粗细）–font-size（大小）–font-family（字体）字体：宋体颜色：红色字号：12px对齐：左对齐17文本属性2-2styletylie=text/cssli{font:12px宋体;text-align:left;line-height:28px;}.title{letter-spacing:5px;white-space:nowrap;text-decoration:underline;}.bigFont{font-size:16px;color:red;}/style所有li的默认样式：字体、字号：宋体，12px对齐方式：左对齐行高：28px首行标题样式：字符间距：5px空白处理：不换行文本修饰：带下滑线大字体样式：字号：16px颜色：红色font字体样式的缩写形式演示案例4：文本属性18背景属性2-1•背景属性：–background（缩写形式）–background-color（背景色）–background-image（背景图）–background-repeat（背景图重复方式）–background-position（位置坐标、偏移量）四类平铺效果演示案例5：背景属性19背景属性2-2div{background:url(images/bg.jpg)no-repeat;background-position:-70px-60px}背景出现的水平和垂直位置坐标，实现各种拍偏移效果设置背景图片、不重复平铺各种偏移效果演示案例6：背景的偏移量20•图标截取--背景偏移量技术背景属性的经典应用3-1利用background-position的坐标偏移量，从同一张背景图中截取菜单图标21背景属性的经典应用3-21.设置三个标签（如div）的背景为同一图片背景2.考虑“购物车”、“帮助中心”图标的坐标偏移量是多少？3.考虑“登录”图标的坐偏移量是多少？YXO(0,0)22背景属性的经典应用3-3div{width:80px;background:url(images/icon.gif)no-repeat;…}.help{background-position:-80px0px;}.login{width:40px;background-position:0px-20px;…;}/style/headbodydiv购 物 车/divp /pdivclass=help帮助中心/divdivclass=login登录/div所有IDV标签设置为同一背景图、等宽分别设置各图标的坐标偏移量23列表属性2-1•列表（li）常用属性–list-style（列表风格）属性值方式语法实现示例none无风格list-style:none;刷牙洗脸disc实心圆（ul默认类型）list-style:disc;●刷牙●洗脸circle空心圆list-style:circle;○刷牙○洗脸square实心正方形list-style:square;■刷牙■洗脸decimal数字（ol默认类型）list-style:decimal1.刷牙2.洗脸list-style属性规定的列表风格24列表属性2-2•列表属性的典型应用：导航菜单styleli{width:150px;color:red;font:28px隶书;list-style:none;float:left;}/style……ulli购物车/li……/ul设置列表为none去掉圆点所有html标签都有的float浮动属性，此处用于横向排列演示案例7：列表属性25练习——修饰贵美商品分类•需求说明：–根据提供的素材，修饰上一练习：贵美分类欢迎词：字符间距5px并带下划线商品分类：带背景、无列表符号、左浮动顶边距可以使用一个空ul，设置高度为15px完成时间：20分钟26练习——制作圆角矩形•需求说明：–根据提供的背景素材实现完成时间：25分钟顶部中部底部27总结•什么是盒子模型？CSS样式的设置思路？•CSS的基本语法是什么？有哪三类选择器？•常用的文本属性有哪些？•常用的背景属性有哪些？经典应用是什么？•常用的列表属性有哪些？经典应用是什么？28作业•本章内容掌握情况–XXX（描述学生对本章内容的掌握情况）•课后作业–必做•教员备课时在此添加内容–选做•教员备课时在此添加内容–提交时间：xxx–提交形式(纸质or电子)–作业情况：XXX（抽查情况）