第3章使用css布局网页_第1页
第3章使用css布局网页_第2页
第3章使用css布局网页_第3页
第3章使用css布局网页_第4页
第3章使用css布局网页_第5页
已阅读5页，还剩45页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

使用CSS布局网页ASP.NET程序设计之主要内容CSS简介在HTML文档中使用CSS编写CSS样式规则样式的继承与层叠CSS盒模型流式布局与浮动布局盒子的定位方式网页布局实践21CSS简介CSS的作用CSS文档的基本组成元素CSS起什么用？SimplestPage.htm4结论： HTML定义了网页的结构 CSS决定了浏览器如何显示HTML代码仅仅HTMLHTML+CSS2在HTML文档中使用CSS5如何在HTML中引入CSS？行内式：在HTML标签的style属性中写CSS代码嵌入式：在<head></head>中写CSS代码链接式：使用<link>链接外部CSS文件<linktype="text/css"rel="stylesheet"href="mycss.css"/>导入式：使用@import指令

<styletype="text/css">@import"mystyle.css";</style>63编写CSS样式规则7CSS规则与声明CSS文档由一条或多条CSS规则（Rules）组成，规则拥有特定的格式：8CSS单位单位名称说明pc(pica)1pc=12point（点）pt(point)=1/72inch（英寸）mm(millimeter)亳米cm(centimeter)厘米in(inch)英寸px(pixel)像素，代表计算机屏幕上的一点em表示字体的高度的单位ex表示字体中字母X的高度9学会编写CSS选择器标签选择器用于设定HTML文档中指定标签的显示样式p

{ color:Red; font-size:25px;

}11Demo:TagSelector.htm类别选择器给特定的一组CSS代码取名，然后可以应用于多个不同的标签：.red_large_text

{ color:Red; font-size:25px;

}<pclass="red_large_text">thisisaparagraph.</p><aclass="red_large_text"href="">北京理工大学</a>定义一个类别选择器在不同元素中应用类别选择器12Demo:ClassSelector.htmID选择器对于页面中独一无二的元素，比如页脚，可以给其id属性赋予一个独一无二的值<divid="footer">

任何建议，请发送至

<ahref="">教师邮箱</a></div>然后可以用ID选择器给指定ID的元素设置样式#footer

{ font-style:italic; font-size:16px;

}13Demo:

IDSelector.htm伪类选择器超链接标签<a>支持几个特殊的CSS样式类，用于定义超链接不同状态的样式，这些样式类被称为“伪类（pseudoclass）”属性说明a:link超链接的普通样式，即正常浏览状态的样式a:visited被点击过后呈现的样式a:hover鼠标指针悬停于超链接元素之上时呈现的样式a:active单击超链接时呈现的样式14Demo:PseudoSelector.htm基本选择器与复合选择器将前面介绍的“标记选择器”、“类别选择器”和“ID选择器”统称为“基本选择器”。“复合选择器”包括：

（1）交集选择器

（2）并集选择器

（3）后代选择器15交集选择器直接指定特定标记中特定类别或ID的样式。p.special{ /*标记.类别选择器*/ color:red; }p#special{ /*id选择器*/ color:green;}Demo:IntersectionSelector.htm注意：选择器字符间不要有空格！16并集选择器一次定义多个标签或类别或ID的样式div,.special,#one{ /*集体声明*/ text-decoration:underline; /*下划线*/}注意：以逗号隔开各个选择器Demo:UnionSelector.htm17后代选择器选择嵌套在指定元素的内部元素的样式pspan{ color:red; }Demo：DescendantSelector.htm注意：以空格分隔选择器18关于选择器CSS选择器是编写样式表文档的基础，一定要熟悉并掌握这六种基本的选择器样式，从而为今后网页设计打下基础。194CSS的继承与层叠原则浏览器如何显示未定义样式的元素？样式定义相互冲突时如何决定最终显示效果？CSS的继承原则结论：

