ASP NET 4.5动态网站开发实用教程电子教案 杨春元 第四章

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

2020年2月10日第1页第4章样式、主题和母版页教学目标本章内容2020年2月10日第2页教学目标编写和应用CSS样式VS提供的编写CSS的工具创建和应用主题在主题中定义外观skinID属性的使用创建母版页和内容页2020年2月10日第3页本章内容4.1CSS样式4.2在VS中使用CSS4.3页面布局4.4主题4.5母版页4.6上机练习4.7习题2020年2月10日第4页本章内容4.1CSS样式4.2在VS中使用CSS4.3页面布局4.4主题4.5母版页4.6上机练习4.7习题2020年2月10日第5页4.1CSS样式Internet出现伊始,Web页面主要由文本和图像组成。文本是使用纯HTML格式化的,这种格式化所提供的样式化页面的选项很有限,因此诞生了CSS来弥补这方面的缺陷。什么是CSSCSS属性简介2020年2月10日第6页HTML格式的不足使用HTML格式化存在如下一些问题:–它的有限功能集远远满足不了页面的格式化需求。–数据与表现混合在相同的文件中。–HTML无法在浏览器中于运行时轻松地切换格式。–必需的格式化标记与属性使页面更大,因此加载和显示更慢。2020年2月10日第7页什么是CSSCSS(CascadingStyleSheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。就语法而言,CSS是一种容易学习的语言。它的“语法”仅由几个概念组成,使得它相当容易入门。CSS的难点在于所有主流浏览器呈现页面的方式。尽管实际上每种浏览器都能够理解CSS,但当根据CSS标准显示页面时,它们都有各自的“怪癖”。CSS规定了两种定义样式的方法,分别是内联式和级联式。2020年2月10日第8页内联式样式直接将样式控制放在单个HTML元素内,称为内联式或行内样式。该样式通过style属性来控制每个元素的外观,直观但是很繁琐。除非具有相同样式的元素较少,否则很少采用。2020年2月10日第9页级联式样式在网页的head部分定义或导入的样式,称为级联式样式。该样式可以实现将网页结构和表现分离,这样,当修改某些元素的样式时,只需要修改head部分定义或引入的样式,该网页内所有具有相同样式的元素都会自动应用新的样式。级联式样式又可以分为两种方式:内嵌式和链接式。2020年2月10日第10页内嵌式在head部分直接实现的CSS样式,称为内嵌式。这种CSS一般位于HTML文件的头部,即在head与/head标签内,并且以style开始,以/style结束。采用内嵌式比内联式方便了很多,body内的代码也相对简洁,修改某个元素的样式时只需修改head内的代码即可。2020年2月10日第11页链接式在head部分通过导入以扩展名为.css的文件来实现CSS样式,称为链接式。利用这种方法在网页中可以调用已经定义好的样式表来实现样式表的应用,定义好的样式表通常单独以文件的形式存放在站点目录中。这种方法实现了将网页结构和表现的彻底分离,最适合大型网站的CSS样式定义。2020年2月10日第12页样式嵌套如果某个元素既引用了链接样式文件中定义的样式,又在head部分定义了新的样式,或者在元素内部通过style属性定义了新的样式,那么该标记元素最终呈现的效果会是什么样呢?这就是样式嵌套中的冲突问题,浏览器解决这种问题的方法就是一旦发现样式冲突,则通过“就近使用”原则,而不冲突的样式则通过顺序组合后形成最终样式进行显示。一般情况下,在样式表(.css)文件中定义适合大多数网页公用的样式,在网页内部采用内嵌式定义该页面特有的样式。2020年2月10日第13页CSS属性属性是元素的一部分,可通过样式表修改。CSS规范定义了一个长属性列表,但在大多数Web站点中不会用到所有项。VWD会通过它的许多CSS工具帮助找到恰当的属性,因此不必全部记住它们。2020年2月10日第14页本章内容4.1CSS样式4.2在VS中使用CSS4.3页面布局4.4主题4.5母版页4.6上机练习4.7习题2020年2月10日第15页4.2在VS中使用CSSVS中有几个使用CSS的便利工具:–【样式表】工具栏:用来快速访问并创建新规则与样式。–【CSS属性】面板:用来修改属性值。–【属性】面板中的style属性:设置或修改CSS属性。–【管理样式】窗口:用来组织站点的样式,将它们从内嵌样式表改为外部样式表,反之亦然;对它们重新排序;将现有样式表链接到一个文档;创建新的内联、内嵌或外部样式表。–【应用样式】窗口:用来从站点中选择所有可用样式,并将它们快速地应用到页面中的不同元素上。2020年2月10日第16页新建样式在源视图下设置样式通过【属性】面板设置style属性新建内嵌式样式使用【CSS属性】面板新建样式表文件2020年2月10日第17页在源视图下设置样式在【源】视图下,利用系统提供的智能提示功能,可以方便地设置各种元素的样式内联式样式,具体步骤如下:–(1)在想要设置格式的HTML标记内,输入style=,并按空格键,将弹出VWD2010提供的“智能提示”工具。–(2)定义任意数量的属性(“属性:值”对),属性之间用分号分隔。2020年2月10日第18页通过【属性】面板设置style属性在源视图或者设计视图下选中某个标记元素,在【属性】面板中找到style属性,单击该属性后面的省略号按钮(…),将打开【修改样式】对话框该对话框分为两个窗格,左窗格列出9个类别,当选择某个类别时,右窗格显示所选类别下的选项。设置了样式选项并单击【确定】按钮后,新的样式定义将自动在源视图中生成,也可以在设计视图下查看最新的效果。2020年2月10日第19页新建内嵌式样式在页面的设计视图下,在【格式设置】工具栏的【目标规则】列表中,选择【应用新样式】选项此时将打开【新建样式】对话框,该对话框与【修改样式】对话框相似,所不同的是【新建样式】对话框中包含了【选择器】,用于选择对哪一个标记进行定义,以及通过【定义位置】将当前定义存放到哪里2020年2月10日第20页使用CSS属性面板可以使用【CSS属性】面板对正在定义的内嵌式样式规则进行修改,具体步骤如下。–(1)选择【视图】|【CSS属性】命令,打开【CSS属性】面板。–(2)单击要修改样式的元素,【CSS属性】面板中将显示当前营业的规则,以及该规则下定义的元素的CSS属性。–(3)通过该面板可以很直观地修改CSS属性。CSS属性列表中所做的修改可以立即通过设计视图显示出来,相应的样式代码,也会根据样式类型自动添加到相应的定义处。2020年2月10日第21页新建样式表文件(1)打开【添加新项】对话框,在【模板】列表中选择【样式表】选项,在【名称】文本框中输入样式表的名称StyleSheet.CSS,单击【添加】按钮即可(2)此时,编辑器将打开一个包含空body样式规则的新样式表。(3)打开或切换到要附加样式表的页面的设计视图。选择【格式】|【附加样式表】命令,打开【选择样式表】对话框,选择刚才创建的样式表文件StyleSheet.css,单击【确定】按钮2020年2月10日第22页添加样式规则一个样式表由若干个样式规则组成。样式规则是指网页元素的样式定义,包括元素的显示方式以及元素在页中的位置等。打开前面添加的样式表文件StyleSheet.css,此时的样式表是一个只包含body元素的空规则,在大括号内右击鼠标,从弹出的快捷菜单中选择【生成样式】命令,即可打开【修改样式】对话框,通过该对话框即可定义该元素的样式规则2020年2月10日第23页标记选择符任何HTML元素都可以是一个CSS的标记选择符。标记选择符仅仅是指向特别样式的元素。只需在样式表文件最后一行输入一个HTML元素,后跟一对大括号即可添加此类元素的样式定义,如:tr{}。2020年2月10日第24页类选择符每个标记选择符都能自定义不同的类,从而允许同一元素具有不同的样式。指定某个标记选择符内的自定义类的一般形式为:–标记选择符.类名{样式属性1:值1;样式属性2:值2;……}在代码中引用类选择符的方法是通过元素的class属性来实现的。代码如下:–pclass=one类别选择器1/p–pclass=two类别选择器2/p2020年2月10日第25页ID选择符ID选择符用于分别定义每个具体元素的样式。一个ID选择符的指定要有指示符#在名字前面。使用时通过指定元素的id属性来关联。例如:–#index{color:blue}引用时,使用id属性声明即可。–pid=index本段落的颜色为蓝色/p2020年2月10日第26页伪类伪类是CSS中非常特殊的类,它能自动地被支持CSS的浏览器所识别。伪类可以指定XHTML中的a元素以不同的方式显示链接(links)、已访问链接(visitedlinks)和可激活链接(activelinks)。甚至不同字体大小和风格。CSS中用4个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a:active,例如:–a:link{font-weight:bold;text-decoration:none;color:#C00000;}–a:visited{font-weight:bold;text-decoration:none;color:#C30000;}2020年2月10日第27页关联选择符关联选择符是一个用空格隔开的两个或更多的单一标记选择符组成的字符串。一般格式如下:–选择符1选择符2……{属性:值;……}这些选择符具有层次关系,并且它们的优先级比单一的标记选择符大。例如:–ph2{color:red}这种定义方式只对p元素所包含的h2元素起作用,单独的p或者单独的h2元素均无法应用该样式。2020年2月10日第28页并列选择符如果有多个不同的元素定义的样式相同,则可以使用并列选择符简化定义。例如:–h1,h2,h3{color:blue}每个元素之间用逗号隔开,表示所有的h1、h2、h3标记中的内容都将以蓝色样式显示。2020年2月10日第29页本章内容4.1CSS样式4.2在VS中使用CSS4.3页面布局4.4主题4.5母版页4.6上机练习4.7习题2020年2月10日第30页4.3页面布局除了为页面的内容设置样式,页面元素的布局和定位是否合理也是衡量网页设计是否美观的重要指标。本节将介绍网页的基本布局方式,页面元素的定位,以及表格布局和层布局。网页布局概述页面元素定位表格布局DIV和CSS布局2020年2月10日第31页页面水平居中设置页面水平居中的方法是在body的style样式中设置text-align属性的值为center。如果还希望页面的宽度固定,则可以通过设置div的width属性来实现。例如下面的代码:bodystyle=text-align:center;formid=form1runat=serverdivid=div1style=width:760px;text-align:center;height:200px/div/form/body2020年2月10日第32页页面满宽度显示设置页面满宽显示的方法是将div的固定宽度设置为百分比即可。例如下面的代码:–bodystyle=text-align:center;–formid=form1runat=server–divid=div1style=width:98%;text-align:center;height:200px/div–/form–/body2020年2月10日第33页页面元素定位页面元素的定位分为流布局和坐标定位布局两种,其中,坐标定位布局又分为绝对定位和相对定位,这里仅介绍流布局和坐标绝对定位。如果采用该布局,则页面中的元素将按照从左到右、从上到下的顺序显示,各元素之

1 / 61
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功