1、补：主题及样式表,L1. 主题 有两种类型的主题，一种是应用程序主题，另一种是全局主题。 1创建和应用主题的基本步骤 （1）在“解决方案资源管理器”中，右击项目名，选择“添加”“添加ASP.NET文件夹”“主题”菜单项，系统就会自动判断是否已经存在App_Themes文件夹，如果不存在该文件夹，就自动创建，并在该文件夹下添加一个主题文件夹；如果已经存在该文件夹，就直接在该文件夹下添加新的主题文件夹。 （2）在主题文件夹下添加外观控制文件和资源文件。 （3）打开.aspx文件，切换到“设计”视图，右击选择“属性”选项，在“属性”窗口顶部下拉列表中，选中“Document”文档对象，在列表中定位到
2、“StyleSheetTheme”，设置其值为某个主题名称，本页面就会自动套用主题内的外观控制文件和资源文件。,美化系统界面,L1. 主题,2给整个网站应用主题 为了快速地为整个应用程序中所有页面设置相同的主题，可以设置Web.Config文件的配置节内容：,返回,L2. 样式表,在XHTML中，每个标记都可称为一个元素。元素是构成XHTML源代码的基本单位，一般用“”开头，用“”结束。例如，等，有些元素也可以以“”的形式出现，如。 样式是指元素在浏览器中的呈现形式，如元素的高度、宽度、是否有边框、边框颜色、边框粗细、字体大小、字体颜色、元素的背景色和背景图片、元素内数据的对齐方式等。在XHT
3、ML中可以通过style属性设置元素的样式，每个style内包含一个或多个属性，其一般形式为：属性名与属性值之间用冒号“：”分隔，如果一个样式有多个属性，各属性之间用分号“;”隔开。,返回,L3. 样式选择符,CSS规定了3种定义样式的方式： 一是直接将样式放置在元素内，通过style属性设置，称为内联式； 二是在网页的head部分定义样式，称为嵌入式； 三是以扩展名为.css的文件保存样式定义，称为外部链接式。 内联式适用于单独控制某个元素样式的情况。这种方式的优点是设置样式直观、方便；缺点是修改某些元素的样式时，需要打开网页文件。 下边的代码采用内联式控制各个元素的样式：学生 成绩管理系统
4、,L3. 样式选择符,嵌入式适合控制一个网页内具有相同样式的多个元素。采用这种方式的优点是当修改某些元素的样式时，只需要修改head部分的样式规则即可，该网页内所有使用了该样式规则的元素都会自动应用新的样式。但这种方式仅仅适用于修改某个网页内的具有相同样式的元素，如果多个网页的很多元素均采用相同的样式，仍然需要在各个网页的head部分重复定义相同的样式规则。 在head内定义样式，可以将代码修改如下：一个Hello网页#div0text-align: center;imgwidth: 300px; height: 60px;#div1font-size: 40px; color: red;学生
5、 成绩管理系统,L3. 样式选择符,外部链接式适用于控制多个网页内具有相同样式的元素。这种方式将样式保存在一个或多个单独的.css文件中，当需要修改元素的样式时，只需要修改.css文件中的样式规则即可。一旦修改.css文件中的某个样式规则，凡是引用了.css内修改过的样式规则的元素，都会自动应用新的样式。 .css文件内的内容和嵌入式方式下head内的style标记内的内容相同，只是单独保存在一个文件中，例如： #div0text-align: center; imgwidth: 300px; height: 60px; #div1font-size: 40px; color: red; 在X
6、HTML中引用样式文件后，文件内的元素才会应用样式文件内的样式规则。引用样式文件的方法：在head标记块内添加下面的代码。其中，rel属性规定了XHTML与被链接文件的关系，type属性规定了链接文件的类型，href属性规定了要链接的样式文件的URL。,L3. 样式选择符,样式规则必须符合如下格式： 样式选择符 样式属性1:值1; 样式属性2:值2; 样式属性3:值3; 其中包含两个部分：样式选择符，样式属性。 为了方便控制样式规则所作用的元素范围，CSS中把样式选择符分为如下几类：标签选择符、类选择符、ID选择符、虚类选择符、包含选择符和并列选择符。 1标签选择符 标签选择符（即HTML或X
7、HTML标记）是最典型的选择符类型。定义的时候直接使用标记名称作为选择符名称。常见格式如下： 标签名 样式属性1:值1; 样式属性2:值2; 样式属性3:值3; 例如： div background-color: white; /背景颜色text-align: center; /文本水平布局 ,L3. 样式选择符,2类选择符 标签选择符比较方便，能够对某种标签定义样式，但是有的时候并不想对网页内所有此标签应用同一种样式，而只想对某些标签应用某种样式，它们不一定会是相同的标签。常见形式如下： .类名 样式属性1:值1; 样式属性2:值2; 样式属性3:值3; 例如： .center backgr
8、ound-color: white; /背景颜色text-align: center; /文本水平布局 如果某个标签的class属性设置为类选择符的名称，类选择符就会对此标签起作用。例如： 类选择符 类选择符 h1和h2的class属性都设置为center，则center样式规则就会对它们起作用。,L3. 样式选择符,3ID选择符 ID选择符用于对某个元素定义样式规则，只能用于某个元素。常见格式如下： ID名称 样式属性1:值1; 样式属性2:值2; 样式属性3:值3; 例如： #header background-color: white;text-align: center; 如果某个标签
9、的ID属性的值和ID选择符的名称相同，则ID选择符会对此标签生效。例如：. ,L3. 样式选择符,4伪类 “伪类”是专门针对超链接标签的选择符，使用伪类可以为访问过的、未访问过的、激活的、鼠标指针悬停于其上的4种状态超链接定义不同的显示样式： A:link：代表未访问过的超链接。 A:visited：代表访问过的超链接。 A:active：当超链接处于选中状态。 A:hover：当鼠标指针移动到超链接上。 例如： A:active color: blue;background-color: buttonface; ,L3. 样式选择符,5包含选择符 包含选择符用于定义具有层次关系的样式规则，它
10、由多个样式选择符组成，一般格式如下： 选择符1 选择符2 样式属性1:值1; 样式属性2:值2; 样式属性3:值3; 各选择符之间用空格分割，例如： DIV P H1 font-weight: bold;color: red; ,返回,L4. 样式生成器,样式生成器可以帮助设计者快速地设置元素的样式，在“设计”视图下，选中某个元素，右击选择“属性”，在“属性”窗口中选择“style”，即可出现如图4.29所示“修改样式”窗口。,图4.29 样式设计器字体,L4. 样式生成器,注：Visual Studio 2008为了便于元素的选择，提供了HTML标签导航，如图4.30所示，用于显示目前鼠标所
11、在区域所使用的HTML标签，在HTML标签导航单击标签，就可以选中该元素。如果在“设计”视图中不方便精确选择，可以打开“属性”窗口，再切换到“源”视图，把光标定位到某个元素内。“属性”窗口中就会显示对应元素的属性。,图4.30 HTML标签导航,L4. 样式生成器,1字体 如图4.29所示，字体类别主要用来对元素内的文本的字体进行相应的设置，可以设置字体名称（font-family），字体大小（font-size），字体粗细（font-weight），字体风格（font-style），小型大写字母字体（font-variant），字母转换（font-transform），字体颜色（color）
12、，字体装饰（text-decoration）。 （1）font-family：设置元素内字体所采用的字体名称，如“宋体”、“黑体”等。 （2）font-size：设置元素内字体的大小，字体的大小采用CSS中统一的长度单位。 字体大小的取值很多，可能取值如表4.3、表4.4所示。,L4. 样式生成器,（3）font-weight：设置元素内字体的粗细，可能取值如表4.5所示。,表4.5 font-weight取值,L4. 样式生成器,（4）font-style：设置元素内字体的风格，可能的取值如表4.6所示。,表4.6 font-style取值,L4. 样式生成器,（5）font-variant
13、：设置元素内小型大写字母的显示方式，可能的取值如表4.7所示。,表4.7 font-variant取值,L4. 样式生成器,（6）font-transform：设置元素内单词的字母转换，可能的取值如表4.8所示。,表4.8 font-transform取值,L4. 样式生成器,（7）color：设置元素内字体的颜色。通过可视化的颜色选择器进行选择即可。 （8）text-decoration：设置字体的装饰，可能的取值如表4.9所示。,表4.9 text-decoration取值,L4. 样式生成器,2块 如图4.31所示，块主要用来对文本块进行设置，可以设置块内文字的行高（line-heigh
14、t），文字垂直对齐方式（vertical-align），文字水平对齐方式（text-align），文字缩进（text-indent），空格字符处理方式（white-space），单词间距（word-spacing），文字间距（letter-spacing）。,图4.31 样式设计器块,L4. 样式生成器,（1）line-height：设置元素内文字的行高，字体最底端与字体内部顶端之间的距离，取值为“由浮点数字和单位标识符组成的长度值 | 百分数”。 （2）vertical-align：设置元素内文字的垂直对齐方式，可能的取值如表4.10所示。,表4.10 vertical-align取值,L4
15、. 样式生成器,（3）text-align：设置元素内文字的水平对齐方式，可能的取值如表4.11所示。,表4.11 text-align 取值,L4. 样式生成器,（4）text-indent：设置元素内文字的缩进，取值为“由浮点数字和单位标识符组成的长度值 | 百分数”。 （5）white-space：设置元素内空格字符处理方式，可能的取值如表4.12所示。,表4.12 white-space 取值,（6）word-spacing：设置元素内单词间的间距，取值为“由浮点数字和单位标识符组成的长度值 | 百分数”。 （7）letter-spacing：设置元素内文字间的间距，取值为“由浮点数字
16、和单位标识符组成的长度值 | 百分数”。,L4. 样式生成器,3背景 如图4.32所示，背景类别主要用来对元素的背景进行相应的设置，可以设置背景颜色（background-color），背景图片（background-image），背景图片的平铺方式（background-repeat），背景图片的滚动方式（background-attachment），背景图片在元素内的X轴与Y轴的相对位置（background-position）等。,图4.32 样式设计器背景,L4. 样式生成器,（1）background-color：设置元素背景颜色，通过颜色选择窗口选择。 （2）background-
17、image：设置元素背景图片，通过“浏览”定位到某张图片。 （3）background-repeat：设置元素背景图片的平铺方式，常用于背景图片大小小于元素的大小的情况，可能取值如表4.13所示。,表4.13 background-repeat取值,L4. 样式生成器,（4）background-attachment：设置元素背景图片是否随元素内容滚动，对于那些带滚动条的元素需要设置，可能取值如表4.14所示。,表4.14 background-attachment取值,L4. 样式生成器,（5）background-position：设置背景图片在元素内的位置。分为X轴上的位置和Y轴上的位置
18、，元素的左上角为坐标原点，顶部边缘往右的方向为X轴方向，左部边缘向下的方向为Y轴方向。它们可能的取值如表4.15所示。,表4.15 (x),(y)background-position取值,L4. 样式生成器,4边框 如图4.33所示，用来设置元素四周的边框样式（border-style），边框宽度（border-width），边框颜色（border-color）。,图4.33 样式生成器边框,L4. 样式生成器,（1）border-style：设置元素边框的样式，可能取值如表4.16所示。,表4.16 border-style取值,L4. 样式生成器,（2）border-width：设置元素
19、边框的宽度，可能取值如表4.17所示。,表4.17 border-width取值,（3）border-color：设置元素边框的颜色，通过颜色选择窗口选择。,L4. 样式生成器,5方框 如图4.34所示，方框类别用来设置元素边框与其他元素边框之间距离，称为边距（Margin）。设置元素内容与元素边框之间距离，称为空白（Padding）。,图4.34 样式控制器方框,L4. 样式生成器,要理解元素边距和空白的概念，需要理解CSS中元素的“盒模型”。网页内的每一个元素在网页上都是可以看成一个盒子，盒子结构如图4.35所示。即一个元素由如下几部分组成的：内容、空白、边框、边距。因此一个元素的实际长度
20、等于：左边距左边框左空白内容长度右空白右边框右边距。,图4.35 CSS盒子模型,L4. 样式生成器,6定位 如图4.36所示，定位类别主要用来设置元素在页面中的位置属性。包括位置模式（position），层次顺序（z-index），宽度（width），高度（height），相对具有定位设置的父元素的位置关系（top、right、bottom、left）。,图4.36 样式控制器定位,L4. 样式生成器,position：用来设置元素在网页内的位置模式，可能取值如表4.18所示。,表4.18 position取值,L4. 样式生成器,不同位置模式的定位原则如下。 （1）正常流中的位置 正常流中
21、的位置是按照如下的布局显示的。网页中的元素按照从左到右、从上到下的顺序显示，各元素之间不重叠。如果不设置元素定位方式，则正常流中的位置作为默认显示方式。 （2）绝对定位 绝对位置是指元素显示在页中的位置由sytle样式的top、right、bottom、left及z-index属性决定的。,L4. 样式生成器,（3）正常流中的偏移量 正常流中的偏移量是元素在正常流中的位置基础上，再做一定的偏移后所处的位置为元素的显示位置。如果元素在正常流中的位置做了偏移，那以前应该在的位置会出现一个空洞，别的元素无法占用。因此一般只把一个元素的模式设置为“正常流中偏移量”，而实际不进行位置偏移。 top是元素
22、上边框离参考物上边框的距离，right是元素右边框离参考物右边框的距离，bottom是元素下边框离参考物下边框的距离，left是元素左边框离参考物左边框的距离。 top、right、bottom、left的取值为“由浮点数字和单位标识符组成的长度值 | 百分数”，可以取负值。 top、right、bottom、left属性的值只有在absolute和relative位置模式下才有效。 width和height是元素的宽度和高度。当设置了width和height属性的值，又设置top、right、bottom、left属性的值的情况下，则元素的位置只受width、height、top和left属
23、性的约束。,L4. 样式生成器,7布局 如图4.37所示，布局类别主要用来设置元素在网页内的布局属性。包括可见性（visibility），显示方式（display），浮动（float），浮动清除（clear），光标形状（cursor），溢出控制（overflow），可视区域（clip：rect（）。,图4.37 样式控制器布局,L4. 样式生成器,（1）visibility：设置元素的可视属性，可能取值如表4.19所示。,表4.19 visibility取值,L4. 样式生成器,（2）display：设置元素是否显示及如何显示，可能取值如表4.20所示。,表4.20 display取值,（3）
24、float：设置元素相对于父元素的浮动，可能取值如表4.21所示。,表4.21 float取值,L4. 样式生成器,（4）clear：设置元素两边是否允许有浮动元素，可能取值如表4.22所示。,表4.22 clear取值,L4. 样式生成器,（5）cursor：设置光标停留到元素内的形状。 （6）overflow：设置元素内容溢出情况下的显示方式，可能取值如表4.23所示。,表4.23 overflow取值,（7）clip：设置元素的可视区域，通过一个矩形区域来指定。,L4. 样式生成器,8列表 如图4.38所示，列表类别主要用来设置元素内的列表元素的列表样式。包括列表标记样式（list-style-type），列表标记图片（list-style-image），列表标记位置（list-style-position）。只有元素内有列表元素的时候，列表元素的列表样式才受影响。可以通过“列表”设置有序列表和无序列表的样式。,图4.38 样式控制器列表,L4. 样式生成器,（1）list-style-type：设置元素内列表项所使用的预设标记，可能取值如表4.24所示。,表4.24 list-style-type取值,（2）list-style-image：设置元素内列表项所使用的图片。,返回,
