CSS的基础知识PPT资料.ppt

1、center;font-family:黑体选择器样式定义样式属性属性取值常用Selector类型HTML标记符用户定义的类用户定义的ID虚类HTML标记符的SelectorHTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如：H1text-align:color:red使所有用H1标记符修饰的内容都居中和用红色显示。示例如下例10-1：建立一个简单的样式表简单的样式表 样式表这是一个简单的样式表用户定义类定义方式classnameproperty:value 表示任何带有class属性为classname的标记符都采用所定义的样式。定义方式定义方式*.class

2、name样式属性样式属性:属性值属性值;样式属性样式属性:.所有所有HTML标签都可引用它标签都可引用它*符号可以省略符号可以省略HTML标签标签.classname样式属性样式属性:样样式属性式属性:.只有该指定的标签才能引用它只有该指定的标签才能引用它10举例举例如下如下.ppcolor:lime;黑体黑体p.ptcolor:blue;仿宋仿宋 这些类可以使用这些类可以使用class属性在属性在HTML中引用：中引用：这是我们定义的这是我们定义的PP类类 这是我们定义的这是我们定义的PP 这是我们定义的这是我们定义的PT类类 完整示例完整示例11用户定义IDidnameproperty:v

3、alue 表示任何ID属性为idname的标记符都采用所定义的样式。用户定义ID与class的作用完全相同，一般使用其中之一即可。#idname样式属性样式属性:属属性值性值;.所有所有HTML标签都可引用它标签都可引用它HTML标签标签#idname 样式属性样式属性:.只有该指定的标签才能引用它只有该指定的标签才能引用它定义方式定义方式13举例举例如下如下#ppcolor:黑体黑体p#ptcolor:仿宋仿宋 这些类可以使用这些类可以使用id属性在属性在HTML中引用：这是我们定义的这是我们定义的PP类类 这是我们定义的这是我们定义的PP 这是我们定义的这是我们定义的PT类类 虚类 Sel

4、ector:link 未访问过的超链接:visited 访问过的超链接:active 活动超链接:hover 悬停状态的超链接虚类 Selector示例CSS属性单位绝对长度单位：网页定义上常常使用的绝对长度值由厘米（cm）、毫米（mm）、英寸（in）、磅（pt）、派卡（pc）等等单位 英寸（in）厘米（cm）毫米（mm）磅（pt）派卡（pc）英寸 1.0 2.54 25.4 72 6 派卡 0.16667 0.4233 4.233 12 1.0 厘米 0.3937 1 10 28.3464 4.7244 毫米 0.03937 0.1 1.0 2.83464 0.47244 磅 0.01389

5、 0.0352806 0.352806 1.0 0.83333 相对长度单位：CSS还支持下列三种长度的相对单位vem（当前字体中字母M的宽度）vex（当前字体中字母X的高度）vpx（一个象素的大小）。颜色单位：v颜色名:#RRGGBBvrgb（rrr,ggg,bbb）vrgb（rrr%,ggg%,bbb%）10.3 10.3 如何在网页中加入如何在网页中加入csscss可以使用四种方法将样式表加入到网页中可以使用四种方法将样式表加入到网页中 v 内联样式内联样式（Inline Styles）v 嵌入一个样式表嵌入一个样式表（Embedding a Style Block）v 将一个外部样式表

6、链接到网页将一个外部样式表链接到网页v 输入一个样式表输入一个样式表以上四种方法，可分成以上四种方法，可分成内部样式表内部样式表（前两者）、（前两者）、外外部样式表部样式表（后两者）两类。（后两者）两类。10.3.110.3.1内联样式内联样式v样式可以使用样式可以使用STYLE属性属性内联。内联。vSTYLE属性属性可以可以应用于任意应用于任意BODYBODY内的内的HTMLHTML元素元素（包括包括BODYBODY本身本身），除了，除了BASEFONTBASEFONT、PARAMPARAM和和SCRIPTSCRIPT。v其语法如下：其语法如下：以下是一个例子vv这段的样式是红色的NewCe

7、nturySchoolbook字体。v缺点：缺点：因为和需要展示的内容混合在一起，没有实现两者的分离。在标签中，用设置在标签中，用设置style属性的方法，一次属性的方法，一次只能控制一个标签的样式只能控制一个标签的样式运行示例10.3.210.3.2嵌入一个样式表嵌入一个样式表v将样式表信息都列于将样式表信息都列于HTML文档的头部文档的头部v基本语法如下：基本语法如下：示例：例10-1：建立一个简单的样式表STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定类型为“text/css”在在STYLE中可中可指定TITLE和MEDIA属性。只限于一个页面内使用只限于一个页面内使用v