没有定义CSS规则的HTML元素从它的父元素中继承样式！div.father{ color:blue; /*颜色*/ text-decoration:underline; /*下划线*/}<divclass="father">这是父元素内的文本，显示为蓝色加下划线<div>这是子元素内的文本</div></div>使用交集选择器定义样式定义两个嵌套的元素Demo:CSSInherits.htm21CSS层叠原则选择器定义的规则相互冲突怎么办？Demo:CascadingExample.htm行内样式>id样式>类别样式>标记样式结论：特殊者胜出!225CSS盒子模型页面布局的关键CSS强大排版能力的根基HTML文档的逻辑结构24什么是“Box”?marginpaddingBox25CSS盒子模型26块级标签与行内标签HTML标签分为两大类：<div>、<p>、<h2>等是常见的块级（block）元素标签<span>、<a>、<img>等是常见的行内（inline）元素标签每一个块级元素都定义了一个盒子。<div>与<span>没有特殊的语义，多用于页面布局与排版，因此是网页布局设计中打交道最多的两个标签。27设置div块的显示效果Demo:ShowBox.htm28div{border-width:6px;border-color:#000000;margin:20px;/*盒子间距*/padding:5px;/*内容与边界距离*/background-color:#FFFFCC;border-style:dashed;}要点：通过设定盒子的边框和线型可以在页面上清晰地显示出盒子所占用的页面区域。有关CSS盒子设定边框属性的简写属性值个数说明2第1个值表示上下边框的属性第2个值表示左右边框的属性3第1个值表示上边框的属性第2个值表示左右边框的属性第3个值表示上边框的属性4依次表示上、右、下、左边框的属性（成逆时针方向）div{ border-color:RedGreen; border-width:1px2px3px; border-style:dotteddashedsoliddouble;}296流式布局与浮动布局6.1流式布局默认情况下的布局方式行内元素与块元素的显示默认情况下，浏览器新起一行显示块元素，而在同一行显示行内元素，这种方式被称为“标准流式布局”。32行内元素的间距Demo:InlineMargin.htm33行内元素之间的左右距离＝左元素的右边距+右元素的左边距块元素的上下间距Demo:BlockMargin.htm34两块之间的上下间距＝max{上一个块元素的下边距，下一个块元素的上边距}嵌套块元素的边界Demo:EmbodiedBoxMargin.htm35子块元素是以父元素为基准定位的。6.2浮动布局让一切“动”起来！盒子的浮动属性盒子拥有一个float属性，可以设置为向左或向右浮动Demo:floatleft.htm和SreamLayout.htm要点：float属性让盒子浮动起来，自动贴靠于其父元素的左或右边缘。设置了float属性的盒子自身宽度由其内部保持标准流布局的元素宽度决定。377定位方式决定元素的真正位置元素的定位问题主要影响网页布局的是块元素。块元素有两种主要的显示方式：流式布局与浮动布局流式布局比较简单：（1）块元素分行显示（2）行内元素在同一行内显示，一行显示不下则折行对于浮动布局，情况就复杂得多，盒子模型中定义了一个position属性用于指定元素的布局方式。39静态定位方式position=staticdemo:staticPosition.htm这是默认的属性值，表明盒子中的元素按照标准流方式进行定位，“该在哪就在哪”。40相对定位方式position=relativedemo:relativePosition.htm.htm要点：使用相对定位方式的盒子，会相对于它原本的位置有一个偏移，到达一个新位置。使用相对定位方式的盒子仍在标准流中，因此会影响其后继元素的定位关键：弄清楚以什么为基准定位41绝对定位方式position=absolutedemo:absolutPosition_1.htm和absolutPosition_2.htm要点：使用绝对定位的盒子以它“最近”的一个已经定位的父元素为基准进行定位，如果没有这样的元素，则以浏览器窗口为基准。绝对定位的盒子从标准流中脱离，它们对其后元素的定位没有影响。“已经定位”：指position属性被设置为除static以外的所有值之一。42固定定位position=fixedDemo:fixedPosition.htm要点： 1采用固定定位方式的盒子以浏览器窗口为基准定位； 2采用固定定位方式的盒子脱离了原来的标准流，它的兄弟盒子定位时将其视为“不存在”。 3采用固定定位的盒子不理会父盒子的定位方式。438设计实践灵活应用所学知识进行实践四图像圆角框步骤：1创建四个角的小图像2按如下格式定义圆角框逻辑结构+标题＝＝

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论