《jsp程序设计基础.ppt》由会员分享，可在线阅读，更多相关《jsp程序设计基础.ppt（115页珍藏版）》请在三一办公上搜索。
1、CSS复习（思考）,CSS复习（思考）,CSS思想(思想1）CSS定义自定义样式标签重定义高级样式文字图像超链接CSS引用外部文件内部引用DIV+CSS（思想2）,一、CSS思想（思想1）,图1 仅使用HTML定“结构”的页面效果,图2 使用CSS设定样式之后的效果,“Web标准”概述,下面介绍关于网页的标准“Web标准”。网页主要由3个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。,图3“结构”、“表现”和“行为”的关系,“结构”、“表现”和“行为”分别对应于3种非常常用的技术，即(X)HTML、CSS和JavaScript。也就是说，(X
2、)HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。,二、CSS定义及相关特性,通过上一章的学习，了解了在网页设计中引入CSS的意义。引入CSS的核心目的就是实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。,构造CSS规则,在具体介绍CSS之前，先思考一个生活中的问题。张飞 身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;这个表实际上是由3个要素组成的，即姓名、属性和属性值。,构造CSS规则,CSS的作用就是设置网页的各个组成部分的表现形式。因此，如果把上面
3、的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：2级标题 字体:宋体;大小:15像素;颜色:红色;装饰:下划线,h2 font-family:宋体;font-size:15px;color:red;text-decoration:underline;,构造CSS规则,CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分“对象”、“属性”和“值”组成的。,2 基本CSS选择器,在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称选
4、择器（selector）。标记选择器类别选择器(自定义）ID选择器,2.1 标记选择器,h1 color:red;font-size:25px;,2.2 类别选择器(自定义）,图5 类别选择器,写一个自定义样式：分别定义段落1、2字体的颜色和大小,class选择器.red color:red;/*红色*/font-size:18px;/*文字大小*/,.green color:green;/*绿色*/font-size:20px;/*文字大小*/class选择器1 class选择器2 h3同样适用,2.3 ID选择器,图6 ID选择器,ID选择器#bold font-weight:bold;/
5、*粗体*/#green font-size:30px;/*字体大小*/color:#009900;/*颜色*/,ID选择器1 ID选择器2 ID选择器3 ID选择器4,2.4 复合选择器,2.4.1 交集选择器,图7 标记类别选择器,图8 交集选择器示意图,p/*标记选择器*/color:blue;p.special/*标记.类别选择器*/color:red;/*红色*/.special/*类别选择器*/color:green;,普通段落文本（蓝色）普通标题文本（黑色）指定了.special类别的段落文本（红色）指定了.special类别的标题文本（绿色）,2.4.2 并集选择器,图9 并集选
6、择器示意图,h1,h2,h3,h4,h5,p/*并集选择器*/color:purple;/*文字颜色*/font-size:15px;/*字体大小*/h2.special,.special,#one/*集体声明*/text-decoration:underline;/*下画线*/,示例文字h1 示例文字h2 示例文字h3 示例文字h4 示例文字h5 示例文字p1 示例文字p2 示例文字p3,2.4.3 后代选择器,后代选择器p span/*嵌套声明*/color:red;/*颜色*/,span color:blue;/*颜色*/嵌套使用CSS（红色）标记的方法 嵌套之外的标记（蓝色）不生效,后
7、代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。下面是一些典型的代码：,.special i color:red;/*使用了属性special的标记里面包含的*/#one li padding-left:5px;/*ID为one的标记里面包含的*/td.out.inside strong font-size:16px;/*多层嵌套，同样实用*/上面的第3行使用了3层嵌套，实际上更多层的嵌套在语法上都是允许的。,三、文字、图像、背景CSS定义（对比、书写）,常用文字CSS控制,常用文字CSS控制,常用图像的CSS控制,用CSS设置背景样式,CSS引
8、用,3 在HTML中使用CSS的方法,3.1 行内式 正文内容1 正文内容2 正文内容3,3.2 内嵌式,p color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;这是第1行正文内容,3.3 链接式,页面标题 CSS标题 这是正文内容 CSS标题 这是正文内容,02-08.css文件,h2 color:#0000FF;p color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;,四、DIV+CSS盒子模型(思想2),4
9、.1“盒子”与“模型”,图4.1 画框示意图,盒子思想,所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。,研究什么,独立的盒子相关的性质在普通情况下盒子的排列关系多个盒子之间的关系-浮动和定位,图4.2 盒子模型,4.2 长度单位,相对类型px:根据显示器分辨率多少而表示不同的长度em:以font-size属性为
10、参考的长度。如没有，按默认字体大小。绝对类型in(英寸)、cm(厘米)、mm(毫米)、pt(点数)、pc(印刷单位),4.3 边框,图4.3 border,图4.4 padding示意图,Margin示意图,边框border内距padding间距margin,不同个属性意思,后面要用到的浮动和定位属性,自我分析一个实例,#outerBoxwidth:200px;height:100px;border:2px black solid;border-left:4px green dashed;border-color:red gray orange blue;/*上 右 下 左*/border-r
11、ight-color:purple;,4.4 盒子之间的关系,1 HTML与DOM“树”的概念,图4.5 家谱示意图,2DOM树(Document Object Model)文档对象模型,图4.6 打开新窗口,今日推荐七星瓢虫图案4件套，采用超柔和进口面料，手感极其柔软，舒适。缩水率以及退色率均符合国家检测标准，绿色环保。30度以下水温洗衣机弱洗，中性洗涤剂，中温熨烫。,今日推荐七星瓢虫图案4件套，采用超柔和进口面料，手感极其柔软，舒适。缩水率以及退色率均符合国家检测标准，绿色环保。30度以下水温洗衣机弱洗，中性洗涤剂，中温熨烫。,标准文档流,图4.7 DOM树与页面布局的对应关系,产品分类0
12、-1岁玩具2-3岁玩具4-6岁玩具0-1岁服装,产品分类0-1岁玩具2-3岁玩具4-6岁玩具0-1岁服装,标准文档流,图4.8 DOM树与页面布局的对应关系,4.4.3 标准文档流,“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。1块级元素（block level）li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。因此，这类元素称为“块级元素”（block level），即它们
13、总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。,标准文档流,2行内元素（inline）对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。比如标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的标记，也是一个行内元素。,换个角度看网页,标准文档流结构,表现,盒子思想的表现,4.5 标记与标记（造盒思想）,div与span的区别div标记不同行：span标记同一行：,图4.9 与标记的区别,4.6 盒子在标准流中的定位原则,4.6.1 行内元素之间的
14、水平margin,图4.10 行内元素之间的margin,4.6 盒子在标准流中的定位原则,4.6.2 块级元素之间的竖直margin如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图4.20所示。这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。,图4.11 块元素之间的margin,4.6 盒子在标准流中的定位原则,4.6.3 嵌套盒子之间的margin除了上面提到的行内元素间隔和块级元
15、素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。当一个块包含在另一个块中时，便形成了典型的父子关系。其中子块的margin将以父块的内容为参考，如图4.22所示。,图4.12 父子块的margin,4.7 margin属性可以设置为负值,上面提及margin的时候，它的值都是正数。当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。,图4.13 父子块设置margin为负数,五、盒子的浮动与定位,盒子思想的表现,div,原因,如果仅仅按照标准流的方式进行排版，就只能按照仅有的几种可能性进行排版，限制太大。为了灵
16、活地实现各种形式的排版要求。CSS引入float和position这两个重要属性的应用。,5.1 盒子的浮动,在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。,思考下面代码,Box-1Box-2Box-3这里是浮动框外围的文字，这里是浮动框外围的文字，
17、这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.,Box-1Box-2Box-3这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.,5.1.3 设置第1个浮动的div,图5.1 设置第1个div浮动时的效果,5.1.3 设置第2个浮动的div,图5.2 设置前两个div浮动时的效果,.son1float:left
18、;/*这里设置son1的浮动方式*/.son2float:left;/*这里设置son1的浮动方式*/.son3/*这里设置son1的浮动方式*/,5.1.4 设置第3个浮动的div,图5.3 设置第3个div浮动时的效果,5.1.5 改变浮动的方向,图5.4 改变浮动方向后的效果,5.1.6 再次改变浮动的方向,图5.5 交换div位置时的效果,5.1.8 使用clear属性清除浮动的影响,图5.5 设置浮动后文字环绕的效果,.father pborder:1px dashed#111111;background-color:#ff90ba;,Clear:left清除左浮动的影响,.fath
19、er pborder:1px dashed#111111;background-color:#ff90ba;clear:left;,图5.6 清除浮动对左侧影响后的效果,Clear:right清除右浮动的影响,图5.7 清除浮动对右侧影响后的效果,.father pborder:1px dashed#111111;background-color:#ff90ba;clear:right;,重新思考,.mainContentfloat:left;width:540px;.sideBarfloat:right;width:186px;margin-right:10px;margin-top:20p
20、x;,再细节思考这个页面DIV布局,5.2 盒子的定位,广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。首先，对position属性的使用方法做一个概述，后面再具体举例子说明。position属性可以设置为以下4个属性值之一。,盒子的定位,static：这是默认的属性值，也就是该盒子按照标
21、准流（包括浮动方式）进行布局。relative：称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。,盒子的定位,absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。,5.2.1 静态定位,图5.8 没有设置posit
22、ion属性时的状态,5.2.2 相对定位,1一个子块的情况,图5.9 一个div设置为相对定定位后的效果,图5.10 以右侧和下侧为基准设置相对定定位,2两个子块的情况,图5.11 设置为相对定位前的效果,图5.12 两个兄弟div的情况下，其中一个设置为相对定位后的效果,两条关于“相对定位”的定位原则,使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。,图5.13 两个兄弟div都设置为相对定位后的效果,图5.14 在浮动方式下，使用相对定位,5.2.3 绝对定位,介绍了相对定位以后，下面介绍绝对定位（absolute）。通过上述讲解，可以了解到各种position属性都需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。,1创建基础页面2使用绝对定位3浏览器的Bug与Hack,图5.15 设置绝对定位前的效果,图5.16 将中间的div设置为绝对定位后的效果,图5.17 设置偏移量后的效果,图5.18 将父块设置为“包含块”后的效果,
