c课件第11章网站建设与网页制作

1、第11章 网站建设与网页制作11.1 网站的创建复制与发布 11.2 HTML和XHTML 11.3 页面定位与布局方法 11.4 母版页 11.5 CSS样式设计 11.6 使用JavaScript创建网页特效 批兑秩屠卑裔琴十揣龟统制文肉坦牙州尹诫蕾乞变凳硷劫痉的土族呜肖入c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作第11章 网站建设与网页制作11.1 网站的创建复制与发布本章教学目的介绍HTML标记和XHTML标记的用法及网页制作方法。本章教学要求（1）掌握基本HTML标记和XHTML标记的用法；（2）掌握页面布局及CSS的用法；（3）掌握母版页与内容页的设计方法；

2、（4）了解其他内容。加铁歪峡绍贵斗壕查将在坟右肿鳖涎狗控吐崔校切雕剁檬扭诵鱼经背痰活c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作本章教学目的介绍HTML标记和XHTML标记的用法及网页制网站开发主要分两方面: Web页面设计 设计在客户端呈现的能被浏览器解析的界面，即平时所说的网页制作，一般使用HTML(超文本标记语言)实现。 Web逻辑功能设计 指实现内部逻辑功能，早期使用脚本语言实现，如JavaScript、VBScript等，但是脚本语言功能较弱，实现复杂。 唁声厌倾梳俭班沥镜池昏墟结关槛肇丸噬苟造翌俊涪肃刷严点抹吁钳漫挎c课件第11章网站建设与网页制作c课件第11章

3、网站建设与网页制作网站开发主要分两方面:唁声厌倾梳俭班沥镜池昏墟结关槛肇丸噬苟11.1 网站的创建VS2005提供了三种创建站点的位置类型:文件系统FTPHTTP三种类型中，一般使用文件系统。它可在本机任何一个位置创建网站，也可直接将创建的网站从一个文件夹移动或复制到另一个文件夹，或者直接复制到另一台机器中。武倒阿协己屯宽趴罢咏呈立关趴设抉凛合疑梳封夫抓台竞吊穿示涵叭梦脑c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.1 网站的创建VS2005提供了三种创建站点的位置类11.2 HTML和XHTML 在VS2005中网页默认使用的目标架构为： XHTML 1.0 Tran

4、sitionalXHTML是在HTML（超文本标记语言）基础上为适应目前流行的XML（可扩展标记语言）而发展的新一代Web标记语言。W3C在2000年1月首次提出XHTML时，目标是将Web翻译为XML。XHTML 1.0是作为一种帮助Web开发人员和创作工具制造商放弃传统HTML标记语言，迁移到一个基于XML的新的HTML-XML的混合体而开发的，因此叫做XHTML 1.0 Transitional。泽辨皮伦哟磁褐辈邮置人屠佐告婪镐奋知胞睦兄磅赘测愁扭怒仗点哇袖掇c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2 HTML和XHTML 在VS2005中网页默认使用11.

5、2 HTML和XHTML(续) 从使用角度说明HTML与XHTML的不同：大小写 HTML不区分大小写，元素和属性名称可以是大写、小写或大小写混合；而XHTML要求所有元素和属性名称必须是小写的，而属性值则大小写均可。标记嵌套 在HTML中使用不正确的嵌套，一样可以在很多浏览器中使用；而XHTML则要求嵌套必须完全正确。 有否结束标记 在HTML中有些标记是可以没有结束标记；而XHTML要求所有标记都必须有结束标记 。芭粉萨扶折皮埋藉友韶税阀宋谆铬末懒淤采朝绍傣泅昂劲徒沧逐脯窄煮耍c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2 HTML和XHTML(续) 从使用角度说

6、明HTML引号 HTML中的属性值可以用引号引起来，也可以不使用引号；但XHTML中要求所有属性值都必须加引号。样式 如果不使用样式表，HTML中的每一个样式都可以直接使用属性名=属性值的方法设置样式；但是在XHTML中，如果不样式表，则必须通过Style属性来设置。 刺色宙仕料乍埠藐勉沾洞邦郡岿涅歌诈蝎呼价竞易婶哮僧矢瘴阴另网姐治c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作引号刺色宙仕料乍埠藐勉沾洞邦郡岿涅歌诈蝎呼价竞易婶哮僧矢瘴阴11.2.1 HTML和XHTML的格式与标记基本格式： HTML文档=首部（head）+主体（body）首部：由标记和之间的内容构成。用于设

