3-2--css-2研讨.ppt

CSS 为什么需要CSS HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 css实现内容和样式的分离，方便开发、维护 易于对页面实现精确的控制 常用样式属性分类 文本属性 背景属性 边框属性 边界属性 填充属性 浮动属性 列表属性 定位属性 超链接-伪类样式 如果希望部分li标签采用其他样式，怎么办？ 如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？ CSS组合设置 前述的三种样式可以组合 div#head:id是head的div。。。 多种样式可以通过‘,’并列 h1,h2,h3,#head:h1,h2,h3,和id是head的元素… 后代 div a:div中的a 标签 .myc #m:class是myc中的id是m的元素 类样式可累加 Class=“c1 c2” 各类样式有继承 各类样式的优先级 浏览器默认设置 外部样式表文件 内部样式表 行内样式表 标签选择器 类选择器 ID选择器 样式的优先级3-2 “日用百货”链接 样式的优先级3-3 购物车的样式 列表属性 列表（li）常用属性 list-style （列表风格） 练习——CSS选择器 需求说明： 使用各类CSS选择器，实现如下的页面美化效果 css中的盒子模型 盒子模型 元素内容 填充（也称内边距） 边框 边界（也称外边距） 盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向 可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left border属性 border-color border-width border-style padding属性 padding padding-top padding-right padding-bottom padding-left 元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度 练习——DIV+CSS布局 重新实现DIV+CSS布局 超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式 超链接伪类样式 超链接伪类样式 浮动属性 如何解决中间两块布局无法同行显示的问题 练习——修饰贵美商品分类 需求说明： 根据提供的素材，修饰上一练习：贵美分类 定位 Left:元素到父元素左边的距离 Top Right Bottom Position属性：对象的定位方式 采用父元素相对定位，子元素绝对定位的方式，就可以在父元素内任意定位子元素 显示 对象是否及如何显示 Block:块状显示 Inline:行显示 None:不显示 CSS的兼容问题 不同的浏览器、不同的版本对css解释有差异 兼容的实现参考相关文献 总结 css对网页进行美化，是必不可少的 css美化主要从如下方面着手 背景 文字 边框 浮动 内部元素的修饰 元素间距 …… 什么是float浮动属性4-2 浮动的三大显著特征 1.DIV块元素失去“块状”换行显示特征，变为行内元素 什么是float浮动属性4-3 浮动的三大显著特征 2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示 什么是float浮动属性4-4 浮动的三大显著特征 3.占据行内元素的空间，导致行内元素围绕显示 为什么需要clear区隔属性 第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？ 如何实现第3块换行显示？ 什么是clear清除属性 clear作用 如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效 clear属性的取值 right left both none 欢迎词：字符间距5px并带下划线 商品分类：带背景、无列表符号、左浮动 顶边距可以使用一个空ul，设置高度为15px 完成时间：20分钟 在最后一个声明后面加上一个分号 提一下CSS编码规范： 1）代码都小写 2）可以添加注释说明：同C#,单行//，多行/*......*/ 类样式可以叠加 规定块的样式，一般和DIV标签配对使用 1、font为缩写形式，又细分为font-weight、 font-size、 font-family 2、不断行：指一行内容较多，浏览器默认会换行显示。如设置为不断行，则超过一行时也不断行。例如：本例新闻标题的链接，因从数据库读出，布