第5讲网页设计基础之样式控制(一).ppt.pptVIP

* * 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、注意背景色在背景图的后面 * 商品类目的内容不要求。 * 第5讲网页设计基础之样式控制（一） 预习检查 什么是CSS？使用CSS有何好处？ 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 如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？ 演示案例3：ID选择器 练习——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 文本修饰