《网页设计与制作》第5章

1、第五章 制作贵美“商品分类”版块 制作背景为圆角矩形的效果 本章任务 掌握CSS的基本语法 使用文本和字体样式美化网页 使用背景样式美化网页 本章目标 样式表能实现内容与样式的分离，方便团队开发 css garden http:/ 程序员程序员 写代码写代码 美工做样式美工做样式 内容与样式和谐内容与样式和谐 统一的完整网页统一的完整网页 为什么使用CSS样式表3-1 演示示例：演示示例：css garden 样式复用、方便网站的后期维护 为什么使用CSS样式表3-2 同一网站共用同同一网站共用同 一样式，确保网一样式，确保网 站统一的风格站统一的风格 页面的精确控制，实现精美、复杂页面 为什

2、么使用CSS样式表3-3 CSS的用途 1、外观美化 2、布局、定位 选择器选择器（即修饰对象）（即修饰对象） 对象的属性对象的属性1: 属性值属性值1; 对象的属性对象的属性2: 属性值属性值2; 标签声明标签内为标签声明标签内为 CSS 多条样式规则多条样式规则 1.多个属性间用分号分隔多个属性间用分号分隔 2.用冒号声明对应属性值用冒号声明对应属性值 li color: red; font-size: 30px; font-family: 隶书隶书; 选择器选择器 样式规则样式规则 CSS基本语法 标签选择器标签选择器 li color:red; font-size:28px; font

3、-family:隶书隶书; 家用电器家用电器 标签选择器：用于修饰同标签选择器：用于修饰同 类类HTML标签的共性风格标签的共性风格 选择器的分类3-1 演示案例演示案例1：标签选择器：标签选择器 .bluecolor:blue; 家用电器家用电器 各类书籍各类书籍 手机数码手机数码 日用百货日用百货 如果希望部分li标签采用其他样式，怎么办？ 类选择器类选择器(class) 定义样式，注意定义样式，注意 类名有点号类名有点号 选择器的分类3-2 应用类样式，应用类样式， 其他元素也可其他元素也可 以使用以使用 演示案例演示案例2：类选择器：类选择器 #menu width:200px; ba

4、ckground:#ccc; font:bold 14px 宋体宋体; 家用电器家用电器 ID选择器选择器 选择器的分类3-3 如果希望控制某个DIV块样式，并且要求块元素唯一，怎 么办？ 演示案例演示案例3：ID选择器选择器 需求说明： 使用各类CSS选择器，实现如下的页面美化效果 练习CSS选择器 完成时间：完成时间：25分钟分钟 div块：块：总宽度总宽度 200px，背景灰，背景灰 色色#ccc 商品类别：字体为橘商品类别：字体为橘 色（色（#ff7300），粗），粗 体，大小为体，大小为14px 其余商品：其余商品： 字体大字体大 小为小为12px div-ul-li组织结构组织结构

5、 行距、对齐等：行距、对齐等： line-height （行高）（行高） text-align （对齐）（对齐） letter-spacing （字符间距）（字符间距） text-decoration （文本修饰文本修饰 ） white-space （空白处理空白处理 ） 文本属性2-1 字符间距：字符间距：5px 文本修饰：带下划线文本修饰：带下划线 空白处理：不断行空白处理：不断行 字体、字号：字体、字号： font（缩写形式）（缩写形式） font-weight（粗细）（粗细） font-size（大小）（大小） font-family（字体）（字体） 字体：宋体字体：宋体 颜色：红色颜

6、色：红色 字号：字号：12px 对齐：左对齐对齐：左对齐 所有所有的默认样式：的默认样式： 字体、字号：宋体，字体、字号：宋体，12px 对齐方式：左对齐对齐方式：左对齐 行高：行高：28px 首行标题样式：首行标题样式： 字符间距：字符间距：5px 空白处理：不换行空白处理：不换行 文本修饰：带下滑线文本修饰：带下滑线 大字体样式：大字体样式： 字号：字号：16px 颜色：红色颜色：红色 所有所有的默认样式：的默认样式： 字体、字号：宋体，字体、字号：宋体，12px 对齐方式：左对齐对齐方式：左对齐 行高：行高：28px 文本属性2-2 li font: 12px 宋体宋体; text-al