8、样式表的规则单独保存在一个文件中样式表的规则单独保存在一个文件中v外部的样式表可以通过外部的样式表可以通过HTML的的LINK元素连元素连接到接到HTML文档中文档中v一个样式表文件可链接到多个一个样式表文件可链接到多个HTML文件文件10.3.10.3.3 3 将一个外部样式表链接到网页将一个外部样式表链接到网页基本语法如下：.说明：说明：v外部样式表文件中外部样式表文件中不能含有任何不能含有任何HTML标签标签。样式表。样式表仅仅由样式表规则组成。仅仅由样式表规则组成。v外部样式表文件中，外部样式表文件中，无须使用注释标签无须使用注释标签。v必须将必须将CSS文件与文件与HTML文件一起发

9、布到服务器中文件一起发布到服务器中。在网页被打开时，浏览器将依照链接标签将含有链接外在网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的部样式表文件的HTML网页按照样式表规则显示。网页按照样式表规则显示。vLINK标签:vTYPE属性用于指定类型为text/cssvMEDIA属性可选属性可选，用于指定样式表被接受的介质或媒体。允，用于指定样式表被接受的介质或媒体。允许的值有许的值有screen（缺省值缺省值），提交到计算机屏幕；，提交到计算机屏幕；print，输出到打印机；输出到打印机；projection，提交到投影机；提交到投影机；aural，扬声器；扬声器；braille，提

10、交到凸字触觉感知设备；提交到凸字触觉感知设备；tty，电传打字机电传打字机（使用固定的字体使用固定的字体）；tv，电视机；电视机；all，所有输出设备。所有输出设备。多样的媒体通过用逗号隔开的列表或值多样的媒体通过用逗号隔开的列表或值all指定。指定。vREL属性：用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式，而REL=“Alternate StyleSheet”定义一个交互样式。固定固定样式在样式表激活时总被应用。vTITLE属性：给样式指定一个标题，可将多个样式指定同一个标题，从而组合成一个首选样式（示例如下）vREL=StyleShee

11、t和一个TITLE属性的组合指定一个首选的样式v每个网页不能指定多于一个的首选样式。多个样式表组合成一个首选样式，例如：示例28一个样式表可以使用一个样式表可以使用CSS的的import 指令输入到网页指令输入到网页中。这个指令用于一个中。这个指令用于一个CSS文件或文件或HTML的的STYLE元素内部。元素内部。import语句后的语句后的“；”号是必须的。号是必须的。要输入的样式表文件的扩展名为要输入的样式表文件的扩展名为.css。10.3.4 10.3.4 输入输入一个样式表一个样式表29样式的优先级样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。样

12、式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。30样式的优先级示例P color:red正文内容其中，test.css 的内容如下：P color:green样式的优先级示例P color:green10.5 10.5 divdiv与与spanspan标签标签 divdiv标签标签vDIV元素：元素：“division”，“部分部分”的简称，是的简称，是一个一个块块级元素级元素。它是一个。它是一个成对标签成对标签vDIV可以包含段落、标题、表格甚至其它部分。可以包含段落、标题、表格甚至其它部分。这使这使DIV便于建立不同集成的类，如章节、摘要或便于建立不同集成的类，如章节、

13、摘要或备注。备注。v通过它可以直接引用样式，不再需要依附于通过它可以直接引用样式，不再需要依附于HTML标签了标签了v它能接受它能接受STYLE、CLASS和和ID属性。属性。34其语法如下：.或者：或者：.在使用在使用标记时，可以使用标记时，可以使用width与与height属性设置区域的大小。属性设置区域的大小。请看示例请看示例 35spanspan标签标签v标签一般用在网页中某一小段文字。标签一般用在网页中某一小段文字。.或者或者.span标签被加入到标签被加入到HTML中的主要目的是用于样中的主要目的是用于样式表，所以当样式表失效时它就没有任何作用。式表，所以当样式表失效时它就没有任何作用。span标签可以使用标签可以使用clsss和和id类选择符。类选择符。36与与的差异：的差异：在在区域内的对象与区域外的上下文会区域内的对象与区域外的上下文会自动换行；而自动换行；而区域内的对象与区域外的上区域内的对象与区域外的上下文不会自动换行。下文不会自动换行。与与标签可同时使用，但建议标签可同时使用，但建议标签可包含标签可包含，但但最好不要最好不要包