WEB 开发-CSS.pptVIP

WEB开发——css CSS 基础 —— 简介 CSS 基础 —— 基本语法 CSS 基础 ——位置 CSS 基础 ——选择器 CSS 基础 ——选择器 CSS 基础 ——选择器 CSS 基础 ——选择器 CSS 基础 ——继承 CSS 基础 ——层叠 CSS 基础 ——特殊性（优先级） CSS 基础 ——特殊性（优先级） CSS 基础 ——属性 CSS 基础 ——属性 CSS 基础 ——属性 CSS 基础 ——属性 CSS 基础 ——属性 CSS 基础 ——属性值 CSS 基础 ——属性值 CSS 基础 ——属性值 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 盒模型 CSS 基础 —— 格式化排版 CSS 基础 —— 格式化排版 CSS 基础 —— 格式化排版 CSS 基础 —— 格式化排版 CSS 基础 —— 格式化排版 CSS 基础 —— 图文混排 CSS 基础 —— 图文混排 CSS 基础 —— 布局模型 CSS 基础 —— 浏览器兼容 CSS 基础 —— 作业 5.边框 每个元素有4个方向上的边框，针对边框有宽度、颜色、样式3个属性。 4个方向：left、right、top、bottom 3个属性：width、color、style 属性格式：border[-方向][-样式] 例如：border、border-width、border-left、border-left-width 定义方式： 1）单独定义： 每个属性单独设置，针对属性：border[-方向]-样式 例如：border-width:1px; border-top-width:1px; 5.边框-定义方式 2）集中定义： 将某个边框的3个属性就行集中设置 针对属性：border[-方向] 设置格式：border[-方向]:颜色 宽度 样式； //三者顺序不要求 例如：border:1px solid #f00; border-top:#f00 solid 1px; 边框宽度 边框颜色 边框样式 5.边框-3属性 1）宽度 使用关键字：thin、medium、thick 使用数值+单位：1px; (推荐) 2）颜色 见颜色属性取值 3）样式 取值：none（默认） | dotted | dashed | solid 注： 当样式设为 none时，定义的宽度自动清0 内联元素边框 1）上下边框 高度不影响行高，不受段落和行高的约束；上边框遮挡内容，且可能超出段落边框。 示例 2）左右边框 挤占左右相邻文本的位置，而不会覆盖左右侧文本；左右边框不断行显示。 示例 6.边界 1）系列属性： margin、margin-top、margin-right、margin-bottom、margin-left 2）定义方式： ①分别定义四个方向的边界 margin-top:1px; ②集中定义 margin:20px; /*四个边界都是20px*/ margin:2px 3px 4px 5px; /*上:2px，右:3px；下:4px；左:5px*/ margin: 10px 15px; /*上、下 10px；右、左 15px；*/ 6.边界 3）边界值 取值：auto （默认）| 百分比 | 数值+单位（可负值） 示例 4）内联元素边界 上下边界： 不改变行高； 左右边界： 挤占左右相邻文本的位置，边界不会断行显示。 示例 7.补白 1）系列属性 padding、padding-top、padding-right、padding-bottom、padding-left 2）定义方式 单独定义、集中定义 与边界相同 3）补白值 数值+单位（不能为负值） | 百分数 注： 1）补白是透明的，补白出显示背景颜色。 2）内联元素尽量少使用该属性，尤其上下补白。 示例 8.浏览器兼容 所涉及的6个基本属性：width、height、margin、border、padding、background，在不同的浏览器下这些属性解析存在差异。