《第7部分CSS基础知识.ppt》由会员分享，可在线阅读，更多相关《第7部分CSS基础知识.ppt（18页珍藏版）》请在三一办公上搜索。
1、第7部分 CSS基础知识,7.1 样式表的概念 7.2 CSS的特点 7.3 CSS的类型 7.4 CSS的基本写法及引入,7.1 样式表的基本概念,CSS的全称为Cascading style sheets，是W3C在1996年提出的一个定义HTML的级联/层叠样式表，很快就成为一个被广泛采纳的标准。到1998年，W3C在原有草案的基础上进行了扩展，建立了CSS2规范，它不仅包括了原有的表现形式与标准，还有许多增强功能。元素：指表示文档格式的一个模块，包括一个开始标签、一个结束标签和包含在这两个标签里的所有内容。属性：在HTML文档中属性是指元素某方面的特性。规则：“属性:值”对的集合，用来
2、控制网页元素的显示方式。,7.2 CSS的特点,简化了网页格式设计，增强了网页的可维护性。加强了网页的表现力，更多的效果扩展了表现形式。增强了网站格式的一致性，降低网站开发与维护工作量。允许作者独立控制文档中所有标签的显示形式。,7.3 CSS的类型,7.3.1 CSS的类型7.3.2 样式优先权原则,7.3.1 CSS的类型,内联样式：是给某个元素设定具体的样式规则。它在元素的开始标签内写入具体的样式规则(写法参见下一节)，作用范围仅限于本元素。文档级样式：是将所有样式规则都罗列在HTML文档的头部(和之间)，其作用范围是整个文档。外部样式：是将所有样式规则整合成一个独立的文档(.css文件
3、)，作用范围是所有引用或链接它的HTML文档。,本节目录,7.3.2 样式优先权原则,当多个样式表对某元素的规则定义发生冲突时，浏览器会按如下优先权原则进行处理：若在同一个类型的样式表中发生冲突，那么按最后定义的样式来显示。若在不同类型的样式表中发生冲突，那么按照内联样式表、文档级样式表、外部样式表从高到低的优先权顺序显示。,本节目录,7.4 CSS的基本写法及引入,7.4.1 规则的写法 7.4.1.1 基本写法 7.4.1.2 多个选择符7.4.1.3 规则的引用7.4.1.4 样式类7.4.2 样式表的引入7.4.2.1 内联样式表7.4.2.2 文档级样式表7.4.2.3 外部样式表,
4、7.4.1.1 基本写法,样式规则的一般格式：样式符 属性1:值1;属性2:值2;一条规则包括一个选择符(样式符)及其声明，放在“”中的“属性:值”对称之为声明，各“属性:值”对之间用“;”分隔。基本写法中的选择符是HTML标签名，如p、body、hr等。如规则 p color:red;font-size:20pt;，其中p是选择符，color:red、font-size:20pt是属性:值对，本规则表示所有标签中的文字颜色为红色、大小为20磅。,本节目录,7.4.1.2 多个选择符,对大量标签作重复性设定时，如将h1h6的6级标题都设为红色时，可以分条书写规则如下：h1 color:red;
5、h2 color:red;h6 color:red;多个选择符的分组写法：多个选择符用逗号分隔，后跟声明部分，上面的例子就可以书写为：h1,h2,h3,h4,h5,h6 color:red;,本节目录,7.4.1.3 规则的引用,对于已定义了规则的标签，在HTML文档的正文部分不需要作任何改动，例如，对于上一小节的例子，可直接在正文部分添加“二号标题”，这和以前的使用没有任何区别。对于后面介绍的样式类/ID规则的引用，只需在标签内添加少量语句即可。,本节目录,7.4.1.4 样式类,常规类选择符：规则的选择符是“标签名.类名”，如p.red color:red 定义了一个p的名叫red的类。在
6、正文中引用时要在标签中通过类属性指定类名(class=类名)，如正文内容通用类选择符：规则的定义和常规类相似，只是去掉了标签名，比如.redcolor:red。引用时和常规类的方法一样。ID选择符：规则的定义是把通用类定义中的“.”改为“#”，如#red color:red，引用时在标签中使用id属性指定id名，如正文内容,本节目录,？,问题与解答,Q1：通用类选择符、常规类选择符、ID选择符的规则冲突时，优先权如何确定？A1：低高Q2：类/ID选择符、标签选择符的规则冲突时，优先权又如何确定？A2：高低,本节目录,7.4.2.1 内联样式表,内联样式表：在标签中包含style属性及其值，中间
7、用“=”连接，值是一个规则的简写，它省略了规则的选择符和“”，如：欢迎光临,本节目录,7.4.2.2 文档级样式表,文档级样式表：在网页的和之间添加和标签，在标签中指定属性type=“text/css”，将规则置于这两个标签之间，如：h2 color:red;font-style:italic;,实例,本节目录,实例,h2 color:red;font-style:italic;欢迎光临,本节目录,效果图,本节目录,7.4.2.3 外部样式表,外部样式表的使用链接外部样式表的方法：在文档的与标签之间使用标签，并指定该标签的rel属性、type属性、href属性的值，如,本节目录,7.4.2.3 外部样式表,引入外部样式表的方式：是使用标签间的一个特殊命令 import(at规则)引入文件，如：import url(http:/http:/,