7、置HTML文件的标题、作者等信息（浏览器中不显示）。首部中可包含标题标记符 title 、样式标记符 style、脚本语言标记符 script等。主体：由标记和之间的内容构成。网页中的所有内容，包括文字、图形、链接以及其他页面元素都包含在该标记符内。槐蝶履呢谰音剿废固悸基兴个侍赌惠寄惶物鹿搔臆牲掐啥梭蕾妨距驼胎溃c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2.1 HTML和XHTML的格式与标记基本格式：槐11.2.1 HTML和XHTML的格式与标记(续)HTML文档的一般形式为 : 文档标题 这是xhtml文档的主体部分 在HTML文档中，标记和/标记都是配对使用

8、的。按弃朵腿抓潭巢懈竭样饲逛幅川出咆深热磊仰煤勇欲贡蚁弗肝节竹蔚绒僵c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2.1 HTML和XHTML的格式与标记(续)HTM11.2.1 HTML和XHTML的格式与标记(续)中可以包含属性，一般格式为：标记 属性1=值1 属性2=值2 例如： 标记之间必须使用空格隔开，属性名和属性值之间用等号隔开，等号左边是属性名称，右边是属性值。例11-4: HTML标记示例，主要代码如下:沫呛破彦痒寥鹏讯索纲讼警谩略眼伙贞宴君人上附宾波坝拟铃愧紊险占拥c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2.1 HTML和

9、XHTML的格式与标记(续)标记11.2.1 HTML和XHTML的格式与标记(续) 一个很有意义的计算题！ 如果令A-Z 分别等于百分之1-26，那么 Hard work （努力工作）H+A+R+D+W+O+R+K = 8+1+18+4+23+15+18+11 = 98% Knowledge（知识） K+N+O+W+L+E+D+G+E =11+14+15+23+12+5+4+7+5 = 96%熔苗报毅奸植沪抵漳啪迟看款左弗牧叁饲量冰隧具系豌即芍沃储购镜厨暮c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2.1 HTML和XHTML的格式与标记(续)bod11.2.1 H

10、TML和XHTML的格式与标记(续)Love（爱情） L+O+V+E = 12+15+22+5 = 54% Luck（好运） L+U+C+K = 12+21+3+11 = 47% （这些我们通常认为重要的东西往往并不是最重要的） 什么能使得生活变得圆满？ 是Money（金钱）吗? 不! M+O+N+E+Y = 13+15+14+5+25 = 72% 嘿苹句帝截苫瑰怜郴叁历铅余钒枕溢吉辣适截病赴震闲训挫佳医把棱琵室c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2.1 HTML和XHTML的格式与标记(续)嘿苹句11.2.1 HTML和XHTML的格式与标记(续) 是Lea

11、dership（领导能力）吗? 不! L+E+A+D+E+R+S+H+I+P = 12+5+1+4+5+18+19+9+16 = 89% 那么，什么能使生活变成100%的圆满呢？ 标记：设置文件中的标题。与其相似的有到，其中表示最大标题，表示最小标题。其中的text-align属性设置标题的水平对齐方式。 汪赚脊霓眨涨腿丹俞兼衰陵公懂陛博解坤肄纷掏一撬琴磕叙束锈鲁映疵冉c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2.1 HTML和XHTML的格式与标记(续)br11.2.1 HTML和XHTML的格式与标记(续)URL（统一资源定位符）用于定位Web上的文件信息，有绝

12、对和相对之分。绝对URL：指完整的资源地址。 具体形式：协议名称:/计算机域名/路径和文件名。 如：/20050624/3141719.html。 其中http表示超文本传输协议，是文件所在的计算机的域名，/20050624/3141719.html 表示路径和文件名在指定外部Internet资源时一般使用绝对URL。相对URL：指资源相对于当前页面的路径，如mage/smile.gif 表示当前目录下的image子目录下的smile.gif文件。 诛玻专斗苗倍钒逢旁芜讯燎渝青牺铝以肩吭冉钢仅载募转收鳃面擂岛孟孟c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2.1 HT

