计算机网络概述（北大）WENJI05-CSS基础知识.pptxVIP

层叠样式表CSS基础知识 吴云芳 北京大学信息科学技术学院 wuyf_pku@sina.cn 1 主要内容 CSS的基本概念 CSS的基本语法 选择符的分类 CSS的定义层次 Div标签 附录：属性列表 2 什么是CSS？ CSS是Cascading Style Sheets的缩写，翻译为层叠样式表 ，简称样式表，是一种改善网页外观的技术。利用之可以对网页中的文本、图像等内容进行精确的格式化控制，例如字体、背景、排列方式等。 3 CSS与HTML CSS的基本理念，就是将网页的“内容”与“形式”的设置分离开来。 HTML表现网页的具体内容，CSS 修饰网页的表现形式。 4 为什么要学习CSS？ 灵活性 丰富精确地描述网页中各元素的格式。 灵活便捷地修改网页中各元素的格式。 方便准确地控制多个页面的格式。 呈现性 符合W3C标准。 浏览器将缓存外部样式表，加快下载速度。 代码数量可减少 50%甚至更多。 5 CSS的基本语法(文档样式表) CSS定义由三部分构成：选择符、属性和属性值。 选择符 {属性:属性值;属性:属性值;……} 选择符是HTML 的标签； 属性是希望定义的属性，每个属性都有一个值； 属性与属性值之间用“:”相连接； 不同属性之间用“;”相分割。 body {color: yellow} p {font-family: 隶书} caption{font-size:40;font-family:黑体} 参见CSS01.html. 和html语法的区别？ 6 不同层次的标签语法不尽一样。 选择符的分类 选择符有下列可选的形式： 1 HTML标签 2 选择符组 3 类选择符 相关类选择符 独立类选择符 选择符 {属性:属性值;属性:属性值;……} 7 选择符组 当需要赋予某些选择符一些相同的属性值时，可以进行组合声明，用逗号将不同的选择符分开，以此来减少重复定义。 等效于： p{color:yellow} table{color:yellow} p,table{color:yellow} 参见CSS02.html. 8 相关类选择符 给同类标签定义不同类型的样式时，可以使用相关类选择符。相关类选择符与具体的标签相关联。 标签名和类名之间用“.”分割。 HTML标签名.类名1 {属性:属性值;……} HTML标签名.类名2 {属性:属性值;……} 9 相关类选择符示例 页面中希望定义两个不同的段落样式，一个段落向右对齐，一个段落居中。 首先在头部定义两个类： p.right {text-align: right} p.center {text-align: center} 然后在体部的不同段落里，标签里加入class属性： p class=“right”这个段落向右对齐/p  p class=“center”这个段落居中排列/p 参见CSS03.html。 10 独立类选择符 给不同类标签定义相同类型的样式时，可以使用独立类选择符。独立类选择符不与具体的标签相关联。 类名之前用“.”标记。 .类名 {属性:属性值;属性:属性值;……} 11 独立类选择符示例 页面中对不同标签使用相同的样式“居中排列”。 首先在头部定义一个独立类选择符： .center {text-align: center} 然后在体部相应的标签上添加 class 属性： h1 class=“center”这个标题居中排列/h1 p class=“center”这个段落也居中排列/p 参见CSS04.html 12 CSS的定义层次 样式表的定义可分为3个层次： 内置(inline)样式表 文档(document level)样式表 外部(external)样式表。 样式表之所以被称为层叠样式表，就是因为样式可以三个不同层次上进行定义和叠加。 13 不同层次的作用对象与级别 三个层次分别适用不同的对象： 内置样式表适用于单个标签的内容 文档样式表适用于整个文档的主体 外部样式表应用于多个文档的主体中 组合使用时的优先级别： 内置样式表＞文档样式表＞外部样式表 14 内置样式表 内置样式表通过设定html标签的style属性，直接对某个标签单独定义样式。 标签 style=“属性:属性值;属性:属性值;……” 文本内容 /标签 参见CSS06.html。 15 文档样式表 文档样式表在html文档的head区内加以定义，作用于整个文档的主体。 标签style用于定义文档样式表。 head style 选择符 {