第7部分 CSS基础知识.pptVIP

第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文档的头部(head和/head之间)，其作用范围是整个文档。 外部样式：是将所有样式规则整合成一个独立的文档(.css文件)，作用范围是所有引用或链接它的HTML文档。 7.3.2 样式优先权原则 当多个样式表对某元素的规则定义发生冲突时，浏览器会按如下优先权原则进行处理： 若在同一个类型的样式表中发生冲突，那么按最后定义的样式来显示。 若在不同类型的样式表中发生冲突，那么按照内联样式表、文档级样式表、外部样式表从高到低的优先权顺序显示。 7.4 CSS的基本写法及引入 7.4.1 规则的写法 基本写法 多个选择符 规则的引用 样式类 7.4.2 样式表的引入 内联样式表 文档级样式表 外部样式表 基本写法 样式规则的一般格式：样式符 {属性1:值1;属性2:值2;…} 一条规则包括一个选择符(样式符)及其声明，放在“{}”中的“属性:值”对称之为声明，各“属性:值”对之间用“;”分隔。 基本写法中的选择符是HTML标签名，如p、body、hr等。 如规则 p {color: red; font-size: 20pt;} ，其中p是选择符，color: red、font-size: 20pt是属性:值对，本规则表示所有p标签中的文字颜色为红色、大小为20磅。 多个选择符 对大量标签作重复性设定时，如将h1~h6的6级标题都设为红色时，可以分条书写规则如下： h1 {color: red;} h2 {color: red;} … h6 {color: red;} 多个选择符的分组写法：多个选择符用逗号分隔，后跟声明部分，上面的例子就可以书写为： h1, h2, h3, h4, h5, h6 {color: red;} 规则的引用 对于已定义了规则的标签，在HTML文档的正文部分不需要作任何改动，例如，对于上一小节的例子，可直接在正文部分添加“h2二号标题/h2”，这和以前的使用没有任何区别。 对于后面介绍的样式类/ID规则的引用，只需在标签内添加少量语句即可。 样式类 常规类选择符：规则的选择符是“标签名.类名”，如p.red {color: red} 定义了一个p的名叫red的类。在正文中引用时要在标签中通过类属性指定类名(class=类名)，如 p class=red正文内容/p 通用类选择符：规则的定义和常规类相似，只是去掉了标签名，比如.red{color: red} 。引用时和常规类的方法一样。 ID选择符：规则的定义是把通用类定义中的“.”改为“#”，如 #red {color: red}，引用时在标签中使用id属性指定id名，如 p id=red正文内容/p 问题与解答 Q1：通用类选择符、常规类选择符、ID选择符的规则冲突时，优先权如何确定？ A1：低?高 Q2：类/ID选择符、标签选择符的规则冲突时，优先权又如何确定？ A2：高?低 内联样式表 内联样式表：在标签中包含style属性及其值，中间用“=”连接，值是一个规则的简写，它省略了规则的选择符和“{}”， 如： h2 style=color: red; font-style: italic; 欢迎光临 /h2 文档级样式表 文档级样式表：在网页的head