《简介CSS技术》PPT课件

• 在页面文件中对CSS的定义有以下几种方式：
（1）直接在页面文件中使用HTML标记的style属性。 • 这种方式可以直接在HTML标记中定义该标记的显示样式， 并且该样式定义只能用于这个标记。其语法格式为： <标记名 style=“样式属性名1：属性值1； 样式属性名2：属性值2；……"> • 如： <p style= "font-family:宋体; color:red; font-size: 10pt"> • 程序代码见程序清单3-1，运行结果。
第 3章
CSS技术
• 了解CSS基本概念 • 了解CSS基本语法 • 了解CSS常用属性描述方法
3.1 CSS简介 • 3.1.1 什么是CSS • 3.1.2 CSS的作用 • 3.1.3 CSS的特点 3.2 CSS基本语法 • 3.2.1 CSS的基本格式 3.3 CSS基本属性 • 3.3.1 CSS背景属性 • 3.3.2 CSS文本属性 • 3.3.3 CSS字体属性 • 3.3.4 CSS边界属性 • 3.3.5 CSS边框属性 • 3.3.6 CSS边距属性
• CSS的注释语句是位于“/*”和“*/”标记 之间的语句内容。
• 程序代码见程序清单3-2 。
• CSS选择符主要有HTML标记wk.baidu.comCLASS选择符 和ID选择符三种。
表3-1 CSS选字符的定义和使用
选择符 HTML 标记 CLASS 选择符 语法格式 定义语法：标记{……} 使用语法：<标记> 定义语法：*.类名{……}或 .类名{……} 使用语法：<标记 class=类 名> 样式使用范围说明 在HTML文件中，所有该 标记包含的文本都具有 定义的CSS样式 在HTML文件中的所有使 用该类名的标记都具有 定义的CSS样式 示例 h3{font-family:隶书} …… <h3>…</h3> .my{font-size:20pt} …… <h3 class=my>…</h3>
（4）链接外部样式表 。
• 这种方式和嵌入外部样式表的方式相似，也要访 问外部样式表，但是嵌入外部样式表时是将样式 文件直接加载到import语句处，而链接外部样式 表是直接向样式文件索取样式。其语法格式为：
<link type= "text/css" rel=stylesheet href="外部CSS样式表文件名" > • 程序代码见程序清单3-4，运行结果。
定义语法：标记.类名{……} 使用语法：<标记 class=类 名>
ID 选择符 定义语法：#ID名{……} 使用语法：<标记 id=ID名> 定义语法：标记#ID名{……} 使用语法：<标记 id=ID名>
在HTML文件中的所有指 定该类名的该标记都具 有定义的CSS样式
在HTML文件中的所有使 用该ID名的标记都具有 定义的CSS样式 在HTML文件中的所有指 定该ID名的该标记都具 有定义的CSS样式
• CSS中文译为层叠样式表，它是对WEB页面 显示效果进行控制的一套标准。 • 样式就是页面显示的文字、图片等元素的 格式、风格。 • 层叠样式也就是指当页面同一元素在显示 时受到多种样式控制时，将按照一定的层 次顺序处理。 • 可以使用任何的文本编辑软件来编写CSS文 件，编写好的文件以扩展名“.css”保存。
• CSS扩充了HTML标记的属性设定，使得页面 显示效果更加丰富，表现效果更加灵活， 更具有动态性。 • 使用CSS可以将页面样式定义和HTML文件分 离，使得页面开发及维护工作更易进行。 • 可以定义一个CSS文件，而让所有显示样式 相同的页面文件都调用这个CSS文件， 也 可以在一个页面文件中调用多个CSS样式表。
（2）在页面文件中定义内部样式表 。
• 这种方式通过<style>标记来定义样式，其语法格式为： <style type= "text/css"> <!-选择符1, 选择符2, ……{样式属性名1：属性值1； 样式属性名2：属性值2；……} …… --> </style> • 其中使用了HTML注释标记<!--……-->，是为了当有浏 览器不支持CSS语句时，遇到该语句段就会忽略该段内 容。 • 程序代码见程序清单3-2，运行结果。
（3）在页面文件中嵌入外部样式表 。
• 为了让多个页面文件可以共享CSS样式定义，我们可以将 CSS语句段编写为单独的一个CSS文件，然后将它嵌入到 页面文件中。其语法格式为： <style type= "text/css" > <!-@import url("外部CSS样式表文件名"); --> </style> • 其中"外部CSS样式表文件名"是以“.css”为扩展名的C SS文件，如果该文件和当前页面文件处于同一目录，则 直接给出文件名，否则给出其相对路径。 • 程序代码见程序清单3-3，样式表文件代码， 运行结果。
• 将网页的内容结构和格式控制分开。 • 可以精确控制页面的所有元素。 • 页面显示效果更加丰富。 • 支持多种浏览器。
CSS定义的基本语法格式为： 选择符{规则列表}
• 选择符是指要使用该样式的对象（我们将在3.2.3节详细 介绍），它可以是一个或多个HTML标记、ClASS选择符或 ID选择符，如果为多个则使用逗号“,”进行分隔。 • 规则列表是由一个或多个属性定义语句组成的样式规则， 各语句间使用分号“;”进行分隔。 • 属性定义语句的语法格式为：“属性名：属性值”。 • 如：h3{font-family:隶书;color:blue} • h2,h3{font-family:宋体;color:red } • myfont{font-size:20pt} • #myfont{font-size:20pt}
• 3.2.2 CSS注释语句
• 3.2.3 CSS选择符 • 3.2.4 样式表的层叠顺 序
• 3.3.7 CSS列表属性
• 3.3.8 CSS定位属性
• DHTML（Dynamic HTML，动态HTML）开发技 术，主要包括CSS（Cascading Style Shee ts，层叠样式表）、脚本语言、HTML4.0及 其以上版本和支持动态效果的浏览器。