计算机基础15 css样式表概述.ppt

HTMLCSS 回顾 表单标记 课程知识拓扑图 本次课内容 WEB标准的了解 CSS的概念 CSS的位置与写法 CSS选择器 样式优先权 书写规范 本次课知识点的作用 本次课是HTMLCSS课程的重点，也是难点之一，通过学习CSS相关语法及标记，形成对WEB标准的基本认识，了解表现与分离的定义，并且学会如何运用CSS。 教学目标 了解WEB标准的概念及构成。 掌握CSS语法及写法。 教学重难点 重点：CSS语法及写法 难点：CSS选择器及样式优先权 本次课教学目标与重难点 Web标准 WEB标准是由W3C和其他标准化组织制定的一套规范集合，包含一系列标准，自然也包含了我们所熟悉的HTML、XHTML、JavaScript以及CSS等。 Web标准的构成 三大部分组成的标准集：结构（Structure）、 表现（Presentation）以及行为（Behavior）。 结构（Structure）--XML、XHTML、HTML 表现（Presentation）--CSS 行为（Behavior）-- DOM 、 JavaScript Web标准的好处 表现与内容分离技术是目前Web标准制定的核心目的。 内容：指具体的信息，仅仅表示信息正文。正文通过XHTML结构化语言被标记为各个独立的部分，如左分栏、右分栏等。 表现：指信息的展示形式，如字号、字体、排版的设计等。 * CSS中文翻译为“层叠样式表”，简称样式表。 CSS1 :1997年 CSS2 :1998年5月 CSS3 :2005年12月 CSS的概念及版本 * CSS的定义是由三个部分构成： 选择符（selector） 属性（properties） 属性的值（value）。 基本格式如下： 选择符 {属性：值；}  (单一选择符的复合样式声明应该用分号隔开 ） 　选择符 { 属性1: 值1; 属性2: 值2 ；} CSS的样式规则 * 1.head内 style type =“text/css”…/style 2.body内 style =“color:blue” 3.文件外调用（后缀名为.css） link rel =“stylesheet” href =“style.css” type=“text/css” CSS位置与写法 CSS语法结构-类型选择符 指网页中已有的标签名作为名称的选择符，body是网页中的一个标签，p也是。因此以下的选择符都是类型选择符。 body{} p{} CSS语法结构-群组选择符 除了可以对单个XHTML对象进行样式指定外，同样可以对一组对象进行相同的样式指派，例如： h1,h2,h3,p { font-size:12px; font-family:arial } 使用逗号对选择符进行分隔。 CSS语法结构-包含选择符 1.包含选择符指选择符组合中前一个对象包含了后一个对象，对象之间使用空格作为分隔符。 例如：h1 span{......} 2.包含选择符除了可以二者包含，也可以多级包含： 例如： body h1 span {......} CSS语法结构-id及class选择符 id及class均是CSS提供自定义标签名称的选择符。对于id与class而言，id的定义优先于class的定义。 1.id选择符使用#符号进行标识（#content{......}）; 2.class在CSS中使用点符号加上名称的形式定义(.p1{......})。 6-1.html #id color: yellow; font-size: 30px; { } ID选择器 属性 值 属性 值 声明 声明 CSS选择器--ID选择器 * 超链接 a:link { font-size: 9pt; color: black; text-decoration: none;}a:visited { font-size: 9pt; color: black; text-decoration: underline;}a:hover { font-size: 9pt; color: green; text-decoration: none;}a:active { font-size: 9pt; color: blue; text-decoration: none;} CSS选择器--伪类选择器 样式优先权问题-样式继承 XHTML中的子标签会继承部分父标签的样式特征 例如：定义body{color:red;}，那么页面中body之下所有的标签及标签下的所有子标签的文本都将变为红色。 案例： 1.父子关系（6-2.html） 2.CSS继承的运用（6-3.html） 样式优先权问题-!impo