简介CSS技术

（2）在页面文件中定义内部样式表 。
• 这种方式通过<style>标记来定义样式，其语法格式为： <style type= "text/css"> <!-选择符1, 选择符2, ……{样式属性名1：属性值1； 样式属性名2：属性值2；……} …… --> </style> • 其中使用了HTML注释标记<!--……-->，是为了当有浏 览器不支持CSS语句时，遇到该语句段就会忽略该段内 容。 • 程序代码见程序清单3-2，运行结果。
• CSS中文译为层叠样式表，它是对WEB页面 显示效果进行控制的一套标准。 • 样式就是页面显示的文字、图片等元素的 格式、风格。 • 层叠样式也就是指当页面同一元素在显示 时受到多种样式控制时，将按照一定的层 次顺序处理。 • 可以使用任何的文本编辑软件来编写CSS文 件，编写好的文件以扩展名“.css”保存。
Βιβλιοθήκη Baidu
程序代码见程序清单3-13，运行结果
• CSS中有关文本的属性主要包括：
• line-height 用于设置文本的行距，其属性设 置语法为： line-height：normal | 百分比 | 长度值 • letter-spacing 用于设置字符的间距，其属性 设置语法为： letter-spacing：normal | 长度值
• 我们也可以给四个边界单独设置具体数值，其属 性设置语法为：
• • • • margin-top：距离 | auto margin-right：距离 | auto margin-bottom：距离 | auto margin-left：距离 | auto
•
在CSS中可以使用border属性来控制元素的边框宽 度、样式、颜色。其中使用border-width设置边 框宽度，使用border-style设置边框显示样式， 使用border-color设置边框颜色，每一属性都可 以单独设置四个方向的属性值。
• 程序代码见程序清单3-6，运行结果。
• CSS中有关文本的属性主要包括：
• text-indent 用于设置文本的首行缩进值，默认属性值 为0（即不缩进）。其属性设置语法为： text-indent：长度 • text-align 用于设置文本段落的水平对齐方式，其属 性设置语法为： text-align：left | right | center | justify • vertical-align 用于设置文本段落的垂直对齐方式， 其属性设置语法为： vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom
•
•
border-style
可以使用border-top-style、border-right-style、bo rder-bottom-style和border-left-style来设置上、右、 下、左四个方向的边框样式，它们的属性值均可设为： none | dotted | dashed | solid | double | groove | ridge | inset | outset。
• CSS中主要使用margin属性来控制元素边界与网页 其他内容的水平和垂直间距（百分比和数值）。 其属性设置语法为：
• • • • margin：距离（四个方向一样） margin：距离1（上下） 距离2（左右） margin：距离1（上） 距离2（左右） 距离3（下） margin：距离1（上） 距离2（水平右） 距离3（下） 距离4（水平左） 距离可以为具体数字或百分比。
• CSS的基本属性主要包括背景属性、文本属 性、字体属性、边界属性、边框属性、边 距属性、列表属性和定位属性等。
• CSS中有关背景的属性有对背景颜色的设置属性和对 背景图片的设置属性，主要包括 ：
• background-color 用于设置背景颜色，其属性设置语 法为： background-color：颜色 | transparent • background-image 用于设置要加载的背景图片，其属 性设置语法为： background-image：url(背景图片的地址) | none • background-repeat 用于设置背景图片的排列方式，其 属性设置语法为： background-repeat：repeat | repeat-x | repeat-y | no-repeat
（3）在页面文件中嵌入外部样式表 。
• 为了让多个页面文件可以共享CSS样式定义，我们可以将 CSS语句段编写为单独的一个CSS文件，然后将它嵌入到 页面文件中。其语法格式为： <style type= "text/css" > <!-@import url("外部CSS样式表文件名"); --> </style> • 其中"外部CSS样式表文件名"是以“.css”为扩展名的C SS文件，如果该文件和当前页面文件处于同一目录，则 直接给出文件名，否则给出其相对路径。 • 程序代码见程序清单3-3，样式表文件代码， 运行结果。
第3章 章
CSS技术 技术
• 了解CSS基本概念 • 了解CSS基本语法 • 了解CSS常用属性描述方法
• DHTML（Dynamic HTML，动态HTML）开发技 术，主要包括CSS（Cascading Style Shee ts，层叠样式表）、脚本语言、HTML4.0及 其以上版本和支持动态效果的浏览器。
• 程序代码见程序清单3-7，运行结果。
• CSS中有关字体的属性主要包括：
• font-family 用于设置文字的字体，其属性设置语法为： font-family：字体1，字体2，…… • font-style 用于设置文字的效果，其属性设置语法为： font-style：normal | italic | oblique • font-size 用于设置文字的大小，其属性设置语法为： font-size：长度 | 关键字 • font-weight 用于设置字体的粗细，其属性设置语法为： font-weight：normal|bold|bolder|lighter| 100~900
• 在页面文件中对CSS的定义有以下几种方式：
（1）直接在页面文件中使用HTML标记的style属性。 • 这种方式可以直接在HTML标记中定义该标记的显示样式， 并且该样式定义只能用于这个标记。其语法格式为： <标记名 style=“样式属性名1：属性值1； 样式属性名2：属性值2；……"> • 如： <p style= "font-family:宋体; color:red; font-size: 10pt"> • 程序代码见程序清单3-1，运行结果。
•
•
CSS中有关字体的属性主要包括：
font-variant 用于设置文字的变形属性，其属性设置 语法为： font-variant：normal | small-caps • text-decoration 用于设置文字的显示效果，其属性 设置语法为： text-decoration：underline | overline | line-through| blink | none • text-transform 用于设置文字的转换，其属性设置语 法为： text-transform：capitalize | uppercase | lowercase | none • 程序代码见程序清单3-8，运行结果。
（4）链接外部样式表 。
• 这种方式和嵌入外部样式表的方式相似，也要访 问外部样式表，但是嵌入外部样式表时是将样式 文件直接加载到import语句处，而链接外部样式 表是直接向样式文件索取样式。其语法格式为：
<link type= "text/css" rel=stylesheet href="外部CSS样式表文件名" > • 程序代码见程序清单3-4，运行结果。
•
•
border-width
如：border-width: thin（上） medium（右） thick （下） 10px（左）;
•
可以使用border-top-width、border-right-width、bo rder-bottom-width和border-left-width来设置上、右、 下、左四个方向的边框宽度，它们的属性值均可设为： thin | medium | thick | 长度。
• CSS的注释语句是位于“/*”和“*/”标记 之间的语句内容。
• 程序代码见程序清单3-2 。
• CSS选择符主要有HTML标记、CLASS选择符 和ID选择符三种。
表3-1 CSS选字符的定义和使用
选择符 HTML 标记 CLASS 选择符 语法格式 定义语法：标记{……} 使用语法：<标记> 定义语法：*.类名{……}或 .类名{……} 使用语法：<标记 class=类 名> 定义语法：标记.类名{……} 使用语法：<标记 class=类 名> ID 选择符 定义语法：#ID名{……} 使用语法：<标记 id=ID名> 定义语法：标记#ID名{……} 使用语法：<标记 id=ID名> 样式使用范围说明 在HTML文件中，所有该 标记包含的文本都具有 定义的CSS样式 在HTML文件中的所有使 用该类名的标记都具有 定义的CSS样式 在HTML文件中的所有指 定该类名的该标记都具 有定义的CSS样式 在HTML文件中的所有使 用该ID名的标记都具有 定义的CSS样式 在HTML文件中的所有指 定该ID名的该标记都具 有定义的CSS样式 示例 h3{font-family:隶书} …… <h3>…</h3> .my{font-size:20pt} …… <h3 class=my>…</h3> h3.my{font-size:20pt} …… <h3 class=my>…</h3> #my{font-size:20pt} …… <h3 id=my>…</h3> h3#my{font-size:20pt} …… <h3 id=my>…</h3>
• 由于HTML标记在使用中常常有嵌套情况出现， 那么对于控制同一页面内容的嵌套标记，究竟哪 一个样式起作用？
先看一个例子。程序代码见程序清单3-5，运行结果 • （1）直接在页面文件中使用HTML标记的style属性定义 的样式优先级最高； • （2）其他的样式定义按照在页面文件中出现的顺序，越 后出现的优先级越高； • （3）ID选择符的优先级高于CLASS选择符 • （4）没有被定义样式控制的内容将使用浏览器的默认样 式
• CSS扩充了HTML标记的属性设定，使得页面 显示效果更加丰富，表现效果更加灵活， 更具有动态性。 • 使用CSS可以将页面样式定义和HTML文件分 离，使得页面开发及维护工作更易进行。 • 可以定义一个CSS文件，而让所有显示样式 相同的页面文件都调用这个CSS文件， 也 可以在一个页面文件中调用多个CSS样式表。
• 将网页的内容结构和格式控制分开。 • 可以精确控制页面的所有元素。 • 页面显示效果更加丰富。 • 支持多种浏览器。
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}
• CSS中有关背景的属性有对背景颜色的设置属 性和对背景图片的设置属性，主要包括 ：
• background-attachment 用于设置移动滚动条 时背景图片位置是否固定，其属性设置语法为： background-attachment：scroll | fixed • background-position 用于设置背景图片的插 入位置，其属性设置为： background-position：x位置值 y位置值 （可以为百分比，数值，关键字）