c_课件第11章_网站建设和网页制作.ppt

11.5.1 样式与样式表（续） 直接嵌入式样式只适用于它所在的网页。如果要将其用于 其它网页，就把样式放在一个独立的文件中 。 样式表（常用） 样式表：将网页元素的样式定义设计为一个独立的文件。 凡是在网页的head部分与该样式表文件建立链接的HTML文 件，其页面元素的样式就会按照样式表中的定义显示。样式 文件的扩展名为“.css” 文件中每个样式的一般格式为： 样式定义选择符 { 样式属性1:值1; 样式属性2:值2; ……} 11.5.1 样式与样式表（续） 浏览器采用“就近使用”的原则，即采用最近定义的样式。 样式表中若没设置样式，它会以默认黑色样式显示。 例11-14：同时使用三种方法设置样式 11.5.2 样式规则 定义样式一般格式为： 样式定义选择符{ 样式属性1:值1; 样式属性2:值2; ……} 其中样式定义选择符指样式定义的对象，可选项有：HTML 标记、用户自定义的类、用户自定义的ID、虚类等。 HTML标记 HTML标记是最典型的选择符类型。如果有多个不同的标 记要使用相同的样式，则可以采用编组的方法简化定义。 如：H1,H2,H3 {color:red} 则所有的H1、H2、H3标题都将以红色显示，这种表示法 中，各元素之间要用逗号“,”分隔。 11.5.2 样式规则（续） 类 （class） 用户自定义的类是用来为某一个HTML标记创建多个样 式，或者为多个标记创建同一种样式。 语法格式： 样式定义选择符.类名{样式属性1:值1; 样式属性2:值2;……} 如：H1.first的样式代码：H1.first {color:red;font-size:32px} H1.second的样式代码： H1.second{color:green;font-size:44px} CssExample4.htm的 代码如下： 11.5.2 样式规则（续） head title样式引用示例3/title link type=text/css href=CssExample4.css rel=Stylesheet / /head body div h1 class=first第11章 网站建设与网页制作/h1 h1 class=“second”第12章 ASP.NET Web服务器控件/h1 /div /body 在设计视图下可以看到前一个h1标题为红色32像素大小， 而后一个h1标题为绿色44像素大小。 11.5.2 样式规则（续） 使用类的定义可以为同一个标记定义不同的样式，若要用 类的定义为不同的标记定义相同的样式，则在类的定义时直 接使用“.”＋类名的方式，而不需要指定或选择某一标记名。 如：在样式表中定义类： .rr{color:red} 在HTML文档中做如下引用： p class=rr本段落文字为红色/P h1 class=rr本标题为红色/H1 则p标记和H1标记中的文字因属同一个类，都以红色 字体显示。 11.5.2 样式规则（续） 自定义ID 自定义ID以“#”为标志，如：#customId1 {color:red} 网页中，在引用该样式的标记符内使用id属性即可，如： P id=“customId1”本段落文字为红色/P ID与类主要区别：类可以在同一个网页的多个标记中重复 使用；而ID则在同一网页中只能使用一次。 11.5.2 样式规则（续） 虚类 虚类是专用于A标记的选择符，使用虚类可以设置不同类型 超链接的显示方式。 A:link 未被访问过的超链接 A:visited 已被访问过的超链接 A:active 当超链接处于选中状态 A:hover 当鼠标指针移动到超链接上 使用【添加样式规则】对话框，虚类是被作为HTML标记中 的一项来定义的，可以从【元素】的下拉框中找到这些定义 对象。 11.5.2 样式规则（续） 若在样式表文件中做如下样式设计： A:link{color:blue; font-size:32px;} A:hover{color:red; font-size:150%; text-decoration:none;} 在其链接的HTML文件的body间添加代码： a href=进入百度搜索/a 保存并执行该HTML文件，看到“进入百度搜索”的超链接 文字为蓝色32像素字体