3css基础.ppt

1、回顾 Web工作原理 HTML 框架的使用（Frameset） 表格应用（Table） 表单标记（Form） CSS基础 DIV+CSS布局 总结,主要内容,1.Web浏览器请求动态页,2.Web服务器查找该页，并传递给应用程序服务器,3.应用服务器查找页中的指令,4.应用服务器将查询发送到数据库驱动程序,5.驱动程序对数据库执行查询,6.记录集被返回给驱动程序,7.驱动程序将记录集传给应用服务器,8. 应用服务器将数据插回页面，并返回给Web服务器,9. Web服务器将完成页返回给请求的浏览器,HTML（超文本标记语言）,全称 标准的html文档结构, 【头部区】 【主要内容编辑区】 ,Hy

2、perText Markup Language,框架标记, ,插入框架代码时放在html文档的哪个部位？,框架标记,吴承恩 施耐庵 吴承恩,吴承恩 施耐庵 施耐庵,单击,请问：左边超级链接的代码怎么写？,吴承恩 施耐庵,？思考：“返回首页”的超级连接怎么写？,表格标记（table）,HTML代码, 课 程 表 时间星期一星期二星期三 上午 1-2节数学语文英语 3-4节语文上网 数学 ,表格布局实例,PS里设计好界面后，进行切片,切片可以在网页里用表格进行拼接,1、插入2行3列的表格 2、第1行表格左右用图片，中间用背景色，能用背景色的尽量用背景色 3、第2行表格合并单元格并设置背景色,表单标

3、记, , , ,表单应用,CSS的概念 CSS（Cascading Style Sheet），层叠样式表 用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 Web标准 CSS引入 CSS的引用方式 CSS基本语法 CSS控制文字效果 CSS选择器优先级、文档声明,CSS基础,Web标准,XHTMLHTML是Web页的结构 CSS是用来表现结构的格式,HTML的缺陷,标题1 正文内容1 标题2 正文内容2 标题3 正文内容3 标题4 正文内容4,如果字体要修改成“幼圆”呢？,CSS的引入, 标题1 正文内容1 标题2 正文内容2 标题3 正文内容3 标题4 正文内容4 , h2

4、font-family:幼圆; color:red; ,行内样式 内嵌式 链接式 导入样式,CSS的引用方式,行内样式, 正文内容1 正文内容2 正文内容3 ,内嵌式, h2 font-family:幼圆; color:red; ,链接式, ,p font-family:楷体_Gb2312; line-height:150%; text-indent:2em; ,CSS链接样式文件的优点,链接webpage.css样式,导入式, ,选择器 样式属性名1：属性值1; 样式属性名2：属性值2; ,CSS基本语法,标记选择器 HTML中的各类标记 类别选择器 用于可以重用的区块或者定义 ID选择器

5、用于标识页面唯一的区块，比如说导航条，正文，版权,CSS选择器,标记选择器, h1 color: red; font-size: 25px; ,类别选择器,注意：类名和ID名不要和一些含有表现意义的词关联，例如：Red、leftcolumn,ID选择器,CSS文字常用样式 CSS段落文字常用样式,CSS控制文字效果,字体(Font-family) 文字大小(Font-size) 文字颜色(color) 文字粗细(font-weight) 下划线、顶划线、删除线(text-decoration),CSS文字常用样式,段落水平对齐方式（text-align） 段落缩进（text-indent） 行

6、间距（line-height）,CSS段落文字常用样式,样式举例,body line-height: 1.88889; color: #555753; background: #fff url(blossoms.jpg) no-repeat ; font-weight：bold; ,超链接常用样式举例,a:link text-decoration: none; color: #B7A5DF; a:visited text-decoration: none; color: #D4CDDC; a:hover, a:active text-decoration: underline; color:

7、#9685BA; ,选择器的优先级,标题1 正文内容1 标题2 正文内容2 标题3 正文内容3,p font-family:“宋体; text-indent:2em; .bt font-family:隶书; font-weight:bold; ,问题 重复定义的时候应该执行什么字体？ 遇到这样的情况应该以哪个为准？,选择器的优先级,标记选择器 类选择器id 选择器 行内样式定义（Style=“”） 继承关系 子定义会继承父定义，但会覆盖父定义的内容。,选择器的优先级结论,CSS样式优先级,p color: #000000; .small font-size: 10px; .smallest f

8、ont-size: 8px; Your Text,两种浏览器模式一种是标准模式（standard mode），另一种是怪异模式（quirks mode）； 标准性文档声明有很多种，一般推荐使用过渡型（transitional）标准。 ,CSS文档声明,1、保证浏览器兼容性 2.Dreamweaver中创建页面会自动添加上,糟糕的页面代码 没有意义的标签，结构和表现部分混杂在一起，不可读。 优秀的页面代码 具有语义，结构和表现相分离，可读，优雅。,CSS认识,DIV+CSS布局,DIV标签 双标记 容纳内容的容器，可嵌套 CSS盒模型 利用CSS对DIV进行定位 CSS的浮动设置,CSS盒模型,

9、content：主体内容,margin：边距 四个方向为margin-top，margin-right，margin-bottom，margin-left border：边框 四个方向为border-top，border-right，border-bottom，border-left padding：填充 四个方向为padding-top，padding-right，padding-bottom，padding-left,例如下面的样式 #MyBox margin:10px; padding:5px; border-width:0px; width:70px; /内容的宽度 这个区域的宽度=左

10、边距+左边框+左填充+内容宽度+ 右填充+右边框+右边距 = 10px+0px+5px+70px+5px+0px+10px = 100px,CSS盒模型中需注意的问题,IE的框模型问题： IE把填充宽度看作是内容宽度的一部分 上述样式若是 IE打开，按上例 它的区域宽度=10px+0px+70px+0px+10px=90px,利用CSS对DIV进行定位-1,CSS中有三种基本的定位机制：普通流、浮动和绝对定位。其中相对定位可看作普通流定位的一部分。 普通流 浏览器会根据各个框（DIV）在html中出现的顺序，由上而下一个接一个的排列，这样方式称作“流”，区别于浮动和绝对定位这两种较特殊的定位方

11、式，这种流我们称之为“普通流”。 它们之间的垂直距离由框的垂直空白边计算出来。 这种方式可用CSS属性position：static 控制。,利用CSS对DIV进行定位-2,（2）相对定位 使用CSS属性 position：relative，在相对定位下，元素的位置相对于它本来该出现的位置的偏移。 （3）绝对定位 使用CSS属性position:absolute，在绝对定位下，元素的位置相对于最近的已定位的祖先元素。 （4）元素的堆叠顺序 使用CSS属性z-index:值，值越大，元素越在上面。,CSS的浮动设置,浮动模型是在布局中用到的最重要的概念之一 ，使用 float属性进行控制。浮动的框可以左右移动，直到它的外 边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS 允许任何元素浮动。 对一个元素应用float属性会自动将它转变成一个块级元 素，其它元素的内容在其周围流动。利用这个特性我们可 以让文字环绕在图片周围，形成Word中文字环绕的效果。 float可以取三个可能的值 left：向左浮动； right：向右浮动； none：消除浮动,1. 浮动的一些规则 ： （1）多个浮动元素不会相互覆盖，一个浮动元素的框碰到另一个浮动元素的框后便停止运动。,（2）若包含的容器太窄