第6章C S S —— 层 叠 样 式 表.pptVIP

第 六 章?? C S S —— 层 叠 样 式 表 第一节C S S概述 CSS：即层叠样式表或级联样式表，是对HTML的重要扩展，在网页制作过程中起着非常重要的作用，掌握CSS能够有效地提高制作效率。 CSS的作用： 1、针对页面中的对象的风格和样式进行定义； 2 、使得HTML各个标记的属性更具有一般性和通用性。 3 、它的真正意义在于把对象真正HTML，样式单甚至超越了Web页面本身显示功能，而把样式扩展到多种媒体上，功能相当强大。 第二节结构和引用 CSS的基本结构 结构：selector {property:value} 对于单一选择符的复合样式声明应该用分号隔开： selector{property1:value1；property2:value2；……} 其中：selector:也称选择符、选择器，可以分为三类： 第一种是HTML中的标记（tag）p,body,a等； 第二种是class； 第三种是ID。Property:是希望要修改的属性（如：color属性）。value:希望赋予property的值，（如：给color的可以是red）。 二、在页面中引用css的方法 最简单的方式是使用html的style标记。此标记放在文件的head部分，包含网页的样式结构。 层叠的意义及分类： 它的意义在于如果同一个Web文档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的优先级，优先级最高的，在显示时就会被最后采用。 样式的种类： 内联式样式单：利用现有的html标记，把特殊的样式加入到那些由标记控制的信息中。如： p style=”color:red”这里显示红色字。/p 嵌入式样式单：和script类似，嵌入到html文件的head/head之间，使用style/style标记装载。 外部式样式单：是一种保存在外部的样式单文件.外部文件以.css为扩展名.（书写ＣＳＳ应注意大小写） 三、属性值的单位 在样式单中，属性的单位多为长度单位，包括像素(px)，磅(pt)，em(一种排版中的单位，1em=12pt)、mm、cm、pc(1pc=12pt)、in（英寸），这些单位可以用整数(如px)表示，也可以用实数表示(如em)表示，并且元素中数值还有继承关系。 比如body {font-size:12pt;text-indent:3em;} H1{font-size:15pt} 那么在显示中H1的text-indent属性就不是36pt而是45pt。有些属性的单位还可以是负值，如margin。另外还有deg（角度）、grad（梯度）、rad（弧度）；频率的单位是hz和khz。 四、注释及空格 与编程语言一样，样式单也有注释语句：可用”/*….*/”作为注释标记，在浏览器中有一个对样式单的分析器，他负责对样式单的检查，分析器将忽略注释标记之间的内容。空格在样式单中是有效的，如果字符之间有超过一个空格存在，它省略其余空格，而只保留一个，特别是在声明某些字体的时候，空格一定不能省略。 注意： 首先，样式单是区分大小写的，所以注意拼写； 其次：对于css2为声明的属性和方法，样式单的分析器会忽略它的存在。如： H1,H2{color:green} H3,H4H5{color:red} P{color:blue;font-variant:small-caps} 是样式单中没有的标记，第二行整个被分析器忽略，第三行中的font-variant不是一个合法属性，也被忽略过(“color:blue”有效)。 第三节选择符 选择符的作用：选择符的作用在于定义ＣＳＳ。它的作用就类似于定义函数的名称一样。 一、超文本标记选择符 任何一个html元素都可以是一个css选择符。选择符仅仅是指向需要特别样式的元素。如： p{text-indent:3em}中的选择符是段落标记p 二、类选择符 一个选择符能有不同的类，因而允许同一元素有不同的样式。如：用不同的颜色显示代码： font.html {color:#191970} Font.css{color:#4b0082} 注意每个选择符只能有一层类。类的声明可以无需相关的元素.note{font-size:small}意义为：名为note的类可以被用于任何元素。 三、ＩＤ选择符 可以为页面内所有的标记定义一个ID，在css的选择符中可以根据id个别的定义每个元素的样式属性。 四、综合例子 html style !- p{color:red;font-weight:bold}.bigfont{font-size:200%}#blueblack{background-color:blue;color: yellow}a:hover{text-decoration