CSS3基础教程超详细解答.ppt

CSS技术;HTML标记的不足之处 代码繁琐 格式的一致性差 可维护性差 网页现实效果缺乏动态性与交互性;层叠样式表CSS （Cascading Style Sheet）;一.CSS的基础知识;1. 样式表和HTML的关系; HTML 4.0版本已经包括了样式表的内容。样式表正在逐渐改变设计、制作网页的方法，为网页创新奠定了基础。 样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两部分相互分离，从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷，而样式表代码独立出来后则从另一角度控制网页外观。 利用样式表，可以将站点上所有的网页都指向某个CSS文件，用户只需要修改CSS文件中的某一行，那么整个站点都会随之发生改变。这样，通过样式表就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。; 样式表的基本结构是怎样的？下面通过一个简单的样式表实例，让你获得对样式表整体性的感性认识。 首先建立一个简单的HTML文件。; 现在，给这个HTML文件加一些样式表。只需在body标签之前插入以下代码： style type=text/css !-- h1{color:red;font-size:35px;font-family:黑体} p{background:yellow;color:blue;font- size:25px;font-family:隶书} -- /style 这样就已经制作出了使用样式表的网页。从浏览器中打开网页（当然首先要保证浏览器支持样式表），网页显示效果如下图所示。; 简单样式表效果; 由这个简单的样式表实例，可以看出： 一个样式表由许多样式规则组成的，用以告诉浏览器怎样去显示一个网页文档。 样式表的核心是规则，样式表的规则如下： 选择符{属性1:值1;属性2:值2} 如，h1{color:green} 这个规则就是告诉浏览器所有标签h1和/h1之间的文字以绿色显示。 其中h1就是选择符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名（如color）和属性值（如green）。;;(1) 在行内直接加入样式;(2) 把样式表嵌入到文档头; 说明： ⑴ style标签是用??说明所要定义的样式。type属性是指定style标签以CSS的语法定义。 ⑵ 样式表基本格式中的type=text/css用于说明这是一段CSS规则代码。 ⑶ 为了防止不支持CSS的浏览器将style…/style标签间的CSS规则当成普通字符串，而显示在网页上，应将CSS的规则代码插入!--和--标签之间。 ⑷ 选择符1......选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。 ⑸ 样式属性：定义样式的属性名称; 前面，我们介绍了在文档头嵌入样式表规则的方法。这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独立的CSS文件中，并将该文件链接或输入到要运用样式的HTML文件。 这种方法就是将多个HTML文件都链接到一个样式表文件。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。如果维护的站点很大，则这种方式绝对会有其用武之地。 它的使用方法是：创建一个普通的网页，但不使用style规则，而是在HTML文档头部使用link标签。; 说明： ⑴ *.css为预先编写好的样式表文件。 ⑵ 外部样式表文件中不能含有任何像head或style这样的HTML标签。样式表仅仅由样式表规则或声明组成。 ⑶ 在href属性中可以使用绝对URL或者相对URL。 ⑷ 外部样式表文件中，无须使用注释标签。 ⑸ 如同发布HTML文件那样，将这个CSS文件发布到服务器中。在网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。 ;*;*;*;*;*;*;*;*;*;*;*;*;*;二. CSS的属性 ;1. 设置字体样式;(1) 字体属性font-family; 在HTML里,可以使用i标签,将网页文字设置为斜体。而在CSS里，则可利用font-style属性，达到字体风格的变化。 语法： font-style:n