7、ign:left; line-height:28px; .title letter-spacing:5px; white-space:nowrap; text-decoration:underline; .bigFont font-size:16px; color:red; 所有所有的默认样式：的默认样式： 字体、字号：宋体，字体、字号：宋体，12px 对齐方式：左对齐对齐方式：左对齐 行高：行高：28px 首行标题样式：首行标题样式： 字符间距：字符间距：5px 空白处理：不换行空白处理：不换行 文本修饰：带下滑线文本修饰：带下滑线 大字体样式：大字体样式： 字号：字号：16px 颜色：红色

8、颜色：红色 font字体样式的字体样式的 缩写形式缩写形式 演示案例演示案例4：文本属性：文本属性 背景属性2-1 背景属性：背景属性： background （缩写形式）（缩写形式） background-color（背景色背景色 ） background-image（背景图背景图 ） background-repeat（背景图重复方式背景图重复方式 ） background-position（位置坐标、偏移量）位置坐标、偏移量） 四类平铺四类平铺 效果效果 演示案例演示案例5：背景属性：背景属性 背景属性2-2 div background:url(images/bg.jpg) no-re

9、peat; background-position: -70px -60px 背景出现的水平和垂背景出现的水平和垂 直位置坐标，实现各直位置坐标，实现各 种拍偏移效果种拍偏移效果 设置背景图片、不设置背景图片、不 重复平铺重复平铺 各种偏移各种偏移 效果效果 演示案例演示案例6：背景的偏移量：背景的偏移量 图标截取图标截取-背景偏移量技术背景偏移量技术 背景属性的经典应用背景属性的经典应用3-1 利用利用background- position的坐标偏移量，的坐标偏移量， 从同一张背景图中截取从同一张背景图中截取 菜单图标菜单图标 背景属性的经典应用背景属性的经典应用3-2 1 .设置三个标签

10、（如设置三个标签（如div）的）的 背景为同一图片背景背景为同一图片背景 2 .考虑考虑“购物车购物车”、 “帮助中心帮助中心”图标的坐图标的坐 标偏移量是多少？标偏移量是多少？ 3 .考虑考虑“登录登录”图标的坐图标的坐 偏移量是多少？偏移量是多少？ Y X O(0,0) 背景属性的经典应用背景属性的经典应用3-3 divwidth:80px;background:url(images/icon.gif) no-repeat; .helpbackground-position:-80px 0px; .loginwidth:40px;background-position:0px -20px;

11、 ; 购购物物车车 帮助中心帮助中心 登录登录 所有所有IDV标签设置为同标签设置为同 一背景图、等宽一背景图、等宽 分别设置各图标的分别设置各图标的 坐标偏移量坐标偏移量 列表属性2-1 列表（li）常用属性 list-style （列表风格） 属性值属性值方式方式语法实现语法实现示例示例 none无风格无风格list-style:none; 刷牙刷牙 洗脸洗脸 disc 实心圆（实心圆（默默 认类型）认类型） list-style:disc; 刷牙刷牙 洗脸洗脸 circle空心圆空心圆list-style:circle; 刷牙刷牙 洗脸洗脸 square实心正方形实心正方形list-st

12、yle:square; 刷牙刷牙 洗脸洗脸 decimal 数字（数字（默认默认 类型）类型） list- style:decimal 1. 刷牙刷牙 2. 洗脸洗脸 list-style属性规定的属性规定的 列表风格列表风格 列表属性2-2 列表属性的典型应用：导航菜单列表属性的典型应用：导航菜单 li width:150px; color:red; font:28px 隶书隶书; list-style:none; float:left; 购物车购物车 设置列表为设置列表为none去掉去掉 圆点圆点 所有所有html标签都有的标签都有的float浮动属性，浮动属性， 此处用于横向排列此处用于横向排列 演示案例演示案例7：列表属性：列表属性 CSS样式的设置思路？ CSS的基本语法是什么？有哪三类选择器？ 常用的文本属性有哪些？ 常用的背景属性有哪些？经典应用是什么？ 常用的列表属性有哪些？经典应用是什么？ 总结 需求说明： 根据提供的素材，修饰上一练习：贵美分类 练习