第7部分CSS基础知识.ppt
第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文档中属性是指元素某方面的特性。 规则：“属性:值”对的集合，用来控制网页元素的显示方式。,7.2 CSS的特点,简化了网页格式设计，增强了网页的可维护性。 加强了网页的表现力，更多的效果扩展了表现形式 。 增强了网站格式的一致性，降低网站开发与维护工作量。 允许作者独立控制文档中所有标签的显示形式 。,7.3 CSS的类型,7.3.1 CSS的类型 7.3.2 样式优先权原则,7.3.1 CSS的类型,内联样式：是给某个元素设定具体的样式规则。它在元素的开始标签内写入具体的样式规则(写法参见下一节)，作用范围仅限于本元素。 文档级样式：是将所有样式规则都罗列在HTML文档的头部(和之间)，其作用范围是整个文档。 外部样式：是将所有样式规则整合成一个独立的文档(.css文件)，作用范围是所有引用或链接它的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 外部样式表,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; 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的类。在正文中引用时要在标签中通过类属性指定类名(class=类名)，如 正文内容 通用类选择符：规则的定义和常规类相似，只是去掉了标签名，比如.redcolor: red 。引用时和常规类的方法一样。 ID选择符：规则的定义是把通用类定义中的“.”改为“#”，如 #red color: red，引用时在标签中使用id属性指定id名，如 正文内容,本节目录,？,问题与解答,Q1：通用类选择符、常规类选择符、ID选择符的规则冲突时，优先权如何确定？ A1：低高 Q2：类/ID选择符、标签选择符的规则冲突时，优先权又如何确定？ A2：高低,本节目录,7.4.2.1 内联样式表,内联样式表：在标签中包含style属性及其值，中间用“=”连接，值是一个规则的简写，它省略了规则的选择符和“”， 如： 欢迎光临 ,本节目录,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:/www.abc.com/styles.css); import “http:/www.abc.com/styles.css“;,
