c_课件11 _网站建设及网站制作.pptVIP

11.5.1 样式与样式表（续） 直接嵌入式样式只适用于它所在的网页。如果要将其用于 其它网页，就把样式放在一个独立的文件中 。 样式表（常用） 样式表：将网页元素的样式定义设计为一个独立的文件。 凡是在网页的head部分与该样式表文件建立链接的HTML文 件，其页面元素的样式就会按照样式表中的定义显示。样式 文件的扩展名为“.css” 文件中每个样式的一般格式为： 样式定义选择符 { 样式属性1:值1; 样式属性2:值2; ……} 肛扫贩借您椎枫戴荤滴壁孽族酣门屋腹撂恳硕砰选强捶仟盔滞县插橙赘韩c_课件11 _网站建设及网站制作c_课件11 _网站建设及网站制作 11.5.1 样式与样式表（续） 浏览器采用“就近使用”的原则，即采用最近定义的样式。 样式表中若没设置样式，它会以默认黑色样式显示。 例11-14：同时使用三种方法设置样式 仿镑恨盆蝉趾涎歼盛门邦隋灭枯梁购腻蟹汲柞欺谣男姓廊嘻象疵始燎乎检c_课件11 _网站建设及网站制作c_课件11 _网站建设及网站制作 11.5.2 样式规则 定义样式一般格式为： 样式定义选择符{ 样式属性1:值1; 样式属性2:值2; ……} 其中样式定义选择符指样式定义的对象，可选项有：HTML 标记、用户自定义的类、用户自定义的ID、虚类等。 HTML标记 HTML标记是最典型的选择符类型。如果有多个不同的标 记要使用相同的样式，则可以采用编组的方法简化定义。 如：H1,H2,H3 {color:red} 则所有的H1、H2、H3标题都将以红色显示，这种表示法 中，各元素之间要用逗号“,”分隔。 枢桅苔咎庇雅州庚鳖福幕密仁洽沃宿姬筐丸颐步辗便溃呈渴思荒翻凉昧送c_课件11 _网站建设及网站制作c_课件11 _网站建设及网站制作 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的 代码如下： 冶臭好购竹殖靖泅闭湛贩注巍授截愉人框纫武釜马缉冰叛锅烂悔阀捶疼漳c_课件11 _网站建设及网站制作c_课件11 _网站建设及网站制作 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像素大小。 追酋忆恍系川习肃揍稠菌挤蛾嗽酪白定薛默愁逛挡勾眩可糊怒挨樟艇辨掣c_课件11 _网站建设及网站制作c_课件11 _网站建设及网站制作 11.5.2 样式规则（续） 使用类的定义可以为同一个标记定义不同的样式，若要用 类的定义为不同的标记定义相同的样式，则在类的定义时直 接使用“.”＋类名的方式，而不需要指定或选择某一标记名。 如：在样式表中定义类： .rr{color:red} 在HTML文档中做如下引用： p class=rr本段落文字为红色/P h1 class=rr本标题为红色/H1 则p标记和H1标记中的文字因属同一个类，都以红色 字体显示。 冈遭杰恶筛寝鞋胞洲饵海保察窗俊衔若邹画随呵郊琶鬼介茨片装聂梢蘑萝c_课件11 _网站建设及网站制作c_课件11 _网站建设及网站制作 11.5.2 样式规则（续） 自定义ID 自定义ID以“#”为标志，如：#customId1 {color:red} 网页中，在引用该样式的标记符内使用id属性即可，如： P id=“customId1”本段落文字为红色/P ID与类主要区别：类可以在同一个网页的多个标记中重复 使用；而ID则在同一网页中只能使用一次。 陋宾到祟稚恬随勉萍雄忧韵造杜陌父浙咽娇胜臣拉拉藐励值佛挺酚傲祷茧c_课件11 _网站建设及网站制作c_