《网页设计与制作》第5章课件.ppt

需求说明： 根据提供的素材，修饰上一练习：贵美分类 练习——修饰贵美商品分类 欢迎词：字符间距5px并带下划线 商品分类：带背景、无列表符号、左浮动 顶边距可以使用一个空ul，设置高度为15px 完成时间：20分钟 需求说明： 根据提供的背景素材实现 练习——制作圆角矩形 完成时间：25分钟 顶部 中部 底部 * 1）最主要的原因：样式表可以实现内容与样式的分离 说明有哪些好处 2）w3c推荐的做法 内容和样式的分离 内容和行为的分离 说明：JavaScript脚本语言将在第二学期相关课程详细介绍 * * 提一下CSS编码规范： 1）代码都小写 2）可以添加注释说明：同C#,单行//，多行/*......*/ * 规定块的样式，一般和DIV标签配对使用 * * 1、font为缩写形式，又细分为font-weight、 font-size、 font-family 2、不断行：指一行内容较多，浏览器默认会换行显示。如设置为不断行，则超过一行时也不断行。例如：本例新闻标题的链接，因从数据库读出，布置新闻标题有多长。为了页面美观起见，可以规定新闻标题不断行，及时超过一行也不换行显示。 行高：line-heigth还有一功能，它规定行高后，可以是本行内容垂直居中。 * 注意font字体样式的缩写形式： font:粗细 大小/行高 字体;” 示例4的相关代码可合并为：“font:12px/28px 宋体;”。 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 2、注意背景色在背景图的后面 * * 分别提问：购物车、帮助中心、登录图标的坐标偏移量是多少？ 强调：页面坐标左上角坐标为（0，0），如背景图左移，即背景图的原点坐标往左移动了，所以左移为负数。同理右移为正数。 * 分别提问：购物车、帮助中心、登录图标的坐标偏移量是多少？ * 2、注意背景色在背景图的后面 * 商品类目的内容不要求。 * 第五章 CSS样式表（一） 制作贵美“商品分类”版块 制作背景为圆角矩形的效果 本章任务 掌握CSS的基本语法 使用文本和字体样式美化网页 使用背景样式美化网页 本章目标 样式表能实现内容与样式的分离，方便团队开发 css garden / 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 为什么使用CSS样式表3-1 演示示例：css garden 样式复用、方便网站的后期维护 为什么使用CSS样式表3-2 同一网站共用同一样式，确保网站统一的风格 页面的精确控制，实现精美、复杂页面 为什么使用CSS样式表3-3 CSS的用途 1、外观美化 2、布局、定位 head style type=text/css 选择器（即修饰对象）{ 对象的属性1: 属性值1; 对象的属性2: 属性值2; } /style /head style标签声明标签内为CSS 多条样式规则 1.多个属性间用分号分隔 2.用冒号声明对应属性值 li { color: red; font-size: 30px; font-family: 隶书; } 选择器 样式规则 CSS基本语法 标签选择器 style type=text/css li{ color:red; font-size:28px; font-family:隶书; } /style … … div ul li家用电器/li … … /ul /div 标签选择器：用于修饰同类HTML标签的共性风格 选择器的分类3-1 演示案例1：标签选择器 style type=text/css .blue{color:blue;} …… /style …… ul li class=blue家用电器/li li各类书籍/li li class=blue手机数码/li li日用百货/li /ul …… 如果希望部分li标签采用其他样式，怎么办？ 类选择器(class) 定义样式，注意类名有点号 选择器的分类3-2 应用类样式，其他元素也可以使用 演示案例2：类选择器 style #menu{ width:200px; background:#ccc; font:bold 14px 宋体; } /style … … div id=menu ul li家用电器/li …… /ul /div ID选择器 选择器的分类3-3 如果希望控制