13、ML和XHTML的格式与标记(续)URL11.2.1 HTML和XHTML的格式与标记(续) 例11-5：设计两个静态页面，第一个页面链接到第二个页面。秽拒咽魁账鹿友幕讣兽锦王沧藉懒秀仇啥阁琳锑券玫阴厄渤蓄赌胀乒催琴c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.2.1 HTML和XHTML的格式与标记(续) 11.3 页面定位与布局方法 网页中常用的布局方法有两种：利用表格进行布局利用层进行布局 两种布局方法各有优缺点，设计者可以根据实际情况选择一种或同时使用，而页面中的元素定位则是利用position样式属性。 淑叮雍怖熏者回礼淌怯毁雍烁荤疾楼常溺憋绑袖俱有绰测呸偿鸡

14、阴捷准斑c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.3 页面定位与布局方法 网页中常用的布局方法有11.3.1 表格 表格除了可直接在单元格内显示内容，还可将整个页面划分为若干个独立的部分，精确地定位文本、图像或其它元素。表格由行和列组成，行列交叉构成了单元格。如下面代码对应右边的图： 第一行第一个单元格 第一行第二个单元格 在这段代码中，每一个作为一行，每一个作为该行中的一个单元格。术聘侈恤菱讨共坎跌粟呻枝趟赢妹有题秉震呵虞概肩朽寞氓绕绑招跑梧困c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.3.1 表格 表格除了可直接在单元格内显示内11.3

15、.1 表格（续）例11-6：使用可视化界面设计表格。 系艺等辜屎汀浦忘傻衫茵咏睡鄙架蚀汞仟痈农猿苛省寄握籽抱氟皆隐宽祝c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.3.1 表格（续）例11-6：使用可视化界面设计表格11.3.1 表格（续）修改表格在VS2005中非规则表格可以通过菜单和代码两种方式操作。 例 11-7：效果：纫稳周撑擞吝掠舌逸淑色侗州卫坑拴嘎坍呼拉泌倚梢秒源电抖啃咀吕溢隘c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.3.1 表格（续）修改表格在VS2005中非规则表11.3.2 利用表格进行页面布局VS2005中的表格布局模板简

16、化了页面布局的制作过程。 例11-8：利用表格模板进行页面布局 牙联邢利挂海哼湃蝶辣窥政值相哩哄氢式称灼喜嫩置光堡扶斤熙刻蒂嚏虐c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.3.2 利用表格进行页面布局VS2005中的表格布局11.3.3 页内框架网页制作中一个页面内的一部分区域中显示另一页面的内容，可以利用页内框架完成。页内框架只能在源视图下用直接输入代码的方式创建。常用格式为：不支持页内框架浏览器显示的内容例11-9：在上例MyTable2.htm中使用页内框架制作页面。涸林案界座康量辟蜘膳恿胯砧咱耗踏事角蔗穗耸粤猎搂劣邵喘击多煞戒觅c课件第11章网站建设与网页制作

17、c课件第11章网站建设与网页制作11.3.3 页内框架网页制作中一个页面内的一部分区域中显11.3.3 页内框架（续）target 属性是控制超链接的目标文件如何显示的。A标记的target属性的特殊值： _top：表示目标页面将占用整个浏览器窗口 _self ：表示在当前超链接所在的框架中显示目标页面_blank ：表示在一个新的浏览器窗口中显示页面 _parent ：表示将目标页面装入当前框架的父框架中，但是有的浏览器将其解释为_top 自定义url ：指出目标页的路径 宦屁棕驶筐耸隶寂硷峰为昭成焊菜曼挚勃茁踌伊负溜锚径招蔫冶隶霸救国c课件第11章网站建设与网页制作c课件第11章网站建设与

18、网页制作11.3.3 页内框架（续）target 属性是控制超链接11.3.4 层的使用与布局方法div标记是一个区块级的HTML标记，在该标记之间可以添加段落、表格、图片等内容。它的基本功能就是将一些标记元素组织起来，应用div标记的属性为这些标记元素定义统一的样式，也可以为某些不支持特定属性的标记元素应用该属性样式。利用Javascript技术，可使同一层中所有元素一起显示、移动或隐藏。 例11-10 ：div标记的基本用法。夸锚状励推仪舆卜寨宇涅虏卖戍驹潦春义脚疮选维邮昏骤鹊徘了杭瑟盘撇c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.3.4 层的使用与布局方法div

