《CSS终极》PPT课件.pptVIP

层叠样式表层叠样式表（CSSCSS） 思 考 题 使用学习过的知识实现如下网页效果： 将table中的所有单元格的文字颜色都设置为blue。 单元格1 单元格2 单元格3 单元格4 单元格1 单元格2 单元格3 单元格4 层叠样式表（CSS） 1 CSS概述 2 为网页添加样式表的方法 3 用CSS定义样式 1 CSS概述 1.1 什么是CSS CSS就是Cascading Style Sheets，中文翻译为“ 层叠样式表” ，他是一项制作网页时专门管理样式的 技术。 （P-175） 作用：控制Web页面外观 例： 新浪网 东北石油大学 1 CSS概述 1.2 CSS的发展史 2009 1998 1997 1994 CSS建议被提出 CSS1作为标准颁布 CSS2标准颁布 CSS3版本颁布 1 CSS概述 1.3 第一个CSS程序 helloCSS.html 1、背景设置为yellow 2、表格居中对齐 3、文字居中对齐 4、表格宽度为700px 5、字号为18px 1 CSS概述 1.4 CSS带来的好处 便于页面风格的统一和修改 CSS htmlhtmlhtmlhtml htmlhtmlhtmlhtmlhtml htmlhtml CSS1 CSS1的文件路径 1 CSS概述 1.3使用CSS带来的好处 2、表现和内容相分离 套用CSS样 式文件 1 CSS概述 1.4 CSS带来的好处 CSS+div布局模式提高页面浏览速度 页面加载中。 2 为网页添加样式表的方法 2.1 将CSS引入HTML页的4种法 1、内嵌样式 混合在HTML标记里使用，对每个元素单独定义样式 语法： 标签内容 例： 内嵌样式示例 2 为网页添加样式表的方法 2.1 将CSS引入HTML页的4种法 2、内部样式 在HTML的头部标签与之间添加样式 语法： 例： 规则1 规则2 选择符 属性1：属性值1； 属性2：属性值2； 2 为网页添加样式表的方法 CSS代码 目标元素 table 2 为网页添加样式表的方法 2.1 将CSS引入HTML页的4种法 3、链入外部样式 把样式表保存为一个样式表文件，然后在页面中使 用标签链接到这个CSS文件。 语法： 例： 2 为网页添加样式表的方法 链入CSS文件 目标元素 table 2 为网页添加样式表的方法 2.1 将CSS引入HTML页的4种法 4、导入外部样式 在内部样式表的里导入一个外部样 式表，导入时使用import标签。 语法 ： 例： import “CSS文件URL“; 2 为网页添加样式表的方法 导入CSS文件 目标元素 table 2 为网页添加样式表的方法 2.1 将CSS引入HTML页的4种法 4、导入外部样式 注意 2 为网页添加样式表的方法 2.1 将CSS引入HTML页的4种法 链入外部CSS与导入外部CSS的区别 基本语法区别 应用样式方式区别 2 为网页添加样式表的方法 2.2 四种方法的优先级 3条基本原则 基本原则1：叠加原则 2 为网页添加样式表的方法 2.2 四种方法的优先级 3条基本原则 基本原则2：就近原则 color:green color:black 导入样式 内部样式 2 为网页添加样式表的方法 2.2 四种方法的优先级 3条基本原则 基本原则3：自然顺序原则 1 内嵌样式 链入样式 ch5-demo(3,1) 3 用CSS定义样式 3.1 CSS的定义方法 1、语法：selector property1:value1; property2:value2; ; propertyN:valueN; 即：选择符属性1：值1；属性2：值2； 2、书写规则 属性和值之间用冒号分隔 多个属性之间用分号分隔 每个属性-值对尽量以空格开始 3 用CSS定义样式 3.2 标签选择符 1、语法：标签名 属性：值; 2、例：body background-color:red； divcolor:#3FE5; font-size:9pt; table font-family:“Arial black“; font-weight：bolder; ch5-demo(3,1) 3 用CSS定义样式 3.3 选择符组 1、语法：选择符1，选择符2，选择符3， 属性1：值1； 属性2：值2； 2、例：table,h1,h2,divcolor:red; font-size:12px; td,divbackground-color:#FF3; ch5-demo(3,1) 3 用CSS定义样式 3.4 类选择符 引例：用标签选择符和字体属性实现如下效果：将表 格中的文字设置为红色（red）。 table color:#F00; 标签选择符： 影响页面中的所有 表格 思考： 怎样将相同的标签元素分类定义为不同的样式？ 例如：table1和table2的文字颜色不同？ 类选择符 3 用CSS定义样式 3.4类选择符 1、定义和语法 结合html标签的class属性选择目标元素的选择符 语法： 标签名.className属性：属性值 例：table . tb-student color:red; 标签名 类选择符 html标记class属性 1 2 3 3 用CSS定义样式 3.4 类选择符 2、示例1 p.red color:red; p.blue color:blue; 这里是红色字体的段落 这里是蓝色字体的段落 这个段落不受影响 选择上class属性为red的元素 选择上class属性为blue的元素 3 用CSS定义样式 3.4 类选择符 3、注意： “.”的两侧不能有空格 对没有相应class属性的标签没有影响 不同标签的class属性可以相同，表示同一类 同一标签的class属性允许有多个空格分隔的值，将应用多个 class样式，如下面的段落p将同时应用p.blue和p.red的样式 这里是class为red的字体的段落 3 用CSS定义样式 3.4 类选择符 4、通用类选择符 定义：省略HTML标记的类选择符 语法：.className属性：属性值 例： 3 用CSS定义样式 3.5 ID选择符 1、定义和语法 结合html标签的id属性选择目标元素的选择符 语法：标签名#IDName属性：属性值; 例：table # tb-student color:red; 标签名 id选择符html标记的id属性 3 用CSS定义样式 3.5 ID选择符 2、注意： id属性值是唯一的，与class不同 目标元素是唯一的 #两侧不能有空格 一般用于网页中的“独一无二元素”，如页脚、页眉等 3 用CSS定义样式 3.5 ID选择符 3、示例1： 3 用CSS定义样式 3.5 ID选择符 4、通用ID选择符 定义：省略HTML标记的id选择符 语法：#IDName 属性：属性值 例： 3 用CSS定义样式 3.5 ID选择符 5、ID选择符与类选择符的优先级（IDclass） div#div1 color:red; div.div11 color:blue; div#div1 color:red; div.div11 color:blue!important; 3 用CSS定义样式 练习 1）以下不是CSS选择符的是（ ） a.选择符组 b.标签选择符 c.对象选择符 d.类选择符 2）以下样式能够选择上的目标元素是（ ） p.red color:red; font-familly:宋体; a.文字 b.文字 c.文字 d.文字 3）按照叙述书写出CSS代码。将网页中id属性为tb1的表格以及 class属性为content的元素的文字颜色设置为red。 C b d table#tb1 , .content color:red; 3 用CSS定义样式 3.6 包含选择符 1、定义及语法 用空格表示元素之间的包含关系，实现精确的目标定位 语法：元素1 元素2 属性：属性值； 说明：元素1包含元素2 例： table a font-size:32px; 注意：只要包含关系存在即可，不要求包含的层次嵌套 对单独的table、 a都没有影响 3 用CSS定义样式 3.6 包含选择符 2、示例1 table acolor:red; table.tb1 a color:green; 单元格1 单元格2 单元格1 单元格2 3 用CSS定义样式 3.6 包含选择符 3、注意：包含选择符与组选择符的结合顺序。 例：table#table1 th，td border: red 1px solid; 示例的运行结果如何？ 结论：包含选择符组选择符 2 1 test2.html 3 用CSS定义样式 3.7 子对象选择符 定义：用”表示对象之间的父子关系 语法：父亲对象子对象属性：属性值； 示例： 注意：子对象一定是父对象的第一级（层）包含的元素，对 于嵌套层次为2层以上的子元素没有影响。 diva font-size:20px; 3 用CSS定义样式 3.7 子对象选择符 子对象选择符与包含选择符的区别 语法区别 应用区别 这是一个段落 diva font-size:20px /*不生效*/ div a font-weight:900; /*生效*/ 3 用CSS定义样式 选择符的综合应用 在实际的应用中，可以将多种选择符同时使用达到灵 活控制页面元素样式的效果。 例如： table a table，a div，p ，td.content tr#tr1 td.td2 a .main ul#content 1 2 3 4 5 CSS练习1选择符部分 1、说出下列选择符的名称 a.”.” b.” c.”空格” d.”,” e,”#” 2、对于段落,按照顺序应用如下CSS规则 后，能够将段落文本设置为什么颜色？ p#p1 color:red; p.p2 color:blue; 3、用语言描述如下CSS规则： 1）div ul#ul li font-size:18px; 2)div ol li,ul li font-fimally:”黑体”; 3)div#container pa.a-red background-color:yellow; 4)table.tb1 th,table#tb2 td text-align:center; CSS练习1 选择符部分 4、按照叙述写出CSS规则： 1）网页中所有div中的段落p下的超链接a的文本都设置为 18像素大小。 2) Id为div1的div所包含的ul标签，以及class属性为div2的 div所包含的ol标签的文本颜色设置为blue。 3) Id为p1的段落P的子对象超链接a的文本设置为黑体 4) 所有表格的class属性为green的行下的id属性为red的 单元格下的超链接a，设置为斜体。 CSS练习1 -5、参照以下HTML代码说出如何选择上相应的元素 列表1：项目1 列表1：项目2 列表1： 项目3 列表1：项目4 列表2： 项目1 列表2：项目2 列表2：项目3 列表2：项目4 无序列表项1 嵌套无序列表项1 嵌套无序列表项2 嵌套无序列表项3 无序列表项2 1）选择超链接“列表1：项目1”和“列表1： 项目3” 2）选择类名为li-red的列表项 3）选择“无序列表1”和“无序列表项2” 4）选择“嵌套无序列表项1，2和3” 5）选择id为footer的div下的ol无序列表（不 包括嵌套的ol） 6）选择id为footer的div下的第二层嵌套无 序列表ol。 CSS练习选择符部分 6、实验具体格式要求见后续幻灯片 CSS练习选择符部分 1、控制body的背景图片属性background-image，以及body的 背景滚动属性background-attachment的值为fixed 2、控制div的边框、背景图片、宽度width为700px、在浏览器中 的水平对齐方式为局中margin：auto以及内容文本的水平方 式为居中text-align：center 3、控制标题段落的样式：颜色为blue，字体为华文行楷，字号 为36px，行高为40px，文字粗度为900 4、控制超链接的字号为18px，颜色为green 5、控制表格单元格中的文本为12px，水平居中对齐 CSS练习选择符部分 6、控制表格单元格中的超链接字形font-style为斜体，颜色 为#009，去掉下划线text-decoration：none； 7、控制成绩表格下的th背景色为#F90 8、控制成绩表格偶数行背景色为#FCF 9、控制成绩表格的背景色为#FFC，边框border为#996 3px solid，在div中居中对齐 10、分别控制四个成绩表格的td和th的边框为不同的线型 和颜色 3 用CSS定义样式 3.8 CSS常用属性 1、属性分类 字体属性、文本属性、背景属性、边框属性、表 格属性、列表属性、链接属性、定位属 性、尺寸属 性、布局属性、外补丁属性、内补丁属性、滚动条 属性、打印属性、声音属性、内容属性、其他属性 。 3 用CSS定义样式 3.8 CSS属性 2、字体属性 Color：颜颜色 font-family：字体 font-size：大小 font-style：样样式 font-weight：浓浓淡 line-height：行高 Font：复合字体属性 3.8 CSS常用属性 2、CSS常用字体属性* 1） color：文字颜色 语法：color : color; 例：div color: red; div color: rgb(100,14,200); div color: #345455; 3.8 CSS常用属性 2、 CSS常用字体属性 2）font-family：字体类型 语法： font-family : name; 例：p font-fimaily: “宋体“; div font-family: “隶书“, “华文行楷“; 3.8 CSS常用属性 2、CSS常用字体属性 3）字体大小：font-size 语法：font-size:absolute-size | relative-size | length 例： p font-size: 12px; p font-size: 1.5em ; p font-size: 20%; p font-size: x-large; 说明： absolute-size（绝对大小关键字）：xx-small | x- small | small | medium | large | x-large | xx-large relative-size （相对大小关键字）：larger | smaller length（长度值）：px、pt、em、% ch5-demo(3,4) 3.8 CSS常用属性 2、CSS常用字体属性 3）字体大小：font-size length（长度值）：px、pt、em、% em：相对于父容器中的字体高度的倍数 1.5em 1em 3em %：相对于父容器中字体高度的百分比：50% 3.8 CSS常用属性 2、常用字体属性 4）字体样式：font-style 语法：font-style : normal | italic | oblique 例： 3.8 CSS常用属性 2、常用字体属性 5）字体浓淡：font-weight 语法：font-weight : normal | bold | bolder | lighter | number 例： 说明：number : 100 900 ch5-demo(3,5) 3.8 CSS常用属性 2、常用字体属性 6）文本行高： line-height 语法：line-height : normal | length 例： Length：%，em（相对于对象字体的缩放），px ch5-demo(3,7) 3.8 CSS常用属性 2、常用字体属性 7）复合文本属性：font 语法：font:font-style | font-weight | font-size /line-height | font-familly 例： 注意：1)font-size和font-familly是必须的，位置固定 2)line-height的书写方式 3.8 CSS常用属性 3、 CSS背景属性* background-color：背景颜色 background-image：背景图片 background-repeat：平铺效果 background-attachment：滚动特性 background-position：背景图片位置 background：复合背景属性 图片相关属性 3.8 CSS常用属性 3、 CSS背景属性 1）背景颜色：background-color 语法：background-color : transparent | color 例： ch5-demo(3,9) 3.8 CSS常用属性 3、 CSS背景属性 2）背景图片：background-image 语法：background-image : none | url (url) 例： ch5-demo(3,10) 3.8 CSS常用属性 3、 CSS背景属性 3）背景重复：background-repeat 语法 background-repeat : repeat |no-repeat |repeat-x | repeat-y 例： ch5-demo(3,10) 3.8 CSS常用属性 3、 CSS背景属性 4）滚动特性：background-attachment 语法：background-attachment : scroll | fixed 例： ch5-demo(3,11) 3.8 CSS常用属性 3、 CSS背景属性 5）背景位置：background-position 语法：背景图片相对于容器左上角的位移 background-position:横向position（length）|纵向position(length） 例： ch5-demo(3,11) div background-position： right top ； div background-position： top center； div background-position： center ； div background-position: 50% 50%； div background-position: 30px 100px； 3.8 CSS常用属性 3、 CSS背景属性 5）背景位置：background-position length的值 预定义的关键字：left center right 和 top center bottom 表示背景图片和容器的相对位置 像素数值：表示背景图片左上角相对于容器左上角的相对位移 坐标，以容器左上角为原点（0,0），向左、上移动为负值。 3.8 CSS常用属性 容器div等5）background-position 1：background-position:left top; 2：background-position:right bottom; 3：background-position:left center; 4:：background-position:center center; 容器div等 1 2 容器div等 4 容器div等 3 3.8 CSS常用属性 X Y （0，0） 容器div等 X Y （0，0） 容器div等 5）background-position 1：background-position:0px 0px; 2：background-position:-100px -60px; 3：background-position:20px 20px; 60px 100px X Y （0，0） 容器div等 3.8 CSS常用属性 3、 CSS背景属性 6）复合背景属性：background 语法：background : background-color | background- image | background-repeat | background-attachment |background-position 默认值： 例： transparent none repeat scroll 0% 0% 无顺序要求 3.8 CSS常用属性 CSS背景属性练习 3.8 CSS常用属性 4、CSS文本属性* text-align ：文本水平对齐方式* vertical-align ：垂直对齐方式* text-indent ：文本缩进* text- decoration：文本装饰* letter-spacing ：文字间隔 3.8 CSS常用属性 4、CSS文本属性 text-align ：文本水平对齐方式 vertical-align ：垂直对齐方式 1）该属性定义行内元素相对于该元素所在行的垂直对齐。 2）在表格单元格中，这个属性会设置单元格框中的单元格内容的对齐方式 。 top : 将对象的内容与对象顶端对齐 middle : 将对象的内容与对象中部对齐 bottom : 将对象的文本与对象底端对齐 注意：支持vertical-align属性的元素有td、input、 textarea、img等，div是不支持该属性的 3.8 CSS常用属性 4、CSS文本属性 vertical-align ：垂直对齐方式 注意：支持vertical-align属性的元素有td、input、 textarea、img等，div是不支持该属性的 3.8 CSS常用属性 4、CSS文本属性 text-indent ：文本缩进 div text-indent : 5px; ：数字+像素值 div text-indent : 2em; ：相对与对象内文本的字号 div text-indent : 10%; ：相对于父容器对象宽度值 div text-indent : -2em; ：可以为负值，控制悬挂缩进 正值表示首行缩进，负值表示悬挂缩进 3.8 CSS常用属性 4、CSS文本属性 text- decoration：文本装饰* none : 无装饰 underline : 下划线控制链接a的下划线 line-through : 贯穿线 overline : 上划线 3.8 CSS常用属性 4、CSS文本属性 letter-spacing ：文字间隔 div letter-spacing:6px; div letter-spacing:2em; 不支持百分比 3.8 CSS常用属性 5、CSS列表属性* list-style-type：预设标记 list-style-image：列表项标记图像 语法：list-style-image：url（url） list-style-position：列表项标记位置 inside outside 3.8 CSS常用属性 5、CSS列表属性 list-style：复合属性 语法: list-style : list-style-image | list-style- position | list-style-type li list-style: url(“/1.gif“) inside circle; ol list-style: square; 无顺序要求 3.8 CSS常用属性 CSS列表属性练习 3.8 CSS常用属性 6、表格属性* border-collapse : separate | collapse 参数： separate : 边框独立（标准HTML） collapse : 相邻边被合并 说明： 设置表格的行和单元格的边是合并在一起还是按照 标准的HTML样式分开 3.8 CSS常用属性 6、表格属性 语法： border-spacing : length | length 参数： length : 由浮点数字和单位标识符组成的长度值。不可为负值 说明： 表格边框独立时（border-collapse：separate），单元格边框在横向和 纵向上的间距 一个length值时，这个值将作用于横向和纵向上的间距 两个length值时，第一个作用于横向间距，第二个作用于纵向间距 例： table border-collapse: separate; border-spacing: 10px; 3.8 CSS常用属性 6、表格属性 语法： caption-side : bottom | left |right | top 参数： bottom : 下面 left : 左边 right : 右边 top : 上面 说明： 设置或表格的caption对象是在表格的那一边。它是和caption 对象一起使用的属性。IE6,IE7不支持 3.8 CSS常用属性 各种选择符及字体、背景属性的综合运用。 练习：综合利用各种选择符和背景、文字等属性，制作一个 漂亮的数据表格。运行效果如下： ch5-demo(3,17) 3 用CSS定义样式 3.9 CSS伪类选择符 1、伪类 某些HTML元素具有一些预定义的性质，这些性质与class属性 的功能类似，但这些性质实际上并不对应真正的class属性。 例如：链接标签a 激活状态、悬停状态、未访问过状态、访问过状态 2、伪类选择符 一组基于预定义性质（伪类）的选择符 3.9 CSS伪类和伪对象 3、语法：Selector:pseudo-classproperty:value 4、CSS常用伪类 伪类伪类 名说说明 ：linka元素未访问访问 前 ：visiteda元素被访问过访问过 ：hover鼠标悬标悬 停 ：active被激活的元素 :focus对对象成为输为输 入焦点时时 标签选择符、包含选择符、类选择符、id选择符 a:hovercolor:yellow; div a.a1:linkcolor:red; 1 2 3.9 CSS伪类和伪对象 5、锚的伪类 作用：定义动态链接在4种不同状态下的CSS样式 *顺序：link visited hover active（LoVe HAte） 3.9 CSS伪类和伪对象 5、锚的伪类 作用：定义动态链接在4种不同状态下的CSS样式 *顺序：link visited hover active（LoVe HAte） 3.9 CSS伪类和伪对象 5、锚的伪类 应用：结合其他选择符使用 顺序：link visited hover active（LoVe HAte） 3.9 CSS伪类和伪对象 6、其他元素的伪类 ：hover 可以应用于其他的HTML元素鼠标悬停的效果 ：active 可以应用于其他的HTML元素鼠标悬停的效果 ：focus 可以应用于input元素获取焦点时的效果 input:hover,select:hover/*设置input控件和select控件鼠标悬停时的效果*/ background-color:#9C6; input:focus,select:focus/*设置input控件和select控件成为焦点时的效果*/ background-color:#FF0; input:active,select:active/*设置input控件和select控件鼠标按下时的效果*/ background-color:#F39; p:hovercolor:red; /*设置段落P鼠标悬停时的效果*/ p:activecolor:blue; /*设置段落P激活时的效果*/ 4 CSS+div布局 4.1、盒子模型及其相关属性 字 体 (font) 表 格 （table） 尺寸 （Dimensions） 背 景 (background) 边边 框 (border) 定 位 (position ) 文 本 (text) 内边边距（内补补丁） (padding) 布 局 (layout) 列 表 (list) 外边边距（外补补丁） (margin) 滚动滚动 条 （scrollbar） 4 CSS+div布局 4.1盒子模型及其相关属性 1、盒子模型（框模型） 一切皆为框！div 、p 、h1、ul、li 4 CSS+div布局 4.1 盒子模型及其相关属性 1、盒子模型（框模型） .box width： 300px; height： 200px; padding： 10px; border： 1px solid #000; margin： 15px; 以上的元素总共被计算出来的的尺寸是： Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px *注意：盒子占据的总宽度是“width+padding+border+margin” 4.1 盒子模型及其相关属性 2、相关属性 1）边框 border-style border-width border-color border-top- border-right- border-bottom- border-left- border-top：border-width | border-style | border-color border-top：border-width | border-style | border-color border 属性 border-style是根本，一定要先指定，其他的属性才生效 4.1 盒子模型及其相关属性 2、相关属性 1）边框 border-style : none | hidden | dotted | dashed | solid | double |groove |ridge | inset | outset 例： border-style :dotted solid dashed double; 上、右、下、左 border-style : dotted dashed solid; 上（左右）下 border-style : dashed dotted ; （上下）（左右） border-style :solid; （所有） border-style是根本，一定要先指定，其他的属性才生效 4.1 盒子模型及其相关属性 2、相关属性 1）边框 border-width : medium | thin | thick | length 例：border-width:1px 2px 3px 4px; 上、右、下、左 border-width:1px 2px 3px; 上（左右）下 border-width:1px 2px; （上下）（左右） border-width:1px; （所有） 4.1 盒子模型及其相关属性 2、相关属性 1）边框 border-color : color 例：border-color:red black blue green; 上、右、下、左 border-color:red blue green; 上（左右）下 border-color:red green; （上下）（左右） border-color:green; （所有） 4.1 盒子模型及其相关属性 2、相关属性 1）边框 border : border-width | border-style | border-color border会影响所有边框，类似还有以下用法。 border-top : border-width | border-style | border-color border-right : border-width | border-style | border-color border-bottom : border-width | border-style | border-color border-left : border-width | border-style | border-color border 属性 4.1 盒子模型及其相关属性 2、相关属性 2）内边距 padding语法： padding : length 例： body padding: 20px 35ptx 24px 35px; body padding: 10% 10% 10% 10%; 其他：padding-top padding-right padding-bottom padding-left 上 、右 、下 、左 可以有1个、2个、 3个值的情况，解释 同边框 4.1 盒子模型及其相关属性 2、相关属性 3）外边距 margin语法：margin : auto | length 例：body margin: 0px 35px 24px 35px; 其他： margin-top、 margin-right、 margin-bottom、 margin-left 可以有1个、2个、 3个值的情况，解释 同边框 4.1 盒子模型及其相关属性 2、相关属性 3）外边距 margin语法：margin : auto | length 例：body margin: 0px 35px 24px 35px; 其他： margin-top、 margin-right、 margin-bottom、 margin-left 可以有1个、2个、 3个值的情况，解释 同边框 4.1 盒子模型及其相关属性 2、相关属性 4）尺寸 with、height 语法：with : auto | length(数值或百分比) 例：div height: 35px; table with: 50%; 4.1 盒子模型及其相关属性 300 300 40 40 40 30 10 20 边框：上下1px 左右3px 上边框：dashed 下边框：dotted 左右边框：solid 颜色如图。 思考：总宽度？总高度？ 4.2 CSS+div布局 1、 CSS布局原理 1）块级元素与内联元素 2）HTML默认文档流 默认情况下，没有对 HTML元素进行任何 定位时，块级元素都 会独自占据一行，内 联元素在行内依次排列 块级 元素内联元素 diva tablespan pinput preselect ultextarea olimg libr formb h1-h5i hru 4.2 CSS+div布局 1、 CSS布局原理 块级元素与内联元素区别 块级块级 元素内联联元素 默认宽认宽 度100%填充父容器适应元素内文本的宽度 布局方式每个元素独自占据一行多个元素排列在一行 宽宽度控制可控不生效 高度控制可控不生效 特殊元素：img、input、textarea、td等 4 CSS+div布局 1、 CSS布局原理 3）CSS盒子的定位 如何改变默认的文档流？ 通过CSS布局和定位属性可以改变HTML的默认文档流排 列方式，让块级元素按照指定方式排列。 4 CSS+div布局 1、 CSS布局原理 3）CSS盒子的定位 如何改变默认的文档流？ 4 CSS+div布局 2、 CSS的布局属性 属性简简介取值值 float指出了对对象是否及如何浮动动left、right、none clear该该属性的值值指出了不允许许有浮 动对动对 象的边边 left、right、both overflow当对对象的内容超过过其指定高度及 宽宽度时时如何管理内容 visible、hidden、 scroll display 对对象是否及如何显显示block、inline、table-cell、 none visibility 是否显显示对对象。与display属性 不同，此属性为隐为隐 藏的对对象保 留其占据的物理空间间 visible、hidden 4 CSS+div布局 2、 CSS的布局属性 float浮动* 作用：该属性的值指出了对象是否及如何浮动 语法：float : none | left |right|center 注意 使用该属性的对象将脱离默认文档流，浮动在对象所在行，对其 前面的行中的元素没有影响 浮动的对象不再占据物理空间，其后面的对象依次向前填充，文 本自动环绕 4 CSS+div布局 2、CSS的布局属性 clear* 作用：该属性的值指出了不允许有浮动对象的边。 语法：clear : none | left |right | both 例 清除浮动取消文字环绕 4 CSS+div布局 2、CSS的布局属性 4 CSS+div布局 2、CSS的布局属性 4 CSS+div布局 2、CSS的布局属性(练习) 最外层容器1000 id=main 橘色1px高 横幅div ：1000*150 id=“banner“ 导航div id=“nav-top“ 横幅div：300*300 id=“left-content“ 右侧div：694*304 id=“main-content“ 标题div：边距 id=“main-content-title“ 标题div：边距 id=“main-content-title“ div：300*400 id=“main-center-l“ div：30高 div class=“main- content-title colmn-bg“ div：484*400 id=“main-center-m“ div：200*400 id=“main-center-r“ div：50高 id=“main-bottom“ 4 CSS+div布局 2、CSS的布局属性 属性简简介取值值 float指出了对对象是否及如何浮动动left、right、none clear该该属性的值值指出了不允许许有浮 动对动对 象的边边 left、right、both overflow当对对象的内容超过过其指定高度及 宽宽度时时如何管理内容 visible、hidden、 scroll display 对对象是否及如何显显示block、inline、table-cell、 none visibility 是否显显示对对象。与display属性 不同，此属性为隐为隐 藏的对对象保 留其占据的物理空间间 visible、hidden 4 CSS+div布局 2、CSS的布局属性 overflow hidden：超出div范围的内容隐藏 scroll：添加滚动条 divwidth:300px; height:100px; border:#000 1px solid; overflow:hidden;/*超出内容隐藏*/ overflow:scroll;/*超出内容自动添加滚动条*/ 4 CSS+div布局 2、CSS的布局属性 display block：显示为块级元素 inline：显示为行内元素 table-cell：显示为表格单元格 none：不显示元素（直接隐藏，同时不保留物理位置） 4 CSS+div布局 2、CSS的布局属性 visibility visible ：正常显示元素 hidden：隐藏元素（直接隐藏，同时保留物理位置） 注意： display：none与visibility：hidden的区别* 前者隐藏元素，不保留物理空间 后者隐藏，保留物理空间 4 CSS+div布局 3、 CSS的定位属性 1）position: static | absolute | relative|fixed static：无特殊定位 absolute：绝对定位，脱离默认文档流，不保留位置 relative：相对定位，脱离默认文档流，保留位置 fixed：固定定位，脱离默认文档流，位置固定不动 4 CSS+div布局 3、 CSS的定位属性 2）其他定位属性 z-index：对象的层叠顺序 top：对象与相对目标元素的顶部相关位置 right：对象与相对目标元素的右边相关位置 bottom：对象与相对目标元素的底部相关位置 left：对象与相对目标元素的左侧的相关位置 4 CSS+div布局 3、 CSS的定位属性 3） position :absolute-绝对定位* 将对象从文档流中拖出，使用left，right，top，bottom 等属性进行绝对定位 定位方式：相对于最近的定位过的父对象 而其层叠通过z-index属性定义 4 CSS+div布局 3、 CSS的定位属性 3） position