ASP.NET程序设计教学资源电子单元2 母版主题与皮肤CSS样式的设计与应用

1、Page 1ASP.NETASP.NET程序设计程序设计单元二单元二 母版、主题和皮肤母版、主题和皮肤CSS样式的设计与应用样式的设计与应用 主讲教师：徐占鹏主讲教师：徐占鹏2ASP.NETASP.NET程序设计程序设计学习目标学习目标w【知识目标】【知识目标】w熟练掌握熟练掌握CSSCSS的定义和使用方法的定义和使用方法w掌握掌握CSSCSS的常用属性的常用属性w 【技能目标】【技能目标】w能够使用能够使用CSSCSS统一网站风格统一网站风格3ASP.NETASP.NET程序设计程序设计CSSCSS简介简介w随着Web的越来越盛行，Web设计也越来越趋向于整体与结构化。在早期，出现过不同的浏

2、览器中的显示效果不一致、缺乏标准的支持、HTML代码结构混乱等等问题。w解决这些问题的方案是使用CSS标准，CSS支持所有现代的浏览器，并且提供了一整套统一的格式化属性，可以应用这些属性到任何的HTML元素上，比如添加边框、设置字体等等。CSS技术是Web标准的主要表现层技术，除了设置一些外观之外，现如今很多符合Web标准的站点都使用CSS来进行页面的布局。要设计一个标准的Web站点，应该多考虑使用CSS而较少的利用HTML的标签格式化语法。w w 图 程序运行结果4ASP.NETASP.NET程序设计程序设计CSSCSS简介简介w在ASP.NET中，可以创建三种类型的样式：w1内联样式w内联

3、样式直接放到HTML标签的内部，这种形式的样式会导致HTML代码的混乱。内联样式示例代码如下所示。w这行文本显示为蓝色的背景.5ASP.NETASP.NET程序设计程序设计 CSS CSS样式的设计与应用样式的设计与应用w2内部样式表w放置在Web标签页的区中的样式的集合。可以使用来自样式表的样式来格式化Web控件。使用内联样式，让格式与内容清楚的分离，并且可以对同一页面的格式进行多次重用。w3外部样式表w与内部样式相似，但是样式放在一个单独的文件中，这样开发人员可以在应用程序的多个页面上应用相同的样式。6ASP.NETASP.NET程序设计程序设计 CSS CSS基础基础内联式内联式w CS

4、S CSS能够通过编写样式控制代码来进行页面布局，在编写相能够通过编写样式控制代码来进行页面布局，在编写相应的应的HTMLHTML标签时，可以通过标签时，可以通过StyleStyle属性进行属性进行CSSCSS样式控制。如样式控制。如w 这是一段文字这是一段文字 w上述代码使用内联式进行样式控制，并将属性设置为上述代码使用内联式进行样式控制，并将属性设置为font-font-size:14pxsize:14px，其意义就在于定义文字的大小为，其意义就在于定义文字的大小为14px14px；同样，；同样，如果需要定义多个属性时，可以同写在一个如果需要定义多个属性时，可以同写在一个stylestyl

5、e属性中，属性中，示例代码如下所示。示例代码如下所示。 7ASP.NETASP.NET程序设计程序设计CSSCSS基础基础内联式内联式ww w 这是一段文字1w w 这是一段文字2w w 这是一段文字3w w This is My First CSS codew w 这是一段文字5w8ASP.NETASP.NET程序设计程序设计CSSCSS基础基础内联式内联式w 图19ASP.NETASP.NET程序设计程序设计CSSCSS基础基础内联式内联式w上述代码分别定义了相关属性来控制样式，并且都使用内联式定义样式，这些CSS的属性的意义如下所示： w字体名称属性font-family）：该属性设定字

6、体名称，如Arial,、Tahoma,、Courier等，可以定义字体的名称。 w字体大小属性font-size）：该属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px。 w字体风格属性font-style）：该属性有三个值可选：normal,、italic、oblique、normal是默认值，italic、oblique都是斜体显示。 10ASP.NETASP.NET程序设计程序设计CSSCSS基础基础内联式内联式w字体粗细属性font-weight）：该属性常用值是normal和bold，normal是默认值，bold是粗体。 w字体变量属性font-varia

7、nt）：该属性有两个值normal和small-caps，normal是默认值。small-caps表示字体将被显示成大写。 w字体属性font）：该属性是各种字体属性的一种快捷的综合写法。 w颜色(color)：该属性用来控制字体颜色。 11ASP.NETASP.NET程序设计程序设计CSSCSS基础基础嵌入式嵌入式w用内联式的方法进行样式控制固然简单，但是在维护过程中却是非常的复杂和难以控制。当需要对页面中的布局进行更改时，则需要对每个页面的每个标签的样式进行更改，这样无疑增大的工作量，当需要对页面进行布局时，可以使用嵌入式的方法进行页面布局，代码如下：12ASP.NETASP.NET程序