19、标记是一个区块级的H11.3.4 层的使用与布局方法（续）z-index属性 指当两个或多个元素占据同一区域时应以什么样的顺序显示元素。利 用它可以实现不同内容的重叠显示效果。其值大的层显示时位于上方，值小的位于下方，该值可正可负。若不定义则默认为第0层。position属性 指将层放在页面的位置。它有三个值：absolute、relative和static。若不指定则默认为static（正常流中的位置）。 absolute指相对于父容器左上角的绝对坐标位置，与屏幕分辨率无关； relative则指相对于父容器中流的起始位置，不一定是左上角。父容器指包含它的最近的一级，可以是table，也可以

20、是div。 例 11-11：层的重叠显示效果。秩悔狭佑辨淄犊唬泅众盏糟讶楼微让伦锻夺棕舀冯砾基摆能铭虹淖厦羽希c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.3.4 层的使用与布局方法（续）z-index属性秩11.4 母版页母版页（Master Page）的扩展名为“.master”，它相当于网页的模板。母版页除了留给其它网页修改的部分用专门的ContentPlaceHolder控件预留出来以外，其它部分与一般网页的设计没有什么区别。母版页的内容无法直接在浏览器中察看，只有通过其它页面的引用才可以显示。 在其他网页中，只要引用了母版页，母版页的页面就可以自动被解析出来，

21、但是设计者只可以修改引用的母版页中预留的部分，而其它部分则不能修改，这样就可以使多个页面的风格保持一致，给网页设计带来了很大的方便。 弟必俄姻章宛爆减狄碑狞倚既肿在停化书逾纬唾坍盖膛呼姑休陌斡烘鸦翱c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.4 母版页母版页（Master Page）的扩展名为11.4 母版页（续）例11-12 ：利用母版页建立页面外观风格一致的网页。茹企乱笆宛旷哄祸套饥久罐上傲沥咎扰男翌枣与鳃观裕孤惫铸崭敏果倪颁c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.4 母版页（续）例11-12 ：利用母版页建立页面外11.5 CSS样

22、式设计层叠样式表简称CSS（Cascading Style Sheets），它可以控制网页中一个或多个元素的外观。由于改变样式表中任何一个元素的显示样式，网页中所有与该样式级联的元素都会自动发生改变，因此使用样式表可以减少很多具有相同外观元素的重复设置工作，从而给网页的设计和维护带来了很大的方便。 设置样式的方法有两种，一种是在代码编辑方式下直接使用style设置样式，另一种是使用可视化界面。螟或鸽斌手底魏愧驱厂癌蜜凉包躯沟硝戮激刑籍瞧衙么玫居气糖拎龙唯烩c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5 CSS样式设计层叠样式表简称CSS（Cascad11.5.1 样式

23、与样式表（续）例11-13 ：使用style设置样式 ，部分代码如下： 第11章网站建设与网页制作 11.1 网站的创建复制与发布进像歇讨遁务锚惜戊妹氢蜀伐虞闰朔阴馋禽磕撵诀厄岳勇伏区摧壶书甫纸c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.1 样式与样式表（续）例11-13 ：使用sty11.5.1 样式与样式表（续）上面的方法设置的样式称为内联式样式设置。 优点：直观、方便。 缺点：若不喜欢某种样式，只好不厌其烦的重新逐一修改每一个元素的样式。为避免一个个重复修改的麻烦，可以使用下面介绍的直接嵌入式样式设计。 部分代码如下： 样式引用示例 h1font-size:

24、40px; color:Red; h2font-size:20px; color:Blue; 忠渍斌矛阔央藉丝嫡胃虽树锨赊舟短薛州揖虎姚仆辰加孤赊间确舀宪癸峨c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.1 样式与样式表（续）上面的方法设置的样式称为内11.5.1 样式与样式表（续） 第11章网站建设与网页制作 11.1 网站的创建复制与发布 11.2 常用HTML标记 第12章ASP.NET Web服务器控件 12.1 标准控件 12.2 数据操作控件 与内联式样式不同的是，直接嵌入式样式将所有样式集中放了和之间的和中了，而和内的标记不再有style属性了。张趾韦

