第5章 样式、主题、母版页.pptVIP

* ASP.NET3.5简明教程（C#） 重点内容： 样式 主题 母版页 第5章 样式、主题、母版页 一、样式 CSS是Cascading Stytle Sheet的简称，翻译成中文就是层叠样式表，简称样式表。它是一种用户增强控制页面样式并允许将样式信息与页面内容分离的标记性语言。它可以很容易地控制页面中的HTML元素的背景与颜色、元素框的样式、定位、文字字体等属性的设置。 一、样式 CSS的作用可以概括为以下几点： 内容与表现分离。 表现的统一，可以使网页的表现非常统一，并且容易修改。 减少重复的代码的编写。 增加网页的浏览速度。 减少硬盘容量。 1、样式的作用 一、样式 2、样式的种类 CSS按其在HTML文档中的位置可以分为三种： (1) 内嵌样式表 (2) 内部样式表 (3) 外部样式表 一、样式 3、样式的语法 最基本的CSS是由三个部分构成：选择符(selector)、属性(properties)和属性的取值(value),格式如下： 选择符{属性：值}，即：selector{property: value} 示例: p { text-align: center; color: black; font-family: arial } 一、样式 3、样式的语法 (1)选择符的的种类: 类选择符 ID选择符 包含选择符 一、样式 3、样式的语法 (2)伪类: 伪类的定义格式如下： 选择符:伪类 {属性: 值}，即：selector:pseudo-class {property: value} 伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式。 最常用的是4种a(链接)元素的伪类，它表示动态链接在4种不同的状态：link(未访问的链接)、visited(已访问的链接)、active(激活链接)、hover(鼠标停留在链接上)。可以把它们分别定义不同的效果，一区别以上四种状态，例如: a:link {color: #FF0000; text-decoration: none} a:visited {color: #00FF00; text-decoration: none} a:hover {color: #FF00FF; text-decoration: underline} a:active {color: #0000FF; text-decoration: underline} 一、样式 4、使用样式 有四种常用的在页面中插入样式表的方法： 链入外部样式表 内部样式表 导入外表样式表 内嵌样式 一、样式 5、样式创建器 使用VS2008提供的样式创建器很方便地创建样式，本节将详细介绍如何使用VS2008方便地创建样式。使用VS2008提供的样式创建器，只需要根据它提供的对话框进行一些选择就可生成满足需要的样式。 (1)创建一个ASP.NET项目chap05，在其中添加一个ASP.NET应用程序5-1。 (2)打开页面文件Default.aspx，切换到“源”视图，在div标记之间加入如下的代码: div asp:Label ID=Label1 runat=server Text=姓名：/asp:Label asp:TextBox ID=TextBox1 runat=server /asp:TextBox nbsp;nbsp; asp:Button ID=Button1 runat=server Text=提交 / /div 一、样式 5、样式创建器 (3) 切换到“设计”视图，在div标记的区域内单击一下，但不要单击任何控件，可以看到div标记出现在边框的左上角，如下图所示。 一、样式 5、样式创建器 (4)选择菜单“格式”|“新建样式”命令，打开如下图所示的“新建样式”对话框，在这个对话框里只需要进行一些选择就可以为div标记创建样式。表5-1对“新建样式”对话框中可以定义样式进行了说明。为了能够把将要创建的样式应用于选中的内容，还必须选中“将新样式应用于文档选择内容”复选框。当选择一些样式后，在“预览”文本框中可以看到选择的样式的预览效果。 一、样式 5、样式创建器 (5)在上图所示的对话框为div标记选择一些样式设置，最后单击“确定”按钮，可以看到设置好的样式，切换页面到“源”视图，可以看到的代码如程序清单5.13。运行效果如下图. 一、样式 6、CSS属性窗口 CSS属性窗口 CSS属性窗口菜单命令 一、样式 7、创建和应用样式文件 用“新建样式”对话框可以创建样式文件，创建样式文件有两种情况：第一是新创建一