补充：主题及样式表.ppt

补：主题及样式表 L1. 主题 有两种类型的主题，一种是应用程序主题，另一种是全局主题。 1创建和应用主题的基本步骤 （1）在“解决方案资源管理器”中，右击项目名，选择“添加”“添加 ASP.NET文件夹”“主题”菜单项，系统就会自动判断是否已经存在 App_Themes文件夹，如果不存在该文件夹，就自动创建，并在该文件夹 下添加一个主题文件夹；如果已经存在该文件夹，就直接在该文件夹下添 加新的主题文件夹。 （2）在主题文件夹下添加外观控制文件和资源文件。 （3）打开.aspx文件，切换到“设计”视图，右击选择“属性”选项，在“ 属性”窗口顶部下拉列表中，选中“Document”文档对象，在列表中定位到 “StyleSheetTheme”，设置其值为某个主题名称，本页面就会自动套用主题 内的外观控制文件和资源文件。 美化系统界面 2给整个网站应用主题 为了快速地为整个应用程序中所有页面设置相同的主题，可以设置 Web.Config文件的配置节内容： 在XHTML中，每个标记都可称为一个元素。元素是构成XHTML源代码 的基本单位，一般用“”开头，用“”结束。例如， ，等，有些元素也可以以“”的形 式出现，如。 样式是指元素在浏览器中的呈现形式，如元素的高度、宽度、是否 有边框、边框颜色、边框粗细、字体大小、字体颜色、元素的背景色和 背景图片、元素内数据的对齐方式等。在XHTML中可以通过style属性设 置元素的样式，每个style内包含一个或多个属性，其一般形式为： 属性名与属性值之间用冒号“：”分隔，如果一个样式有多个属性，各 属性之间用分号“;”隔开。 CSS规定了3种定义样式的方式： 一是直接将样式放置在元素内，通过style属性设置，称为内联式； 二是在网页的head部分定义样式，称为嵌入式； 三是以扩展名为.css的文件保存样式定义，称为外部链接式。 内联式适用于单独控制某个元素样式的情况。这种方式的优点是设置样式直观 、方便；缺点是修改某些元素的样式时，需要打开网页文件。 下边的代码采用内联式控制各个元素的样式： 学生 成绩管理系 统 嵌入式适合控制一个网页内具有相同样式的多个元素。采用这种方式的优点是 当修改某些元素的样式时，只需要修改head部分的样式规则即可，该网页内所有使 用了该样式规则的元素都会自动应用新的样式。但这种方式仅仅适用于修改某个网 页内的具有相同样式的元素，如果多个网页的很多元素均采用相同的样式，仍然需 要在各个网页的head部分重复定义相同的样式规则。 在head内定义样式，可以将代码修改如下： 一个Hello网页 #div0text-align: center; imgwidth: 300px; height: 60px; #div1font-size: 40px; color: red; 学生 成绩管理系统 外部链接式适用于控制多个网页内具有相同样式的元素。这种方式将样式保 存在一个或多个单独的.css文件中，当需要修改元素的样式时，只需要修改.css文 件中的样式规则即可。一旦修改.css文件中的某个样式规则，凡是引用了.css内修 改过的样式规则的元素，都会自动应用新的样式。 .css文件内的内容和嵌入式方式下head内的style标记内的内容相同，只是单独 保存在一个文件中，例如： #div0text-align: center; imgwidth: 300px; height: 60px; #div1font-size: 40px; color: red; 在XHTML中引用样式文件后，文件内的元素才会应用样式文件内的样式规则 。引用样式文件的方法：在head标记块内添加下面的代码。 其中，rel属性规定了XHTML与被链接文件的关系，type属性规定了链接文件 的类型，href属性规定了要链接的样式文件的URL。 样式规则必须符合如下格式： 样式选择符 样式属性1:值1;样式属性2:值2; 样式属性3:值3; 其中包含两个部分：样式选择符，样式属性。 为了方便控制样式规则所作用的元素范围，CSS中把样式选择符分为如下几类 ：标签选择符、类选择符、ID选择符、虚类选择符、包含选择符和并列选择符。 1标签选择符 标签选择符（即HTML或XHTML标记）是最典型的选择符类型。定义的时候直 接使用标记名称作为选择符名称。常见格式如下： 标签名 样式属性1:值1;样式属性2:值2; 样式属性3:值3; 例如： div background-color: white; /背景颜色 text-align: center;/文本水平布局 2类选择符 标签选择符比较方便，能够对某种标签定义样式，但是有的时候并不想对网 页内所有此标签应用同一种样式，而只想对某些标签应用某种样式，它们不一定 会是相同的标签。常见形式如下： .类名 样式属性1:值1; 样式属性2:值2; 样式属性3:值3; 例如： .center background-color: white; /背景颜色 text-align: center;/文本水平布局 如果某个标签的class属性设置为类选择符的名称，类选择符就会对此标签起 作用。例如： 类选择符 类选择符 h1和h2的class属性都设置为center，则center样式规则就会对它们起作用。 3ID选择符 ID选择符用于对某个元素定义样式规则，只能用于某个元素。常见格 式如下： ID名称 样式属性1:值1; 样式属性2:值2; 样式属性3:值3; 例如： #header background-color: white; text-align: center; 如果某个标签的ID属性的值和ID选择符的名称相同，则ID选择符会对 此标签生效。例如： . 4伪类 “伪类”是专门针对超链接标签的选择符，使用伪类可以为访问过的、 未访问过的、激活的、鼠标指针悬停于其上的4种状态超链接定义不同的 显示样式： A:link：代表未访问过的超链接。 A:visited：代表访问过的超链接。 A:active：当超链接处于选中状态。 A:hover：当鼠标指针移动到超链接上。 例如： A:active color: blue; background-color: buttonface; 5包含选择符 包含选择符用于定义具有层次关系的样式规则，它由多个样式选择符 组成，一般格式如下： 选择符1 选择符2 样式属性1:值1;样式属性2:值2; 样式属性3:值3; 各选择符之间用空格分割，例如： DIV P H1 font-weight: bold; color: red; 样式生成器可以帮助设计者快速地设置元素的样式，在“设计”视图下，选中 某个元素，右击选择“属性”，在“属性”窗口中选择“style”，即可出现如图4.29所 示“修改样式”窗口。 图4.29 样式设计器字体 注：Visual Studio 2008为了便于元素的选择，提供了HTML标签导航，如图 4.30所示，用于显示目前鼠标所在区域所使用的HTML标签，在HTML标签导航单 击标签，就可以选中该元素。如果在“设计”视图中不方便精确选择，可以打开“属 性”窗口，再切换到“源”视图，把光标定位到某个元素内。“属性”窗口中就会显示 对应元素的属性。 图4.30 HTML标签导航 1字体 如图4.29所示，字体类别主要用来对元素内的文本的字体进行相应的 设置，可以设置字体名称（font-family），字体大小（font-size），字体 粗细（font-weight），字体风格（font-style），小型大写字母字体（font- variant），字母转换（font-transform），字体颜色（color），字体装饰 （text-decoration）。 （1）font-family：设置元素内字体所采用的字体名称，如“宋体”、“ 黑体”等。 （2）font-size：设置元素内字体的大小，字体的大小采用CSS中统一 的长度单位。 字体大小的取值很多，可能取值如表4.3、表4.4所示。 （3）font-weight：设置元素内字体的粗细，可能取值如表4.5所示。 值描 述 normal默认。定义标准的字符 bold定义粗体字符 bolder定义更粗的字符 lighter定义更细的字符 100 200 300 400 500 600 700 800 900 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold 表4.5 font-weight取值 （4）font-style：设置元素内字体的风格，可能的取值如表4.6所示。 值描 述 normal默认。浏览器显示标准的字体 italic浏览器显示斜体的字体 oblique浏览器显示倾斜的字体 表4.6 font-style取值 （5）font-variant：设置元素内小型大写字母的显示方式，可能的取值如表4.7 所示。 值描 述 normal默认。浏览器显示一个标准的字体 small-caps 浏览器显示小型大写字母的字体，这意味着所有的小写字母均会被转换 为大写，但是所有使用小型大写字体的字母与其他文本相比，其字体尺寸 更小 表4.7 font-variant取值 （6）font-transform：设置元素内单词的字母转换，可能的取值如表4.8所示 。 值描 述 none默认，无转换发 生 capitalize将每个单词的第一个字母转换成大写，其他无转换发 生 uppercase转换成大写 lowercase转换成小写 表4.8 font-transform取值 （7）color：设置元素内字体的颜色。通过可视化的颜色选择器进行选择即 可。 （8）text-decoration：设置字体的装饰，可能的取值如表4.9所示。 值描 述值描 述 none 默认，无装饰line-through贯穿线 blink闪烁overline上划线 underline下划线 表4.9 text-decoration取值 2块 如图4.31所示，块主要用来对文本块进行设置，可以设置块内文字的行高（ line-height），文字垂直对齐方式（vertical-align），文字水平对齐方式（text- align），文字缩进（text-indent），空格字符处理方式（white-space），单词间距 （word-spacing），文字间距（letter-spacing）。 图4.31 样式设计器块 （1）line-height：设置元素内文字的行高，字体最底端与字体内部顶端之间 的距离，取值为“由浮点数字和单位标识符组成的长度值 | 百分数”。 （2）vertical-align：设置元素内文字的垂直对齐方式，可能的取值如表4.10 所示。 值描 述 sub垂直对齐文本的下标 super垂直对齐文本的上标 值 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定 义由基线算起的偏移量。基线对于数值来说为0，对于百分数来 说就是0% 表4.10 vertical-align取值 （3）text-align：设置元素内文字的水平对齐方式，可能的取值如表4.11所示 。 值描 述 left默认值。左对齐 right右对齐 center居中对齐 justify两端对齐 表4.11 text-align 取值 （4）text-indent：设置元素内文字的缩进，取值为“由浮点数字和单位标识符 组成的长度值 | 百分数”。 （5）white-space：设置元素内空格字符处理方式，可能的取值如表4.12所示 。 值描 述 normal默认处理方式。文本自动处理换行。假如抵达容器边界，内容会转到下一行 pre用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐 nowrap强制在同一行内显示所有文本，直到文本结束或遇到br元素 表4.12 white-space 取值 （6）word-spacing：设置元素内单词间的间距，取值为“由浮点数字和单位标 识符组成的长度值 | 百分数”。 （7）letter-spacing：设置元素内文字间的间距，取值为“由浮点数字和单位标 识符组成的长度值 | 百分数”。 3背景 如图4.32所示，背景类别主要用来对元素的背景进行相应的设置，可以设置 背景颜色（background-color），背景图片（background-image），背景图片的平 铺方式（background-repeat），背景图片的滚动方式（background-attachment） ，背景图片在元素内的X轴与Y轴的相对位置（background-position）等。 图4.32 样式设计器背景 （1）background-color：设置元素背景颜色，通过颜色选择窗口选择。 （2）background-image：设置元素背景图片，通过“浏览”定位到某张图片。 （3）background-repeat：设置元素背景图片的平铺方式，常用于背景图片大 小小于元素的大小的情况，可能取值如表4.13所示。 值描 述 repeat默认值。背景图像在纵向和横向上平铺 no-repeat背景图像不平铺两端对齐 repeat-x背景图像仅在横向上平铺 repeat-y背景图像仅在纵向上平铺 表4.13 background-repeat取值 （4）background-attachment：设置元素背景图片是否随元素内容滚动，对于 那些带滚动条的元素需要设置，可能取值如表4.14所示。 值描 述 scroll默认值。背景图像随元素内容的滚动而滚动 fixed背景图像固定 表4.14 background-attachment取值 （5）background-position：设置背景图片在元素内的位置。分为X轴上的位置 和Y轴上的位置，元素的左上角为坐标原点，顶部边缘往右的方向为X轴方向，左 部边缘向下的方向为Y轴方向。它们可能的取值如表4.15所示。 值描 述 left居左 center居中 right居右 值百分数 | 由浮点数字和单位标识符组成的长度值 表4.15 (x),(y)background-position取值 4边框 如图4.33所示，用来设置元素四周的边框样式（border-style），边框宽度（ border-width），边框颜色（border-color）。 图4.33 样式生成器边框 （1）border-style：设置元素边框的样式，可能取值如表4.16所示。 值描 述 none默认值。无边框。不受任何指定的 border-width 值影响 hidden隐藏边框。IE不支持 dotted 在MAC平台上IE4+与Windows和UNIX平台上IE5.5+为点线。否则为实 线 dashed 在MAC平台上IE4+与Windows和UNIX平台上IE5.5+为虚线。否则为实 线 solid实线边 框 double双线边框。两条单线与其间隔的和等于指定的 border-width 值 groove根据 border-color 的值画3D凹槽 ridge根据 border-color 的值画3D凸槽 inset根据 border-color 的值画3D凹边 outset根据 border-color 的值画3D凸边 表4.16 border-style取值 （2）border-width：设置元素边框的宽度，可能取值如表4.17所示。 值描 述 medium默认值。默认宽度 thin小于默认宽度 thick大于默认宽度 值由浮点数字和单位标识符组成的长度值，不可为负值 表4.17 border-width取值 （3）border-color：设置元素边框的颜色，通过颜色选择窗口选择。 5方框 如图4.34所示，方框类别用来设置元素边框与其他元素边框之间距离，称为 边距（Margin）。设置元素内容与元素边框之间距离，称为空白（Padding）。 图4.34 样式控制器方框 要理解元素边距和空白的概念，需要理解CSS中元素的“盒模型”。网页内的每 一个元素在网页上都是可以看成一个盒子，盒子结构如图4.35所示。即一个元素 由如下几部分组成的：内容、空白、边框、边距。因此一个元素的实际长度等于 ：左边距左边框左空白内容长度右空白右边框右边距。 图4.35 CSS盒子模型 6定位 如图4.36所示，定位类别主要用来设置元素在页面中的位置属性。包括位置 模式（position），层次顺序（z-index），宽度（width），高度（height），相对 具有定位设置的父元素的位置关系（top、right、bottom、left）。 图4.36 样式控制器定位 position：用来设置元素在网页内的位置模式，可能取值如表4.18所示。 值描 述 static 默认值。无特殊定位，元素遵循HTML定位规则，正常流中的位置 absolute 将元素从文档流中拖出，使用top、right、bottom，left等属性相对于其最接近的 一个最有定位设置的父元素进行绝对定位。如果不存在这样的父元素，则依据 body 元素。允许元素重叠，层叠通过z-index 属性定义 relative 元素不可层叠，但将依据top、right、bottom、left等属性在正常文档流中偏移位置 fixed 未支持。元素定位遵从绝对（absolute）方式，但是要遵守一些规范 表4.18 position取值 不同位置模式的定位原则如下。 （1）正常流中的位置 正常流中的位置是按照如下的布局显示的。网页中的元素按照从左到 右、从上到下的顺序显示，各元素之间不重叠。如果不设置元素定位方式 ，则正常流中的位置作为默认显示方式。 （2）绝对定位 绝对位置是指元素显示在页中的位置由sytle样式的top、right、bottom 、left及z-index属性决定的。 （3）正常流中的偏移量 正常流中的偏移量是元素在正常流中的位置基础上，再做一定的偏移后所处 的位置为元素的显示位置。如果元素在正常流中的位置做了偏移，那以前应该在 的位置会出现一个空洞，别的元素无法占用。因此一般只把一个元素的模式设置 为“正常流中偏移量”，而实际不进行位置偏移。 top是元素上边框离参考物上边框的距离，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属性的约束。 7布局 如图4.37所示，布局类别主要用来设置元素在网页内的布局属性。包括可见性 （visibility），显示方式（display），浮动（float），浮动清除（clear），光标形 状（cursor），溢出控制（overflow），可视区域（clip：rect（）。 图4.37 样式控制器布局 （1）visibility：设置元素的可视属性，可能取值如表4.19所示。 值描 述 visible元素可视 hidden元素隐藏 collapse主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用 表4.19 visibility取值 （2）display：设置元素是否显示及如何显示，可能取值如表4.20所示。 值描 述 block默认值。将元素强制作为块元素呈递，为元素之后添加新行 none隐藏元素。与visibility属性的hidden值不同，其不为被隐藏的元素保留物理空间 inline内联元素的默认值。将元素强制作为内联元素呈递 表4.20 display取值 （3）float：设置元素相对于