PPT
【文档说明】ASPNET程序设计教学资源电子课件单元2-母版主题与皮肤CSS样式的设计与应用-.ppt，共(21)页，282.500 KB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-45117.html
以下为本文档部分文字说明：
Page1《ASP.NET程序设计》单元二母版、主题和皮肤CSS样式的设计与应用主讲教师：徐占鹏2《ASP.NET程序设计》学习目标【知识目标】熟练掌握CSS的定义和使用方法掌握CSS的常用属性【技能目标】能够使用CSS统一网站风格注：本课内容参考教材单元二任务2.22.33《AS
P.NET程序设计》CSS简介随着Web的越来越盛行，Web设计也越来越趋向于整体与结构化。在早期，出现过不同的浏览器中的显示效果不一致、缺乏标准的支持、HTML代码结构混乱等等问题。解决这些问题的方案是使用CSS标准，CSS支持所有现代的浏览器，
并且提供了一整套统一的格式化属性，可以应用这些属性到任何的HTML元素上，比如添加边框、设置字体等等。CSS技术是Web标准的主要表现层技术，除了设置一些外观之外，现如今很多符合Web标准的站点都使用CSS来进行页面的布局。要设计一个标准的Web站点，应该多考虑使用CS
S而较少的利用HTML的标签格式化语法。4《ASP.NET程序设计》CSS简介在ASP.NET中，可以创建三种类型的样式：1．内联样式内联样式直接放到HTML标签的内部，这种形式的样式会导致HTML代码的混乱。内联样式示例代码如下所示。<pstyle="color:White;backg
round:Blue;font-size:x-large;padding:10px">这行文本显示为蓝色的背景.</p>5《ASP.NET程序设计》CSS样式的设计与应用2．内部样式表放置在Web标签页的<head>区中的样式的集合。可以
使用来自样式表的样式来格式化Web控件。使用内联样式，让格式与内容清楚的分离，并且可以对同一页面的格式进行多次重用。3．外部样式表与内部样式相似，但是样式放在一个单独的文件中，这样开发人员可以在应用程序的多个页面上应用相同的样式。6《ASP.NET程
序设计》CSS基础–内联式CSS能够通过编写样式控制代码来进行页面布局，在编写相应的HTML标签时，可以通过Style属性进行CSS样式控制。如<body><divstyle="font-size:14px;">这是一段文字</div></body>上述代码
使用内联式进行样式控制，并将属性设置为font-size:14px，其意义就在于定义文字的大小为14px；同样，如果需要定义多个属性时，可以同写在一个style属性中，示例代码如下所示。7《ASP.NET程序设计》CSS基础–内联式<body><divsty
le="font-size:14px;">这是一段文字1</div><divstyle="font-size:14px;font-weight:bolder">这是一段文字2</div><divstyle="font-size:14px;fo
nt-style:italic">这是一段文字3</div><divstyle="font-size:14px;font-variant:small-caps">ThisisMyFirstCSScode</div>
<divstyle="font-size:14px;color:red">这是一段文字5</div></body>8《ASP.NET程序设计》CSS基础–内联式图19《ASP.NET程序设计》CSS基础–内联式上述代码分别定义了相关属性来控
制样式，并且都使用内联式定义样式，这些CSS的属性的意义如下所示：字体名称属性（font-family）：该属性设定字体名称，如Arial,、Tahoma,、Courier等，可以定义字体的名称。字体大小属性（font-size
）：该属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px。字体风格属性（font-style）：该属性有三个值可选：normal,、italic、oblique、normal是默认值，italic、oblique都是斜体显示。10《ASP.N
ET程序设计》CSS基础–内联式字体粗细属性（font-weight）：该属性常用值是normal和bold，normal是默认值，bold是粗体。字体变量属性（font-variant）：该属性有两个值normal和small-caps，normal
是默认值。small-caps表示字体将被显示成大写。字体属性（font）：该属性是各种字体属性的一种快捷的综合写法。颜色(color)：该属性用来控制字体颜色。11《ASP.NET程序设计》CSS基础
–嵌入式用内联式的方法进行样式控制固然简单，但是在维护过程中却是非常的复杂和难以控制。当需要对页面中的布局进行更改时，则需要对每个页面的每个标签的样式进行更改，这样无疑增大的工作量，当需要对页面进行布局时，可以
使用嵌入式的方法进行页面布局，代码如下：12《ASP.NET程序设计》CSS基础–嵌入式<head><metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/><title>这
是一段文字1</title><styletype="text/css">.font1{font-size:14px;}.font2{font-size:14px;font-weight:bolder
;}.font3{font-size:14px;font-style:italic;}.font4{font-size:14px;font-variant:small-caps;}.font5{font-size:14px;color:red;}</style>
</head>13《ASP.NET程序设计》CSS基础–嵌入式<body><divclass="font1">这是一段文字1</div><divclass="font2">这是一段文字2</div><divclass="font3">这
是一段文字3</div><divclass="font4">ThisisMyFirstCSScode</div><divclass="font5">这是一段文字5</div></body>14《ASP.NET程序设计
》CSS基础–外联式虽然嵌入式能够解决单个页面的样式问题，但是这样只能针对单个页面进行样式控制，而在很多网站的开发应用中，大量的页面样式基本相同，只有少数的页面不尽相同，所以使用嵌入式还是有不足，这里就可以使用外联式。使用外联式，必须创建一个.css文件后缀的文件，并在当前
页面中添加引用，.css页面代码如下所示。.font1{font-size:14px;}.font2{font-size:14px;font-weight:bolder;}.font3{font-size
:14px;font-style:italic;}.font4{font-size:14px;font-variant:small-caps;}.font5{font-size:14px;color:red;}15《ASP.NET程序设计》CSS基础–外联式在.css文件中，只需要定义如he
ad标签中的style标签的内容即可，其编写方法也与内联式和内嵌式相同。在编写完成CSS文件后，需要在使用的页面的head标签中添加引用，示例代码如下所示。<linkhref="css.css"type="text/css"rel="stylesheet"></link>上述代码添加了一
个css.css文件的引用，意在告诉浏览器当前页面的一些样式可以在css.css中找到并解析。在使用了外联式后，当前页面的HTML代码就能够变得简单和整洁，示例代码如下所示。16《ASP.NET程序设计》CSS基础–外
联式<htmlxmlns="w3.org/2019/xhtml"><head><metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/><title>这
是一段文字1</title><linkhref="css.css"type="text/css"rel="stylesheet"></link></head><body><divclass="font1">这是
一段文字1</div><divclass="font2">这是一段文字2</div><divclass="font3">这是一段文字3</div><divclass="font4">ThisisMyFirstCSScode</div><divcl
ass="font5">这是一段文字5</div></body></html>17《ASP.NET程序设计》应用CSS常用属性-CSS背景属性CSS背景属性CSS能够描述背景，包括背景颜色、背景图片、背景图片重复方向等属性，这
些属性为页面背景的样式控制提供了强大的支持，这些属性包括如下所示：背景颜色属性（background-color）：该属性为HTML元素设定背景颜色。背景图片属性（background-image）：该属性为HTML元素设定背景图片
。背景重复属性（background-repeat）：该属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片
既x轴重复，又y轴重复。背景附着属性（background-attachment）：该属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。背景位置属性（background-position）：该属性和backg
round-image属性连在一起使用，决定了背景图片的最初位置。18《ASP.NET程序设计》应用CSS常用属性-CSS背景属性背景属性（background）：该属性是设置背景相关属性的一种快捷的综合写法。通过这些属性能够为网页
背景进行样式控制，示例代码如下所示。body{background-color:green;}当使用background-image属性设置背景图片时，还需要使用background-repeat属性进行循环判断，示例代码如下所示。body{background-image:url('bg
.jpg');background-repeat:repeat-x;}19《ASP.NET程序设计》应用CSS常用属性-CSS边框属性CSS还能够进行边框的样式控制，使用CSS能够灵活的控制边框，边框属性包括有：边框风格属性（border-style）：
该属性用来设定上下左右边框的风格。边框宽度属性（border-width）：该属性用来设定上下左右边框的宽度。边框颜色属性（border-color）：该属性设置边框的颜色。边框属性（border）：该属性是边框属性的一个快捷的综合写法。20《ASP.NET程序设计》应用C
SS常用属性-CSS边框属性通过这些属性能够控制边框样式，示例代码如下所示。.mycss{border-bottom:1pxblackdashed;border-top:1pxblackdashed;border-left:1pxblack
dashed;border-right:1pxblackdashed;}上述代码分别设置了边框的上部分、下部分、左部分、右部分的边框属性，来形式一个完整的边框，同样可以使用边框属性来整合这些代码，示例代码如下所
示。.mycss{border:1pxblackdashed;}21《ASP.NET程序设计》项目实训项目实训【实训目的】了解需要CSS的原因；熟练掌握样式表创建；熟练掌握常用的CSS语言；【实训内容】创建一个样式表文件完成一个企业主页面的设计。
辽公网安备 21102102000191号
营业执照
