网页制作第五讲(张静).ppt

第五章CSS样式表 一 制作贵美 商品分类 版块制作背景为圆角矩形的效果 本章任务 掌握CSS的基本语法使用文本和字体样式美化网页使用背景样式美化网页 本章目标 样式表能实现内容与样式的分离 方便团队开发cssgarden 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 为什么使用CSS样式表3 1 样式复用 方便网站的后期维护 为什么使用CSS样式表3 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 family 隶书 家用电器 标签选择器 用于修饰同类HTML标签的共性风格 选择器的分类3 1 blue color blue 家用电器各类书籍手机数码日用百货 如果希望部分li标签采用其他样式 怎么办 类选择器 class 定义样式 注意类名有点号 选择器的分类3 2 应用类样式 其他元素也可以使用 menu width 200px background ccc font bold14px宋体 家用电器 ID选择器 选择器的分类3 3 如果希望控制某个DIV块样式 并且要求块元素唯一 怎么办 需求说明 使用各类CSS选择器 实现如下的页面美化效果 练习 CSS选择器 完成时间 25分钟 div块 总宽度200px 背景灰色 ccc 商品类别 字体为橘色 ff7300 粗体 大小为14px 其余商品 字体大小为12px div ul li组织结构 行距 对齐等 line height 行高 text align 对齐 letter spacing 字符间距 text decoration 文本修饰 white space 空白处理 文本属性2 1 字符间距 5px文本修饰 带下划线空白处理 不断行 字体 字号 font 缩写形式 font weight 粗细 font size 大小 font family 字体 字体 宋体颜色 红色字号 12px对齐 左对齐 所有的默认样式 字体 字号 宋体 12px对齐方式 左对齐行高 28px 首行标题样式 字符间距 5px空白处理 不换行文本修饰 带下滑线 大字体样式 字号 16px颜色 红色 所有的默认样式 字体 字号 宋体 12px对齐方式 左对齐行高 28px 文本属性2 2 li font 12px宋体 text align left line height 28px title letter spacing 5px white space nowrap text decoration underline bigFont font size 16px color red 所有的默认样式 字体 字号 宋体 12px对齐方式 左对齐行高 28px 首行标题样式 字符间距 5px空白处理 不换行文本修饰 带下滑线 大字体样式 字号 16px颜色 红色 font字体样式的缩写形式 背景属性2 1 背景属性 background 缩写形式 background color 背景色 background image 背景图 background repeat 背景图重复方式 background position 位置坐标 偏移量 四类平铺效果 背景属性2 2 div background url images bg jpg no repeat background position 70px 60px 背景出现的水平和垂直位置坐标 实现各种拍偏移效果 设置背景图片 不重复平铺 各种偏移效果 图标截取 背景偏移量技术 背景属性的经典应用3 1 利用background position的坐标偏移量 从同一张背景图中截取菜单图标 背景属性的经典应用3 2 1 设置三个标签 如div 的背景为同一图片背景 2 考虑 购物车 帮助中心 图标的坐标偏移量是多少 3 考虑 登录 图标的坐偏移量是多少 Y X O 0 0 背景属性的经典应用3 3 div width 80px background url images icon gif no repeat help background position 80px0px login width 40px background position 0px 20px 购帮助中心登录 所有IDV标签设置为同一背景图 等宽 分别设置各图标的坐标偏移量 列表属性2 1 列表 li 常用属性list style 列表风格 list style属性规定的列表风格 列表属性2 2 列表属性的典型应用 导航菜单 li width 150px color red font 28px隶书 list style none float left 购物车 设置列表为none去掉圆点 所有html标签都有的float浮动属性 此处用于横向排列 CSS样式的设置思路 CSS的基本语法是什么 有哪三类选择器 常用的文本属性有哪些 常用的背景属性有哪些 经典应用是什么 常用的列表属性有哪些 经典应用是什么 总结 需求说明 根据提供的素材 修饰上一练习 贵美分类 练习 修