[div+css1.pptVIP

我眼中的DIV和CSS DIV--楼房架构--搭建网页结构（框架）标签—成对出现（division） Eg:div/div span/span 职责：负责网站架构 特性：可以内嵌表格，文本，图片，和其他HTML代码，具有容器的性质。 我眼中的DIV和CSS CSS—楼房装修—表现网页--全称为Cascading Style Sheets，中文翻译为 “层叠样式表”--让网页按美工设计布局的更加美观漂亮。 Eg:网页宽度 高度 背景颜色 字体大小 我眼中的DIV和CSS Div定义内容 CSS表现样式，内容与表现分离，更灵活控制不同网页内容样式！ 盒子模型 知识点回顾：块元素和行内元素 Block element 块级元素 以块显示的元素，高度宽度可以设置。比如常用的div、p、ul默认状 态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个 行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的 display:block;将其更改成块级元素。 盒子模型 Inline element 行内元素 行内元素的高度宽度不可以设置，其宽度就是自身文字或者图片的宽度。常 用a、span、em都属于行内元素。 行内元素的显示特点就是像文本一样的显示，不会独自占据一个行。当然块 级元素也能变成行内元素，那就是通过css的display:inline; 盒子模型 块级元素列表 盒子模型 行内元素列表 盒子模型 Css表现样式 思路和流程： 正常的HTML文件—附带样式后的文件—缺陷—引入CSS后的文件 实例过渡：1-1 1-2 1-3 引入CSS样式的方法 过渡单词：style：[stail] 方法汇总： 1.行内样式(内嵌样式表) 混合在HTML标记里使用的，可以很简单的对某个元素单独定 义样式。直接将在HTML标记里加入style参数，而style参数 的内容就是CSS的属性和值。 引入CSS样式的方法 行内样式的缺陷： 没有很好实现内容和表现的完全分离，尽量少用。 引入CSS样式的方法 2.内部样式表 写在一个固定的位置，一般在head/head之间书写。 引入CSS样式的方法 内部样式表的缺陷： a.只针对当前页面有效，不能跨页面执行。 b.不利于网页优化。 引入CSS样式的方法 3.外部样式表 将CSS样式表代码单独编写在一个独立的文件之中。 引入CSS样式的方法 最好的一种方式，可以由网页调用，且多个网页可以调用同一个外部样 式表文件，真正实现内容与表现的分离。 个人推荐使用外部样式表 引入CSS样式的方法 4.导入样式表 将CSS样式表代码单独编写在一个独立的文件之中。 引入CSS样式的方法 与link的异同分析： a.老根不一样。link是html的一个标签，除了加载CSS外，还可以做其 他事务,而@import是css的一个标签。(本质区别) b.加载顺序不同。link引用CSS时，在页面载入时同时加载；@import需 要页面网页完全载入以后加载。特别是当网页文件比较大而网速比较慢 的时候，开始会没有样式效果，当CSS加载完后，忽然出现样式效果。 c.link是XHTML标签，无兼容问题；@import在低版本的浏览器不支。 d.link支持使用Javascript控制DOM去改变样式；而@import不支持。 引入CSS样式的方法 小结--四种方式的优先级别 高 低 行内样式内嵌样式链接样式导入样式 CSS选择器 1.概述 为了更灵活的控制网页中每一个元素的样式，就利用CSS选择器。 可以明确指定是对哪个元素的操作—即是选择 基本格式：选择符{属性1：属性值；属性2：属性值；} 2.分类 a.标记选择器 一个HTML页面由很多不同的标记组成，标记选择器用来声明哪些标记采用哪 种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的 名称。 CSS选择器 b.类别选择器 上面标记选择器，可以同时控制h1，但如果想让他们不同样式时，就要用到 类别选择器。 CSS选择器 b.类别选择器 CSS选择器 c.ID选择器 ID选择器的使用方法与class选择器基本相同； CSS选择器 c.ID选择器 CSS选择器 d.特殊表现形式 （1）通配选择符 格式：* { 属性:属性值; 属性:属性值; } *{ font-size:14px; font-family:宋体； } CSS选择器 d.特殊表现形式 （2）伪类 CSS 伪类用于向某些选择器添加特殊的效果。 锚伪类 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {c