页面外观设计与布局知识课件-豆柴文库

您所在位置：网站首页 / 页面外观设计与布局知识课件.ppt / 文档详情

免费试读已结束，剩余 43 页请下载文档后查看

10 金币

下载文档

/ 48

下载提示

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

文本预览

第6章页面外观设计与布局内容6.1CSS样式控制6.1.1页面中使用CSS的三种方法在VisualStudio2008中，有两种设置样式的方法:
在源视图下直接设置样式。
在设计视图下，利用可视化界面设置样式。

【例6-1】内联式样式设置示例。2.嵌入式样式
在网页的head部分直接实现CSS样式,即在<head>与</head>标签内，以<style>开始，</style>结束。
CSS规则由两部分组成：选择符和声明。声明由属性名和属性值组成。所以简单的CSS规则如下：
		选择符{属性名1:值1;属性名2:值2;……}
		例如：	p{color:Green;}
	p（段落标签）为选择符，color（颜色）是p的属性名，green（绿色）是color的属性值。该规则声明所有段落标签的内容应该将color属性设置为绿色，即所有<p>中文本将变成绿色。下面讲述CSS规则中主要的4个要素。
选择符：表明CSS规则应用到页面的哪个部分。选择符最简单的类型是元素选择符，它指出明确的标签元素，例如HTML中的<p>标签。
声明：声明包含在{}大括号内。大括号内应首先给出属性名，接着是冒号，然后是属性值。结尾分号是可选项，推荐使用结尾分号，以便于规则的扩展。
属性：属性按官方CSS规范定义。用户可以定义特有的样式效果，与CSS兼容的浏览器可能会支持这些效果，如果不支持的浏览器会忽略这些属性。
值：声明的值放置在属性名和冒号之后。它确切定义应该如何设置属性。每个属性值的范围也在CSS规范中定义。在VisualStudio2008中，也有两种设置嵌入式样式的方法：
在源视图下直接设置样式
利用可视化窗口设置样式。

	【例6-2】嵌入式样式设置示例。3.链接式样式
在页面中使用CSS最常用的方法是链接式样式。利用这种方法可以在网页中调用已经定义好的样式表文件（css文件）。
与嵌入式相比，链接式可以将定义好的样式在网站的多个页面上重复使用，提高了开发效率，降低了维护成本，同时也实现了将页面结构和表现彻底分离，最适合大型网站的外观设计。在VisualStudio2008中，通过可视化界面创建外部链接式样式。具体步骤如下。
在“解决方案资源管理器”中，右击网站的名称，选择“添加新项”。在“VisualStudio已安装的模板”下选择“样式表”，如图所示。在“名称”文本框中，输入StyleSheet1.css，然后单击“添加”按钮。编辑器将打开，其中显示一个包含空body样式规则的新样式表，如图所示。
在样式表编辑器中大括号的外边单击鼠标右键，在快捷菜单中选择“添加样式规则”命令，或者在菜单“样式”中选择“添加样式规则”命令，都会弹出“添加样式规则”对话框，如图所示。最后，为Web页面指定该样式表。最简单的方法是在Web页面的源视图中将样式表文件直接从“解决方案资源管理器”拖到页面的head元素中或者直接拖到Web页面的设计视图中。6.1.2样式规则1．元素选择符
任何HTML元素都可以是一个CSS的元素选择符，例如，div{color:red}，该样式规则中的元素选择符是div，div块内的所有文字颜色为红色。
2．类选择符
类选择符用于定义页面上的相关HTML元素组，使它们具有合适的相同样式规则。创建类时，用户需要给它命名，命名时最好使用字母和数字。
定义了类之后，用户可以使用它作为CSS的选择符。类选择符以“.”为起始标记，一般格式为：
		.类选择符{属性名1:值1;属性名2:值2;……}例如：
			.c1{color:Red;}
			.c2{font-size:large;}
	上面定义了两个类，类“c1”定义了颜色属性，类“c2”定义了字体大小属性。
在HTML文档中可以按下列方式引用：
<div>
	<h1class="c1">通知</h1>
	<pclass="c2">将与今天下午2点召开各部门会议。</p>
</div>
	标签<h1>中的文本颜色为红色，标签<p>中的字体大小为“large”。因为它们各自的class属性值为类“c1”和类“c2”。
【例6-4】类选择符示例程序。3．id选择符
只有在页面上的标签才能具有给定的id，它必须是唯一的，并只用于指示该元素。
下面的例子中标签<a>定义了一个id属性，值是“next”。
	<ahref="next.htm"id="next">下一步</a>
在CSS中，id选择符由id值前面的“#”（井号）符号指示，例如：
		#next{font-size:large;}在实际应用中，用户应如何选取类选择或id选择符设置样式呢？
	类选择符更灵活，id选择符能完成的它都能完成，甚至比id选择符能完成的还要多。如果想重用样式，用户也可以使用类选择符来完成。但是用id选择符就完成