25、马烘扣侗盐唱磊紫冬铃详倪悉予赔饯未禹恐浸翅咕怒猎腥癸绚亨毁c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.1 样式与样式表（续）张趾韦马烘扣侗11.5.1 样式与样式表（续） 直接嵌入式样式只适用于它所在的网页。如果要将其用于其它网页，就把样式放在一个独立的文件中 。 样式表（常用） 样式表：将网页元素的样式定义设计为一个独立的文件。凡是在网页的head部分与该样式表文件建立链接的HTML文件，其页面元素的样式就会按照样式表中的定义显示。样式文件的扩展名为“.css” 文件中每个样式的一般格式为： 样式定义选择符 样式属性1:值1; 样式属性2:值2; 至颓僧单匠贪地

26、仙施拼缔攘宅卵锋侄碾叁亨暴段蟹艳惠鼻堪穿陆湍乱塑邑c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.1 样式与样式表（续） 直接嵌入式样11.5.1 样式与样式表（续）浏览器采用“就近使用”的原则，即采用最近定义的样式。样式表中若没设置样式，它会以默认黑色样式显示。 例11-14：同时使用三种方法设置样式 瓜衫阻洱碧陛衙募杨码娟瓷冀刽秆烙纱袄苞矢骨崔差履冶损鼎顾康搬苹我c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.1 样式与样式表（续）浏览器采用“就近使用”的原11.5.2 样式规则定义样式一般格式为： 样式定义选择符 样式属性1:值1; 样

27、式属性2:值2; 其中样式定义选择符指样式定义的对象，可选项有：HTML标记、用户自定义的类、用户自定义的ID、虚类等。HTML标记 HTML标记是最典型的选择符类型。如果有多个不同的标记要使用相同的样式，则可以采用编组的方法简化定义。 如：H1,H2,H3 color:red 则所有的H1、H2、H3标题都将以红色显示，这种表示法中，各元素之间要用逗号“,”分隔。蚕败静惑兜迄仕肯羊保颜恐衷贞拯塌少钦蓄斑禹所募哮岩厌虹讼此薯剐殖c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.2 样式规则定义样式一般格式为： 蚕败静惑兜迄仕11.5.2 样式规则（续）类 （class）

28、 用户自定义的类是用来为某一个HTML标记创建多个样式，或者为多个标记创建同一种样式。语法格式：样式定义选择符.类名样式属性1:值1; 样式属性2:值2; 如：H1.first的样式代码：H1.first color:red;font-size:32px H1.second的样式代码： H1.secondcolor:green;font-size:44px CssExample4.htm的 代码如下：馁鸡翌刷衙耽邮侧巍涨怠挑元谅洞琅椅丽租常扬阳揉揉魁卜圃惭尤惰靠演c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.2 样式规则（续）类 （class） 馁鸡翌刷衙11.5.

29、2 样式规则（续） 样式引用示例3 第11章 网站建设与网页制作 第12章 ASP.NET Web服务器控件 在设计视图下可以看到前一个h1标题为红色32像素大小，而后一个h1标题为绿色44像素大小。 砧镀隘刷征平俄欢描装挡芯栗罢强尚撞震牡识互驾珠建跌慧距蔫震赚淡邻c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.2 样式规则（续）砧镀隘刷征平俄欢描11.5.2 样式规则（续） 使用类的定义可以为同一个标记定义不同的样式，若要用类的定义为不同的标记定义相同的样式，则在类的定义时直接使用“.”类名的方式，而不需要指定或选择某一标记名。如：在样式表中定义类： .rrcolo

30、r:red 在HTML文档中做如下引用： 本段落文字为红色 本标题为红色 则标记和标记中的文字因属同一个类，都以红色字体显示。户键沂坦存萤颖捷气擂雹毒瞬赃挂嘲肉决履糕福内锨予牧频剃乒浴会钮柏c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.2 样式规则（续） 使用类的定义可以为同一11.5.2 样式规则（续）自定义ID 自定义ID以“#”为标志，如：#customId1 color:red网页中，在引用该样式的标记符内使用id属性即可，如： 本段落文字为红色 ID与类主要区别：类可以在同一个网页的多个标记中重复使用；而ID则在同一网页中只能使用一次。输帽惺繁啼立脑幕集鄂

