(Web网站设计与开发)第3章层叠样式表CSS.ppt

　　【学习提示】 很多网站开发者说，网站设计不光是技术问题，同时也是艺术问题。这个说法很有道理，因为一个网站是否能够被用户接受，它的色彩搭配、结构布局、动态效果等都是非常重要的。CSS正是负责在网页中设置颜色、布局和效果的，因此很多人认为精通CSS就可以让网站在视觉上达到很高的水平。另一方面，CSS是技术层面的知识，并不能提高开发者的艺术水平，网站的设计是需要美编人员的直接参与。一旦网站的颜色、布局和效果被设计出来，CSS就可以隆重登场来进行编码实现。因此可以说，审美能力是“思想力”，CSS技术是“执行力”。 　　CSS技术符合软件工程的原则，它的产生和应用直接提升了网站的开发效率。越是大型的网站，越重视CSS的设计和开发。 　　　　层叠样式表(Cascading Style Sheet，CSS)是W3C组织所拟定出的一套标准的样式语言规范。　　由于HTML的主要功能就是以丰富的样式显示各种内容，而有限的HTML标签无法满足不断增加的样式需求。这一矛盾的解决方式是在HTML之外增加样式表，以描述复杂的网页显示方式。 　　自从1990年初，HTML开始应用就出现了各种形式样式表。不同的浏览器结合各自的样式语言让读者来调节网页的显示方式。1994年，Hakon Wium Lie提出了CSS的最初建议，而此时Bert Bos正在设计名为Argo的浏览器，他们决定一起合作设计CSS。与之前的样式语言不同，CSS是第一个含有“层叠”特性的样式语言。Hakon于1994年第一次公开展示了CSS的解决方案，此方案很快被W3C所采纳，并由Hakon等人作为项目的主要技术负责人开展了更加深入的研发工作。1996年底完成了CSS1的制定，1998年完成CSS 2的制定。目前，越来越多的浏览器和网站开始支持CSS3标准。 　　随着CSS技术的使用，HTML页面真正“活动”了起来。各种浏览器都不断增加和改善对CSS的支持。1997年，Microsoft发布了IE 4.0，将动态HTML标签、CSS和动态对象模型(DHTML Object Model)发展成一套完整、实用、高效的客户端开发技术体系，Microsoft称其为DHTML。而在HTML5中，一些纯粹用作显示效果的标签将取消，因为它们显示效果的工作更适合由CSS来担任。　　作为一种用于网页展示的样式语言，CSS增加了更多的样式定义方式来辅助HTML语言。 通过CSS样式表的定义，只要设定某种标签(如表格、背景、链接、文字、按钮、滚动条等)的样式，则各网页相同种类的标签将会呈现出相同的风格。这种方式不仅加快了网站开发的进度，而且便于建立一个风格统一的网站。　　CSS的定义可以直接放在HTML元素的标签中，称为内联样式。其形式如下：　　p style=color:sienna;margin-left:20pxThis is a paragraph./p 　　CSS的定义可以放在HTML文件的?style?标签中，称为内部样式表。其形式如下：　　head　　style　　body{background-color:yellow;}　　/style　　/head　　CSS的定义也可以独立保存在一个扩展名为?.css的文件中，通过链接的方式包含在网页中，称为外部样式表。其形式如下： 　　head　　link rel=stylesheet type=text/css href=foo.css　　/head 　　　　一条CSS规则中包括两个部分：一个选择符(selector)和一个或多个描述(declaration)，描述之间用分号隔开。每一个描述中又包含属性名(property)和属性值(value)，语法如下： 　　selector {property:value; property:value; ...}　　下面的CSS规则中声明了段落标签?p?的显式方式，包括文本居中、黑色、arial字体。CSS中的注释在“?/*?”和“?*/?”之间。　　/*This is a CSS rule*/　　p{ 　　text-align:center;　　color:black;　　font-family:arial;　　} 　　在这个例子中，p是选择符，text-align、color和font-family是属性，并为这些属性设置了相应的属性值。　　1．类选择符　　选择符可以是一种HTML元素，例如“p”、“table”等，这些可以看做是HTML预定义的类。例如下面的CSS规则：　　body {background: #fff; margin: 0; padding: 0; }　　p { color: #ff0000; }　　应用了上述CSS的HT