《HTML5与CSS3网页设计》_《HTML5与CSS3网页设计》_HTML5 与CSS5 网页设计（第二版）第五章.pptVIP

图5-11CSS属性预定义的值返回图5-12长度必须指出单位返回图5-13百分数通常是相对于父元素的返回图5-15设置背景图片的URL返回图5-1616种预定义颜色返回图5-18十六进制格式的颜色返回图5-20HSL格式的颜色返回图5-23设置所有P和h2元素的样式返回图5-24使用class和id选择器返回图5-25按祖先元素选择要格式化的元素返回图5-27按父元素选择要格式化的元素返回图5-29按相邻同胞元素选择要格式化的元素返回图5-30显示效果返回图5-35组合使用选择器返回图5-36页面效果返回第5章使用CSS样式5.1样式表文件的使用5.2CSS构造样式规则5.3CSS样式选择器5.4综合实例返回5.1样式表文件的使用5.1.1外部样式表1.创建外部样式表这里以在DreamweaverCS6环境下创建CSS为例展开介绍。要创建一个外部样式表，在新建文档界面中选择CSS，如图5-1、图5-2所示。样式表开头处的@charset并不总是必需的，不过总是在样式表中包含它也没有任何坏处。可以以任何名称为样式表文件命名。2.使用外部样式表在每个希望使用样式表的HTML页面的head部分，输入linkrel=stylesheet”href=url.css其中url.css是外部样式表的路径和名称。下一页返回5.1样式表文件的使用例如，创建如图5-3所示的CSS样式表。现在将外部样式表base.css链接到网页中。其页面效果如图5-4所示，base.css中设定的样式将P元素的字号设14.7px、首行缩进2字符应用到了所有的段落上。5.1.2内部样式表内部样式表是在页面中应用CSS的第二种方式。它允许在HTML文档里直接设置样式。使用内部样式表时，style元素及其包围的样式规则通常位于文档的head部分，浏览器对页面的呈现方式与使用外部样式表时是一样的，如图5-5所示。由于这些样式只在一个网页里存在，因此不会像外部样式表中的规则上一页下一页返回5.1样式表文件的使用那样应用到其他的页面，对于大多数情况，外部样式表是推荐的方式，但理解其他的选择以备不时之需也是很重要的。从技术上说，在页面的body部分添加内部样式表也是可行的，但应尽可能避免这种做法。5.1.3内联样式内联样式是在HTML中应用CSS的第三种方式。不过，应当最后考虑这种方式，因为它将内容HTML)和表现(CSS)混在了一起，严重地违背了最佳实践。其效果如图5-6所示，内联样式只影响一个元素，因此使用它将失去外部样式表的重要好处:一次编写，到处可见。上一页返回5.2CSS构造样式规则5.2.1样式规则样式表中的每条规则都有两个主要部分:选择器和声明块。选择器决定哪些元素受到影响声明块由一个或多个属性/值组成，它们指定应该做什么，如图5-7所示。声明块内的每条声明都是一个由冒号隔开、以分号结尾的属性/值。声明块以前花括号开始，以后花括号结束。每一条声明的顺序并不重要，除非对相同的属性定义了两次。5.2.2为样式规则添加注释在CSS中添加注释，这样就可以标注样式表的主要区域，或者对某条规则或声明进行说明。注释不仅对代码编写者有用，对阅读代码的其他人也有好处。下一页返回5.2CSS构造样式规则可以将注释放在单独的行上，也可以放在声明块里，如图5-8所示。在设计网页时，样式表很快就会变得很长，因此对样式表进行组织对于保持CSS的易于维护性是至关重要的。通常，将相关的规则放在一起，形成分组，并在每组前面放置一段描述性的注释，对样式表中的主要区域添加注释，就可以保持样式表的井然有序。同时，注释也是很有用的调试工具。5.2.3属性的值1.inherit对于任何属性，如果希望指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用inherit值。2.预定义的值上一页下一页返回5.2CSS构造样式规则大多数CSS属性都有一些可供使用的预定义值。例如，float属性被设为left、right或none。HTML中属性值的书写方式不同，在CSS中，不需要也不能将预定义的值放在引号里，如图5-11所示。3.长度和百分数很多css属性的值是长度。所有长度都必须包含数字和单位，并且它们之间没有空格，例如3em、10px，如图5-12所示。唯一的例外是0，它可以带单位也可以不带。有的长度是相对于其他值的。百分数(如65%