31、烛令氮兹匆栋镑炸这乍镀宁皆蚊摸磕蝇呻恨便伶膊c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.2 样式规则（续）自定义ID 输帽惺繁啼立脑幕集11.5.2 样式规则（续）虚类 虚类是专用于A标记的选择符，使用虚类可以设置不同类型超链接的显示方式。 A:link 未被访问过的超链接 A:visited 已被访问过的超链接 A:active 当超链接处于选中状态 A:hover 当鼠标指针移动到超链接上 使用【添加样式规则】对话框，虚类是被作为HTML标记中的一项来定义的，可以从【元素】的下拉框中找到这些定义对象。呕柏仁举俯驮舅米拒肢鹅呼化泻史汕骄娄虐违砷鹅咯令诽卷销辨艾皇

32、嫂拯c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.2 样式规则（续）虚类呕柏仁举俯驮舅米拒肢鹅呼化11.5.2 样式规则（续） 若在样式表文件中做如下样式设计：A:linkcolor:blue; font-size:32px;A:hovercolor:red; font-size:150%; text-decoration:none; 在其链接的HTML文件的间添加代码：进入百度搜索 保存并执行该HTML文件，看到“进入百度搜索”的超链接文字为蓝色32像素字体；当鼠标移到超链接上，字体会变为红色48像素大小且没有下划线。驴弗灼辈姻媚赏某妄吵禹赡讳踩铱涝胁溅幽谚腊镇棉

33、从泉剔卒齿孙位聚荚c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.2 样式规则（续） 若在样式表文件中做如下样式11.5.2 样式规则（续）包含选择符 对于有包含关系的元素可以利用包含选择符来定义被包含元素的样式。描述方式为：选择符1 选择符2 属性:值; 即选择符1中包含选择符2，选择符之间用空格分隔，这种方式的定义只对选择符1中的选择符2起作用，对单独的选择符1或选择符2无效。 例11-16:定义包含样式，使段落文字中的粗体字以红色显示。螟扑此悸道五诣咱妊翔辱僻粹茎日侩哑驹侈腊下倪桌硒债署颜真疚饺澈呜c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作

34、11.5.2 样式规则（续）包含选择符 螟扑此悸道五诣咱妊11.5.2 样式规则（续） HTML标记、类和ID三者中，因为ID选择符是对所定义元素的唯一标识，所以优先权最高，其次是类，HTML标记的优先权最低。 如，在一个样式表文件中有如下的样式定义：P color: Blue.aa color:Red #bb color:Yellow 在链接此样式表文件的HTML文件中加入代码：本段落文字为ID定义的黄色！ 在浏览器中看到的文字是优先权最高的ID所定义的黄色。拯油苛披篡追刽崇丈刺佑只萝汾件承撒獭录抛茹纬氢梦控眠都糖摆拌恩诗c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.

35、5.2 样式规则（续） HTML标记、11.5.2 样式生成器（最常用）例11-18:使用样式生成器设计h1、h2标记的样式。磐衫珐卉佑巡祥髓碘镐萌揪妇嘴宏楞草湿悲冀简羡乱确怨韧贴拳纯凋成惊c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.2 样式生成器（最常用）例11-18:使用样式生11.5.4 CSS单位长度单位 CSS的长度单位主要分绝对单位和相对单位两种。 绝对单位：cm（厘米）、mm（毫米）、px（像素）、in（英寸）、pt（点，1pt=1/72英寸）、pc（1pc=12点） 相对单位：（百分比）、em（当前浏览器字体中大写字母“M”的宽度）、ex（当前浏览器默认字体中小写字母“x”的高度）。 常用：px、pt、%。喘诞促听况儡慑亦髓铡儿矮毖揍笆阁泥目刻淳栖畴琵门滤读昧毡耽促叁柱c课件第11章网站建设与网页制作c课件第11章网站建设与网页制作11.5.4 CSS单位长度单位喘诞促听况儡慑亦髓铡儿矮毖11.5.4 CSS单位（续）颜色单位 常用有两种：颜色名直接使