《第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文档的头部(和之间),其作用范围是整个文档。 外部样式:是将所有样式规则整合成一个独
3、立的文档(.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 文档
4、级样式表 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级标题都设为
5、红色时,可以分条书写规则如下: 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 样式类,常规类选择符:规则的选择符
6、是“标签名.类名”,如p.red color: red 定义了一个p的名叫red的类。在正文中引用时要在标签中通过类属性指定类名(class=类名),如 正文内容 通用类选择符:规则的定义和常规类相似,只是去掉了标签名,比如.redcolor: red 。引用时和常规类的方法一样。 ID选择符:规则的定义是把通用类定义中的“.”改为“#”,如 #red color: red,引用时在标签中使用id属性指定id名,如 正文内容,本节目录,?,问题与解答,Q1:通用类选择符、常规类选择符、ID选择符的规则冲突时,优先权如何确定? A1:低高 Q2:类/ID选择符、标签选择符的规则冲突时,优先权又如
7、何确定? 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:/ import “http:/
链接地址:https://www.31doc.com/p-2257887.html