《第3章-a sp.net-使用css布局网页》由会员分享，可在线阅读，更多相关《第3章-a sp.net-使用css布局网页（50页珍藏版）》请在金锄头文库上搜索。
1、第3章使用CSS布局网页,ASP.NET 程序设计教程,北京理工大学计算机学院 金旭亮,主要内容,3.1 CSS简介 3.2 在HTML文档中使用CSS 3.3 编写CSS样式规则 3.4 样式的继承与层叠 3.5 CSS盒模型 3.6 流式布局与浮动布局 3.7 盒子的定位方式 3.8网页布局实践,2,3.1 CSS简介,CSS的作用 CSS文档的基本组成元素,CSS起什么用？,SimplestPage.htm,4,结论：HTML定义了网页的结构CSS决定了浏览器如何显示HTML代码,仅仅HTML,HTML+CSS,3.2 在HTML文档中使用CSS,5,如何在HTML中引入CSS？,行内式
2、：在HTML标签的style属性中编写CSS代码 嵌入式：在中编写CSS代码 链接式：使用链接外部CSS文件导入式：使用import指令import “mystyle.css“;,6,3.3 编写CSS样式规则,7,CSS规则与声明,CSS文档由一条或多条CSS规则组成，规则拥有特定的格式：,8,CSS单位,9,学会编写CSS 选择器,标签选择器,用于设定HTML文档中指定标签的显示样式,11,pcolor:Red;font-size:25px;,类别选择器,给特定的一组CSS代码取名，然后可以应用于多个不同的标签：,12,.red_large_textcolor:Red;font-size:
3、25px;,this is a paragraph.北京理工大学,定义一个类别选择器,在不同元素中应用类别选择器,ID选择器,对于页面中独一无二的元素，如页脚，可以给其id属性赋予一个独一无二的值,13,任何建议，请发送至教师邮箱 ,然后可以用ID选择器给指定ID的元素设置样式,#footerfont-style:italic;font-size:16px;,伪类选择器,超链接标签支持几个特殊的CSS样式类，用于定义超链接不同状态的样式，这些样式类被称为“伪类（pseudo class）”,14,Demo: PseudoSelector.htm,基本选择器与复合选择器,将前面介绍 的“标记选择
4、器”、“类别选择器”和“ID选择器”统称为“基本选择器”。 “复合选择器”包括：（1）交集选择器（2）并集选择器（3）后代选择器,15,交集选择器,直接指定特定标记中特定类别或ID的样式。,16,p.special /* 标记.类别选择器 */color:red; p#special /* id选择器 */color:green; ,Demo: IntersectionSelector.htm,注意：选择器字符间不要有空格！,并集选择器,一次定义多个标签或类别或ID的样式,17,div,.special,#one /* 集体声明 */text-decoration:underline; /*
5、下划线 */ ,注意：以逗号隔开各个选择器,Demo: UnionSelector.htm,后代选择器,选择嵌套在指定元素的内部元素的样式,18,p span color:red; ,Demo：DescendantSelector.htm,注意：以空格分隔选择器,关于选择器,CSS选择器是编写样式表文档的基础，一定要熟悉并掌握这六种基本的选择器样式，从而为今后网页设计打下基础。,19,3.4 CSS的继承与层叠原则,浏览器如何显示未定义样式的元素？ 样式定义相互冲突时如何决定最终显示效果？,CSS的继承原则,21,结论：没有定义CSS规则的HTML元素从它的父元素中继承样式！,div.fath
6、ercolor:blue; /* 颜色 */text-decoration:underline; /* 下划线 */ ,这是父元素内的文本，显示为蓝色加下划线这是子元素内的文本,使用交集选择器定义样式,定义两个嵌套的元素,Demo:CSSInherits.htm,CSS层叠原则,选择器定义的规则相互冲突怎么办？ Demo:CascadingExample.htm,22,行内样式id样式类别样式标签样式,结论：特殊者胜出!,3.5 CSS盒子模型,页面布局的关键 CSS强大排版能力的根基,HTML文档的逻辑结构,24,什么是“Box”?,25,margin,padding,Box,CSS盒子模型
7、,26,块级标签与行内标签,HTML标签分为两大类： 、等是常见的块级（block）元素标签 、等是常见的行内（inline）元素标签 每一个块级元素都定义了一个盒子。 与没有特殊的语义，多用于页面布局与排版，因此是网页布局设计中打交道最多的两个标签。,27,设置div块的显示效果,Demo:ShowBox.htm,28,divborder-width:6px;border-color:#000000;margin:20px; /*盒子间距*/padding:5px;/*内容与边界距离*/background-color:#FFFFCC;border-style:dashed; ,要点： 通过
8、设定盒子的边框和线型可以在页面上清晰地显示出盒子所占用的页面区域。,有关CSS盒子设定边框属性的简写,29,div border-color:Red Green;border-width:1px 2px 3px;border-style:dotted dashed solid double; ,3.6 流式布局与浮动布局,3.6.1 流式布局,默认情况下的布局方式,行内元素与块元素的显示,默认情况下，浏览器新起一行显示块元素，而在同一行显示行内元素，这种方式被称为“标准流式布局”。,32,行内元素的间距,Demo:InlineMargin.htm,33,行内元素之间的左右距离 左元素的右边距+
9、右元素的左边距,块元素的上下间距,Demo:BlockMargin.htm,34,两块之间的上下间距 max上一个块元素的下边距，下一个块元素的上边距,嵌套块元素的边界,Demo:EmbodiedBoxMargin.htm,35,子块元素是以父元素为基准定位的。,3.6.2 浮动布局,让一切“动”起来！,盒子的浮动属性,盒子拥有一个float属性，可以设置为向左或向右浮动 Demo: floatleft.htm和SreamLayout.htm 要点： float属性让盒子浮动起来，自动贴靠于其父元素的左或右边缘。 设置了float属性的盒子自身宽度由其内部保持标准流布局的元素宽度决定。,37,
10、3.7 定位方式,决定元素的真正位置,元素的定位问题,主要影响网页布局的是块元素。 块元素有两种主要的显示方式：流式布局与浮动布局 流式布局比较简单： （1）块元素分行显示 （2）行内元素在同一行内显示，一行显示不下则折行。 对于浮动布局，情况就复杂得多，盒子模型中定义了一个position属性用于指定元素的布局方式。,39,静态定位方式,position=static demo: staticPosition.htm 这是默认的属性值，表明盒子中的元素按照标准流方式进行定位，“该在哪就在哪”。,40,相对定位方式,position=relative demo: relativePositio
11、n.htm.htm 要点： 使用相对定位方式的盒子，会相对于它原本的位置有一个偏移，到达一个新位置。 使用相对定位方式的盒子仍在标准流中，因此会影响其后继元素的定位 关键：弄清楚以什么为基准定位,41,绝对定位方式,position=absolute demo: absolutPosition_1.htm和absolutPosition_2.htm 要点： 使用绝对定位的盒子以它“最近”的一个已经定位的父元素为基准进行定位，如果没有这样的元素，则以浏览器窗口为基准。 绝对定位的盒子从标准流中脱离，它们对其后元素的定位没有影响。 “已经定位”：指position属性被设置为除static以外的所
12、有值之一。,42,固定定位,position=fixed Demo:fixedPosition.htm 要点：1 采用固定定位方式的盒子以浏览器窗口为基准定位。2 采用固定定位方式的盒子脱离了原来的标准流，它的兄弟盒子定位时将其视为“不存在”。3 采用固定定位的盒子不理会父盒子的定位方式。,43,3.8 设计实践,灵活应用所学知识进行实践,四图像圆角框,步骤： 1 创建四个角的小图像 2 按如下格式定义圆角框逻辑结构,45,+ 标题,+ 正文,关键： 1 块元素的背景图像可以设置放在哪个角 2 将块的背景色设为与图像一样,掌握常见的页面布局方法,网页的通用模板,47,分栏的页面布局方案,48,嵌套的页面结构,49,网页设计具体步骤,有多种网页的布局模型，根据实际情况选择一种合适的。 在设计前要分析并确定网页的逻辑结构，用进行界定。 然后通过CSS规则定义出基本块（block）的显示效果。 使用定义好的基本块布局网页，在具体设计时要灵活应用块元素的浮动和定位方式。 在各种版本的浏览器中进行测试。,50,
