第03章：CSS幻灯片.pptVIP

3.7 定位 z-index:[number]； 定位层级 a、定位元素默认后者层级高于前者； * * * CSS 第3章 CSS CSS简介 CSS选择器 框模型 常见样式 注意事项 浮动 定位 * 3.1 CSS简介 CSS Cascading Style Sheets 层叠样式表 定义如何显示HTML元素 表现与内容分离 HTML 定义文档的内容 样式表可以应用到多个HTML文件中 * 3.1 CSS简介 * HTML head body title h1 p p em table caption tr td 页面 3.1 CSS简介 CSS规则 selector {declaration1; declaration2; ... declarationN } Selector：需要改变样式的HTML元素 Declaration=属性：值 * 页面 3.1 CSS简介 创建样式表 内联样式：表现和内容结合 内部样式表 外部样式表 * head style type=text/css hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(images/back40.gif);} /style /head p style=color: sienna; margin-left: 20px This is a paragraph /p head link rel=stylesheet type=text/css href=mystyle.css / /head 第3章 CSS CSS简介 CSS选择器 框模型 常见样式 注意事项 浮动 定位 * 3.2 CSS选择器 继承 子元素继承父元素的特性 根据在HTML中的位置层次关系决定 选择器 上下文选择器 依据元素在其位置的上下文关系来定义样式 类选择器 类选择器以“.”号定义。如.center 几个内容属于同一类，给这一类施加规则 派生选择器 : td .center ：类名为center 的单元格将按照所定义的规则显示 .center td：类名为center的更大元素内的单元格将按照所定义的规则 * 页面 3.2 CSS选择器 id选择器 id选择器以“#”号定义。如#red 对id为red施加规则 派生选择器 : td #red：id名为red 的单元格将按照所定义的规则显示 #red td：id名为red的更大元素内的单元格将按照所定义的规则显示 群选择器 h1,p { color: green; } 基础选择符的优先级 类型 class id style(行间) js * 第3章 CSS CSS简介 CSS选择器 框模型 常见样式 注意事项 浮动 定位 * 3.3 框模型 框模型：一切皆为框！ * 3.3 框模型 大小 = border + padding + width/height 宽度 = 左border+左padding+width+右padding +右border 高度 = 上border+上padding+height+下padding+下border * 3.3 框模型 border 边框 border-width 边框宽度 border-style 边框样式 border-color 边框颜色 边框样式： solid 实线 dashed 虚线 dotted 点线（IE6不兼容） * 3.3 框模型 margin 外边距 外边距的问题： 1、上下外边距会叠压； 2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距） 外边距复合：margin: top right bottom left; * 3.3 框模型 padding 内边距 padding-top 上边内边距 padding-right 右边内边距 padding-bottom 下边内边距 padding-left 左边内边距 padding: top right bottom left; 注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。 * 第3章 CSS CSS简介 CSS选择器 框模型 常见样式 注意事项 浮动 定位 * 3.4 常见样式 结构样式： width 宽度 height 高度 background 背景 bo