ASPNET程序设计教学资源电子课件单元2-母版主题与皮肤CSS样式的设计与应用-.ppt

1、Page 1ASP.NETASP.NET程序设计程序设计主讲教师：徐占鹏主讲教师：徐占鹏2ASP.NETASP.NET程序设计程序设计学习目标学习目标w【知识目标】【知识目标】w熟练掌握CSS的定义和使用方法w掌握CSS的常用属性w【技能目标】【技能目标】w能够使用CSS统一网站风格3ASP.NETASP.NET程序设计程序设计CSSCSS简介简介w随着Web的越来越盛行，Web设计也越来越趋向于整体与结构化。在早期，出现过不同的浏览器中的显示效果不一致、缺乏标准的支持、HTML代码结构混乱等等问题。w解决这些问题的方案是使用CSS标准，CSS支持所有现代的浏览器，并且提供了一整套统一的格式化

2、属性，可以应用这些属性到任何的HTML元素上，比如添加边框、设置字体等等。CSS技术是Web标准的主要表现层技术，除了设置一些外观之外，现如今很多符合Web标准的站点都使用CSS来进行页面的布局。要设计一个标准的Web站点，应该多考虑使用CSS而较少的利用HTML的标签格式化语法。图 程序运行结果4ASP.NETASP.NET程序设计程序设计CSSCSS简介简介w在ASP.NET中，可以创建三种类型的样式：w1内联样式w内联样式直接放到HTML标签的内部，这种形式的样式会导致HTML代码的混乱。内联样式示例代码如下所示。w这行文本显示为蓝色的背景.5ASP.NETASP.NET程序设计程序设计

3、 CSS CSS样式的设计与应用样式的设计与应用w2内部样式表w放置在Web标签页的区中的样式的集合。可以使用来自样式表的样式来格式化Web控件。使用内联样式，让格式与内容清楚的分离，并且可以对同一页面的格式进行多次重用。w3外部样式表w与内部样式相似，但是样式放在一个单独的文件中，这样开发人员可以在应用程序的多个页面上应用相同的样式。6ASP.NETASP.NET程序设计程序设计 CSS CSS基础基础内联式内联式w CSS能够通过编写样式控制代码来进行页面布局，在编写相应的HTML标签时，可以通过Style属性进行CSS样式控制。如w 这是一段文字这是一段文字 w上述代码使用内联式进行样式

4、控制，并将属性设置为font-size:14px，其意义就在于定义文字的大小为14px；同样，如果需要定义多个属性时，可以同写在一个style属性中，示例代码如下所示。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上述代码分别定义了相关属性来控制样式，

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

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

7、量，当需要对页面进行布局时，可以使用嵌入式的方法进行页面布局，代码如下：12ASP.NETASP.NET程序设计程序设计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

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

9、如下所示。w.font1 font-size:14px;w.font2 font-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文件后，需要在

10、使用的页面的head标签中添加引用，示例代码如下所示。ww上述代码添加了一个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常用属性常用属性-C

11、SS-CSS背景属性背景属性wCSSCSS背景属性背景属性wCSS能够描述背景，包括背景颜色、背景图片、背景图片重复方向等属性，这些属性为页面背景的样式控制提供了强大的支持，这些属性包括如下所示：w背景颜色属性（background-color）：该属性为HTML元素设定背景颜色。w背景图片属性（background-image）：该属性为HTML元素设定背景图片。w背景重复属性（background-repeat）：该属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺

12、省状态下，图片既x轴重复，又y轴重复。w背景附着属性（background-attachment）：该属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。w背景位置属性（background-position）：该属性和background-image属性连在一起使用，决定了背景图片的最初位置。18ASP.NETASP.NET程序设计程序设计应用应用CSSCSS常用属性常用属性-CSS-CSS背景属性背景属性w背景属性（background）：该属性是设置背景相关属性的一种快捷的综合写法。w通过这些属性能够为网页背景进行样式控制，示例代码如下所示。wb

13、ody background-color:green;w当使用background-image属性设置背景图片时，还需要使用background-repeat属性进行循环判断，示例代码如下所示。wbody background-image:wurl(bg.jpg);wbackground-repeat:repeat-x;19ASP.NETASP.NET程序设计程序设计应用应用CSSCSS常用属性常用属性-CSS-CSS边框属性边框属性wCSS还能够进行边框的样式控制，使用CSS能够灵活的控制边框，边框属性包括有：w 边框风格属性（border-style）：该属性用来设定上下左右边框的风格。w

14、边框宽度属性（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上述代码分别设置了边框的上部分、下部分、左部分、右部分的边框属性，来形式一个完整的边框，同样可以使用边框属性来整合这些代码，示例代码如下所示。w.mycss border:1px black dashed;21ASP.NETASP.NET程序设计程序设计项目实训项目实训w项目实训项目实训w【实训目的】【实训目的】w了解需要CSS的原因；w熟练掌握样式表创建；w熟练掌握常用的CSS语言；w【实训内容】【实训内容】w创建一个样式表文件完成一个企业主页面的设计。