JavaScript程序设计基础教程 第2版 普通高等教育“十一五”国家级规划教材 教学课件 阮文江 第3章 层叠样式表（CSS）技术.pdf

第三章 层叠样式表（CSS）技术 基于 CSS,本章介绍网页的基本格式化和布局 技术 CSS 简介 元素定位 定义样式 元素布局 使用样式 列表样式 CSS 基本属性 表格制作 样式层叠性 页面布局 元素框模型 2015‐6‐10 中山大学计算机科学系 1 3.1 CSS 简介 CSS 是层叠样式表（Cascading Style Sheets， 或称级联样式表）的简称，是格式化网页的标准技 术 例3.1 使用 CSS 将所有文字显示为“倾斜” SharePoint Designer 2007操作 2015‐6‐10 中山大学计算机科学系 2 3.2 定义样式 3.2.1 样式定义格式 样式定义由样式规则组成，每条样式规则包括选 择器和样式声明,如： selector {property:value; …} 样式声明由一系列属性声明组成,而属性声明又由 属性名和属性值构成 示例 p {color:red} /* 将普通 p 段落文字显示为红色 */ h1,h2,h3 { color:red } /* 将 h1,h2,h3 标题文字显示 为红色 */ h2 { font-size: small; color:blue } /* 将 h2 标题文 字指定为小的蓝色字 */ 2015‐6‐10 中山大学计算机科学系 3 3.2.2 基本选择器 最常用的选择器: HTML 标签选择器、类选择器和 ID 选择器 一、HTML 标签选择器 为 HTML 标签定义的样式将改变它的默认显示格 式 例3.2 超链接没有下划线 a {text-decoration: none; /* 去除超链接的下划线 */} 2015‐6‐10 中山大学计算机科学系 4 3.2.2 基本选择器 二、类选择器 形式:一个点号和一个类名： .classname { property:value;…} 效果:使具有指定 class 属性的页面元素具有该 类样式指定的显示格式 例3.3 所有大学名显示为“倾斜、加粗” .university_name { font-style: italic; font- weight: bold; } /* 文字倾斜、加粗 */ 2015‐6‐10 中山大学计算机科学系 5 3.2.2 基本选择器 三、ID 选择器 形式:一个井号（#）和一个 ID #IDname { property:value;…} 效果:使具有指定 ID 属性的元素具有指定格式 例3.4 使术语“级联样式表(CSS)”显示为“倾斜、 加粗、大字体” #css_name { font-style: italic; font-weight: bold; font-size: large; } 2015‐6‐10 中山大学计算机科学系 6 3.3 使用样式 CSS 样式的三种使用方式: 嵌入样式表 链接外部样式表(标准方法，实现网页结构和表现 的完全分离) 内嵌样式 2015‐6‐10 中山大学计算机科学系 7 3.3.1 嵌入样式表 形式:使用 style 元素把 CSS 样式定义在 HTML 文档