《ASP.NET Web程序设计 教学课件 ppt 作者 祁长兴_ chapter03》由会员分享，可在线阅读，更多相关《ASP.NET Web程序设计 教学课件 ppt 作者 祁长兴_ chapter03（70页珍藏版）》请在金锄头文库上搜索。
1、ASP.NET Web程序设计,3,样 式,第,章,本章内容,3.1 CSS技术,3.2 页面布局,3.3 案例：使用样式表美化页面,3.4 习题,3.1 CSS技术,CSS中文译为级联样式表，它是对Web页面显示效果进行控制的一套标准。 样式就是页面显示的文字、图片等元素的格式、风格。 级联样式也就是指当页面同一元素在显示时受到多种样式控制时，将按照一定的层次顺序处理。 3.1.1 CSS的概念 3.1.2 CSS常用的引用方式 3.1.3 样式表的嵌套使用 3.1.4 CSS属性 3.1.5 滤镜,级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式
2、表（Style Sheet）”，它是用来进行网页风格设计的一种用来表现HTML或 XML 等文件式样的计算机语言。 CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离。 CSS扩充了HTML标记的属性设定，使得页面显示效果更加丰富，表现效果更加灵活，更具有动态性。,3.1.1 CSS的概念,CSS的优势表现在两个方面： 1）简化了网页的格式代码，同时外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量。 2）只要修改保存了网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。,3.1.1 CSS的概念,CS
3、S定义的基本语法格式为：,3.1.1 CSS的概念,选择符规则列表,选择符是指要使用该样式的对象，可以是一个或多个HTML标记、ClASS选择符或ID选择符，如果为多个则使用逗号“,”进行分隔。 规则列表是由一个或多个属性定义语句组成的样式规则，各语句间使用分号“;”进行分隔。 属性定义语句的语法格式为：“属性名：属性值”。,3.1.2 CSS常用的引用方式,把样式运用到页面中有四种方式，分别为： 1. 内联样式 2. 嵌入式样式表 3. 链入外部样式表文件 4. 联合使用样式表（import 导入函数）。,3.1.2 CSS常用的引用方式,1. 内联样式：是在对象的标记内直接使用style属
4、性定义样式，是最简单的样式调用方法，可以灵巧地把样式应用到各标签对象中。,显示为红色12像素的字体 显示为蓝色12像素的字体,3.1.2 CSS常用的引用方式,例3-1,内联样式表的使用, 这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示 ,例3-1,内联样式效果图,3.1.2 CSS常用的引用方式,3.1.2 CSS常用的引用方式,2. 嵌入式样式表 ：即在HTML文档的和标记之间插入一个块对象。其语法格式为：,3.1.2 CSS常用的引用方式,例3-2,嵌入式样式表的使用,嵌入式样式表举例 网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。,例3
5、-2,嵌入式样式表效果图,3.1.2 CSS常用的引用方式,3.1.2 CSS常用的引用方式,如果不想让所有p元素的文本都用同一种样式，可以通过将p元素定义为多种样式，然后对不同段落通过class属性应用不同的样式。,嵌入式样式表举例 网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,例3-2,修改后的嵌入式样式表效果图,3.1.2 CSS常用的引用方式,3.1.2 CSS常用的引用方式,3. 链入外部样式表文件 首先，要建立单独的外部样式表文件（后缀名为.css），然后在HTML文档的和标记之间插入link
6、对象，格式如下：,3.1.2 CSS常用的引用方式,4. 联合使用样式表（import 导入函数） ：是将样式文件直接加载到import语句处，而链入外部样式表是直接向样式文件索取样式。格式如下：,3.1.3 样式表的嵌套使用,内联式样式表的优先级大于嵌入式样式表的优先级，嵌入式样式表的优先级又大于链入外部样式表的优先级。 如果链入外部样式表的元素位于嵌入式样式表的后面，则链入外部样式表优先级大于嵌入式样式表 。 直接在页面文件中使用HTML标记的style属性定义的样式优先级最高。 ID选择符的优先级高于CLASS选择符，没有被定义样式控制的内容将使用浏览器的默认样式。,例3-3,样式表嵌套
7、使用,3.1.3 样式表的嵌套使用,样式表嵌套使用举例 , 网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,3.1.3 样式表的嵌套使用,mystyle.css 内容如下：,pcolor:#ff0000;font-family:黑体;font-size:10pt,例3-3,运行效果,3.1.3 样式表的嵌套使用,如果链入外部样式表的元素位于嵌入式样式表的后面，如下代码所示,样式表嵌套使用举例 网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显
8、示时就被越后采用。,3.1.3 样式表的嵌套使用,例3-3,修改后的运行效果图,3.1.3 样式表的嵌套使用,3.1.4 CSS属性,CSS属性的名字是一个合法的标识符，它们是CSS语法中的关键字。对于属性的用法包括六个方面： 该属性的合法属性值（legal value） 。 属性的默认值（initial value） 。 该属性所适用的元素（Applies to） 该属性的值是否被下一级继承（inherited）。 如果该属性能取百分值（percentage），那么该百分值将如何解释。 该属性所属的媒介类型组（media groups）。,3.1.4 CSS属性,CSS中有些属性属于缩写属性
9、，即允许使用一个属性设置多个属性值。 在缩写属性中如果有一些值被省略，那么被省略的属性就被赋予其初始值。如：,div background-color:red; background-image:none; background-repeat:repeat; background-repeat:0% 0%; background-attachment:scroll; ,div background:red; ,3.1.5 滤镜,CSS通过Filter属性使用滤镜功能，Filter属性允许多个滤镜效果叠加。该属性的合法属性值（legal value） 。 滤镜属性只能作用在HTML控件元素上，即
10、在页面上定义了矩阵空间的标记。 滤镜属性也具有继承性，但如果一个已定位的元素嵌入到一个未定位的元素中时，其滤镜效果就会被忽略。 CSS滤镜属性的书写格式为： filter：filtername（parameters）,3.1.5 滤镜,1. alpha属性 该属性可将标记元素与背景相混合，产生透明渐变的效果，还可以通过数值来控制透明度。alpha属性的表达格式为：,filter：alpha（opacity=opcity，finishopacity=finishopacity， style=style，startX=startX，startY=startY，finishX=finishX，fin
11、ishY=finishY）,3.1.5 滤镜,例3-4,通过设置CSS滤镜中的opacity参数改变图片 的透明度, alpha /*定义CSS样式*/ ,3.1.5 滤镜,imgposition：absolute；top：20；left：40； filter：alpha(opacity=80) /*定义图片的样式，绝对定位，滤镜属性是透明度为80*/ Beautiful /*定义字体属性，前景色为红色*/ /*导入一张图片*/ ,3.1.5 滤镜,例3-4,运行效果图,3.1.5 滤镜,filter：alpha(opacity=0,finishopacity=100, style=1,sta
12、rtx=0,starty=85,finishx=150,finishy=85);,如果在上面的代码中稍做改动，则将产生另外多种效果。如只修改img的样式属性，把head中的Img样式属性代码改为如下所示：,3.1.5 滤镜,例3-4,修改后的运行效果图（style=1）,修改后的运行效果图（style=2）,修改后的运行效果图（style=3）,3.1.5 滤镜,2. blur属性 假如用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。blur属性的表达式：,filter：blur（add=add，direction，strength=stre
13、ngth）,Add参数有两个参数值：true和false，指定图片是否被改变成模糊效果。 Direction参数用来设置模糊的方向。 Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。,3.1.5 滤镜,例3-5,通过blur属性设置页面中的字体, /*CSS样式定义开始*/ ,3.1.5 滤镜,例3-5,运行效果,3.1.5 滤镜,3. Chroma属性 Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：,Filter：Chroma（color=color）,3.1.5 滤镜,例3-6,通过blur属性设置页面中的字体, divpositio
14、n：absolute；top：70；width：200； filter：chroma(color=green) /*定义DIV范围内绿色为透明色，另外设置DIV的位置*/ pfont-family：bailey；font-size：48；font-weight：bold； color：green /*设置P的字体名称、大小、粗细、颜色*/ emfont-family:lucida handwriting italic；font-size:48； font-weight：bold；color：rgb(255,51,153) /*设置EM的字体名称、大小、粗细、颜色*/ ,3.1.5 滤镜,例3-
15、6,通过上面代码中对chroma的属性设置，使绿色透明,3.1.5 滤镜,4. DropShadow属性 DropShadow属性是为了添加对象的阴影效果的，实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影，表达式如下：,Filter：DropShadow（Color=color，Offx=Offx，Offy=Offy，Positive=positive）,3.1.5 滤镜,例3-7,通过DropShadow属性设置阴影效果, div position:absolute；top:20；width:300； filter:dropshadow(color=#FFCCFF,
16、offx=15,offy=10,positive=1)； /*定义DIV范围内的样式，绝对定位，投影的颜色为#FFCCFF， 投影坐标为向右偏移15个像素，向下偏移10个像素*/ ,3.1.5 滤镜,例3-7,图中的文字就像是从页面上飞出来一样，并且留下了一层淡淡的影子,3.2 页面布局,网站页面的布局方式、展示形式直接影响用户使用网站的方便性，合理的页面布局会使用户快速发现网站的核心内容和服务。 DIV+CSS是目前最为流行的页面布局技术。DIV是指HTML标记集中的标记“”，中文可以理解为层的概念。改变了所见即所得的传统表格(table)布局设计方式。,3.2 页面布局,1. DIV+CSS的优势 网页改版维护更加方便快捷 保持视觉的一致性 页面载入得更快 对搜索引
