[精品]DIV+CSS课件说课讲解

div { color: red; font-size:9pt} …… <div> <p>
这个段落的文字为红色9号字 </p> </div>
P中内容会继承DIV所 定义的样式。但当样式 表继承遇到冲突时，总 是以最后定义的样式为 准
用CSS定义样式
v 注释
n 可以在CSS中插入注释来说明代码的含义，注释有利于 自己或别人今后在编辑和更改代码时理解代码的含义
的，它没有结构的意义，纯粹是应用样式，当其他行内元 素都不合适时，可以使用SPAN。
CSS概述
v 是Cascading Style Sheet的简称，中文翻译为： 层叠样式表；为网页设计者提供更大的网页空间 应用弹性；将网页的文字内容与版面设计分开处 理
n 几乎所有的浏览器都支持 n 可取代以前一部分必须通过专门的图像处理软件实现的
DIV+CSS
Div+css的概述
❖业界对DIV+CSS的标准化设计关注 ❖DIV+CSS标准化的影响下，网页设计人员
已经把这一要求作为行业标准 ❖传统的网页布局是使用网格
DIV+CSS布局
❖ DIV+CSS布局 这个布局中，div承载的是内容，而css承载的是 样式。内容和样式的分离对于所见即所得的传统 TABLE编辑方式确实是一个很大的冲击，尤其是 设计人员很难接受设计一个他们不能立即看到的 样式。不过随着学习，会发现div+css的好处实在 是太明显了
DIV的概念
1. DIV 全称 division 意为“区分”使用 DIV 的方法跟使用 其他 tag 的方法一样。 2. 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效 果和使用 <P></P> 是一样的。 3. DIV本身就是容器性质的，你不但可以内嵌table还可以内 嵌文本和其它的HTML代码 4. 注意：<div>标签可以用来组合其它的HTML元素，但不能 嵌套在段落元素中，例如，<p>aa<div>bb</div>cc</p>的结果 是不确定的。
图片特效功能 n 更易于管理样式，方便编排，简化管理成本 n 便于统一风格
为网页添加CSS
v 要想使用CSS，首先要让浏览器识别并调用，通 常添加样式的方式有如下四种：
n 内嵌样式 n 内部样式表 n 链入外部样式表 n 导入外部样式表
v 样式表的优先级别从高到低为：行内样式、内部 样式、链接样式、导入样式。
SPAN 和 DIV 的区别
❖ SPAN 和 DIV 的区别在于: ❖ DIV(division)是一个块级元素，可以包含段落、标题、表
格，乃至诸如章节、摘要和备注等。 ❖ <SPAN>是行级容器标签，不可以包含图片、标题、段落
等，只能包含文字内容 ❖ 另外，由于SPAN 是行级元素，SPAN 的前后是不会换行
v 类选择符
n 可将相同的分类定义为不同的样式，定义时，在自定
义类名前加点号，如：
P.right {text-align: right} P.center {text-align: center} .left {text-align: left}
用CSS定义样式
v ID选择符
n 由HTML代码中的ID参数指定单独的样式，和类选择 符类似。如：
n 在浏览器中，注释是不显示的 n 注意与HTML中的注释方式的区别，此处只能以“/*”开
头，以“*/”结尾
盒子模型
❖ 每个HTML元素都可以看作一个装了东西的盒子， 盒子具有宽度（width）和高度（height），盒子 里面的内容到盒子的边框之间的距离即填充 （padding），盒子本身有边框（border），而 盒子边框外和其他盒子之间，还有边界 （margin）。
v 高优先级样式将继承低优先级样式的未重叠定义， 但覆盖重叠的定义。
用CSS定义样式
v CSS的定义是由三个部分构成：选择符、属性和 属性的取值，定义方法如下：
selector {property: value}
如：body {color: black} p {text-align: center; color: red}
p { text-align: center; color: black; font-family: arial }
此处定义的是：段落排 列居中，段落中文字为 黑色，字体是arial。
用CSS定义样式
v 选择符组
n 为了减少样式的重复定义，可将相同属性和值的选择 符组合起来书写，使用逗号分隔，如： h1, h2, h3, h4, h5, h6 { color: green }
盒子模型
盒子模型
盒子模型
布局中的主要样式
❖ font ❖ line-height ❖ color ❖ margin ❖ padding ❖ border ❖ text-align ❖ background
❖ width: ❖ height ❖ float: ❖ clea❖ CSS的定位与显示属性可以把一个HTML元素定位在网页中 的任何位置
❖ 定位与布局密切相关 ❖ CSS中有三种基本的定位机制
普通流：显示的位置由元素在HTML文件中的位置决定 浮动：可以左右移动，直到碰到包含框或其它浮动框 绝对定位：可以直接将元素定位在页面上的任何位置 ❖ 层叠顺序 进行CSS定位时，有可能发生多个元素的重叠 需要设置元素在Z轴上的层叠顺序 ❖ 与定位相关的属性主要有14个
普通流定位机制
❖按照元素的类型和在HTML源文件中的出 现顺序进行定位（ 从左到右从上到下 ） 就是block元素（如p、h、div）（块级 框）从上到下一个接一个的排列 行级元素（如span、strong元素）在行 中水平布置
#intro{ font-size:150%; }
v 包含选择符 n 一种单独针对某种元素包含关系而定义的样式表 ，如：
table a{ font-size: 32px }
用CSS定义样式
v 样式表的层叠性
n 层叠性指的是继承性，样式表的继承规则是外部的元素样式继承 给这个元素所包含的其他元素
n 实际上，所有嵌套在元素中的元素都会继承外层元素已指定的属 性值，有时会把很多层次所嵌套的样式叠加在一起，除非另外设 置