8、设计程序设计CSSCSS基础基础嵌入式嵌入式ww w 这是一段文字1w w .font1w font-size: 14px; w .font2w font-size: 14px;w font-weight: bolder; w .font3w font-size: 14px;w font-style: italic;w .font4w w font-size: 14px;w font-variant: small-caps;w w .font5w font-size: 14px;w color: red; w w13ASP.NETASP.NET程序设计程序设计CSSCSS基础基础嵌入式嵌入式w

9、w w 这是一段文字1w w 这是一段文字2w w 这是一段文字3w w This is My First CSS codew w 这是一段文字5w14ASP.NETASP.NET程序设计程序设计CSSCSS基础基础外联式外联式w虽然嵌入式能够解决单个页面的样式问题，但是这样只能针对单个页面进行样式控制，而在很多网站的开发应用中，大量的页面样式基本相同，只有少数的页面不尽相同，所以使用嵌入式还是有不足，这里就可以使用外联式。使用外联式，必须创建一个.css文件后缀的文件，并在当前页面中添加引用，.css页面代码如下所示。w.font1 font-size:14px; w.font2 font-

10、size:14px; font-weight:bolder; w.font3 font-size:14px; font-style:italic; w.font4 font-size:14px; font-variant:small-caps; w.font5 font-size:14px; color:red; 15ASP.NETASP.NET程序设计程序设计CSSCSS基础基础外联式外联式w在.css文件中，只需要定义如head标签中的style标签的内容即可，其编写方法也与内联式和内嵌式相同。在编写完成CSS文件后，需要在使用的页面的head标签中添加引用，示例代码如下所示。ww上述代码

11、添加了一个css.css文件的引用，意在告诉浏览器当前页面的一些样式可以在css.css中找到并解析。在使用了外联式后，当前页面的HTML代码就能够变得简单和整洁，示例代码如下所示。16ASP.NETASP.NET程序设计程序设计CSSCSS基础基础外联式外联式www w 这是一段文字1w www w 这是一段文字1w w 这是一段文字2w w 这是一段文字3w w This is My First CSS codew w 这是一段文字5ww17ASP.NETASP.NET程序设计程序设计应用应用CSSCSS常用属性常用属性-CSS-CSS背景属性背景属性wCSSCSS背景属性背景属性wCSS

12、CSS能够描述背景，包括背景颜色、背景图片、背景图片重能够描述背景，包括背景颜色、背景图片、背景图片重复方向等属性，这些属性为页面背景的样式控制提供了强复方向等属性，这些属性为页面背景的样式控制提供了强大的支持，这些属性包括如下所示：大的支持，这些属性包括如下所示： w背景颜色属性背景颜色属性background-colorbackground-color）：该属性为）：该属性为HTMLHTML元素元素设定背景颜色。设定背景颜色。 w背景图片属性背景图片属性background-imagebackground-image）：该属性为）：该属性为HTMLHTML元素元素设定背景图片。设定背景图片

13、。 w背景重复属性背景重复属性background-repeatbackground-repeat）：该属性和）：该属性和background-imagebackground-image属性连在一起使用，决定背景图片是否属性连在一起使用，决定背景图片是否重复。如果只设置重复。如果只设置background-imagebackground-image属性，没设置属性，没设置background-repeatbackground-repeat属性，在缺省状态下，图片既属性，在缺省状态下，图片既x x轴重复轴重复，又，又y y轴重复。轴重复。 w背景附着属性背景附着属性background-atta

14、chmentbackground-attachment）：该属性和）：该属性和background-imagebackground-image属性连在一起使用，决定图片是跟随内属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。容滚动，还是固定不动。 w背景位置属性背景位置属性background-positionbackground-position）：该属性和）：该属性和background-imagebackground-image属性连在一起使用，决定了背景图片的属性连在一起使用，决定了背景图片的最初位置。最初位置。 18ASP.NETASP.NET程序设计程序设计应用应用CSSC

15、SS常用属性常用属性-CSS-CSS背景属性背景属性w背景属性background）：该属性是设置背景相关属性的一种快捷的综合写法。 w通过这些属性能够为网页背景进行样式控制，示例代码如下所示。wbody background-color:green; w当使用background-image属性设置背景图片时，还需要使用background-repeat属性进行循环判断，示例代码如下所示。wbody background-image:wurl(bg.jpg); wbackground-repeat:repeat-x; 19ASP.NETASP.NET程序设计程序设计应用应用CSSCSS常用属

16、性常用属性-CSS-CSS边框属性边框属性wCSS还能够进行边框的样式控制，使用CSS能够灵活的控制边框，边框属性包括有： w 边框风格属性border-style）：该属性用来设定上下左右边框的风格。 w边框宽度属性border-width）：该属性用来设定上下左右边框的宽度。 w边框颜色属性border-color）：该属性设置边框的颜色。 w边框属性border）：该属性是边框属性的一个快捷的综合写法。 20ASP.NETASP.NET程序设计程序设计应用应用CSSCSS常用属性常用属性-CSS-CSS边框属性边框属性w通过这些属性能够控制边框样式，示例代码如下所示。w.mycss border-bottom:1px black dashed; border-top:1px black dashed; border-left:1px black dashed; border-right:1px black dashed; w上述代码分别设置了边框的上部分、下部分、左部分、右部