css与div任奇课件.ppt

《css与div任奇课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第三章:div+css课程讲解讲师：任奇2012年10月29日星期一第3章DIV+CSS布局基础3.1CSS的基本语法CSS（CascadingStyleSheet）的中文译名是层叠样式表。CSS用于控制网页元素的外观，CSS提供了丰富的样式表现功能，如字体、段落、颜色、背景、布局等。使用DIV+CSS的布局方式改变了传统html+table的布局方式。DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。CSS语法中最基本的语法是选择器的概念和选择器的声明。正确使用CSS选择器能为建立标准的XHTML页面带来很多的好处。本

2、章还将讲述CSS的继承和层叠，理解和掌握这些概念是使用CSS样式表的重要基础。1选择器选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类等。（1）标签选择器一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。下图为标签选择器的结构。（2）类选择器使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个

3、标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。下图为类选择器的结构。（3）ID选择器ID选择器和类选择器相似，不同的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。下图为ID选择器的结构。（4）全局选择器全局选择器是一个星号。它能作用于XHTML文档中的所有元素，即用全局选择器声明的CSS样式可以应用于整个XHTML文档的任何标签。下图为全局选择器的结构。（5）组合选择器标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这

4、两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。（6）继承选择器学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。1．文档树2．CSS的继承3．继承选择器（7）伪类伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用

5、在标签上的，伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。但是有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:active、vistited和:hover。2.声明声明是构成CSS语句的一部分，声明写在选择器之后。CSS的声明写在一对大括号中，其中包含CSS的属性和值。声明的写法有明确的规则，若不遵守声明的规则，则可能导致CSS样式失效。以下为CSS声明的规则：声明中属性和值之间用冒号隔开；声明中可以包含多个属性；使用多重声明时，每个声明用分号隔开；声明的大括号必须书写完整。（1）多重声明多重

6、声明是指在对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开书写。如：h1{color:blue;font-size:24px;font-weight:bold;}（2）集体声明集体声明是指若样式表中有多个选择器使用相同的属性设置，这些选择器可以并列写在一起。设置好网页中某个元素的CSS样式后，另外一个元素也要应用相同的样式。如：.one,#two,p{color:red;}3.CSS的层叠原理CSS的全称为CascadingStyleSheets，中文翻译为层叠样式表。学习CSS的层叠（cascading）是深入学习CSS原理的基础。当出现多个样式共

7、同作用于某个页面元素时，就需要决定哪一个会被应用。CSS的层叠就是一个决定CSS样式优先级的规则。（1）CSS样式来源在之前的实例中，每个XHTML文档的外观都是由CSS样式表控制的。实际上除了网页设计师制作的CSS样式表外，还有其他样式表影响着网页文档的外观。在浏览器上运行的网页文档受以下三个CSS样式表控制外观：浏览器的默认样式用户自定义的样式网页作者制作的样式（2）选择器的优先级由于CSS的某些属性有继承性，一个页面元素往往应用了多个选择器定义的CSS样式。CSS的选择器具有优先级，用于决定哪个选择器定义的样式最终被应用