通过本章学习，应该掌握以下内容：
1,什么是 CSS
2,CSS样式和常用的 selector
3,在网页中使用 CSS的方法
4,CSS的各种属性第 11章 在网页中使用 CSS样式
11.1 CSS简介
CSS（ Cascading Style Sheet,层叠样式表 ）
技术是一种格式化网页的标准方式,它通过设置 CSS
属性使网页元素获得各种不同效果 。 CSS不是一种程序设计语言,而只是一种用于网页排版的标识性语言,
是对现有 HTML语言功能的补充和扩展 。
CSS的主要功能是通过对 HTML选择器进行设定,
来实现对网页中的字体,字号,颜色,背景,图像记其他元素的控制,使网页能够完全按照设计者的要求来显示 。
CSS的定义由三部分构成：选择符 selector,属性 property和属性值 value。 其基本格式如下：
selector{property l,value l ； property 2,
value 2； …… }
其中 selector（ 选择符 ） 表示需要应用样式的内容,
property表示由 CSS标准定义的样式属性,value表示样式属性的值 。
11.2 CSS样式
11.2.1 CSS样式表组成
11.2.2 几种常用的 selector
HTML标记符是最典型的 selector类型,网页设计者可以为某个或某些具体的 HTML元素应用样式定义 。 如：
BODY{color,black}
如果属性的值是多个单词组成的,必须在值前加上双引号 。 如果需要对一个 selector指定多个属性时,应使用分号将所有的属性和值分开 。
1,HTML标记符 selector
如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将 selector指定为具有上下文关系的 HTML标记符 。 例如,如果只想使位于 H1标记符内的 A标记符具有特定的属性,则应使用以下格式：
H1 A{color,blue}
注意 H1和 A之间以空格分隔 。
2,具有上下文关系的 HTML标记符 selector
可以使用类 （ class） 来为单一 HTML标记符创建多个样式 。 要想将一个类包括到样式定义中,可将一个句点和一个类名称添加到 selector后,如下所示：
selector.classname {property,value； …… }
可以使用任何名称命名类,但通常使用具体含义的名称 。
3,用户定义的类 selector
4,用户定义的 ID selector
当网页设计者想在整个网页或几个页面上多处以相同样式显示标记符时,除了使用类定义一个通用类样式以外,还可以使用 ID定义样式 。 ID选择符的应用和类选择符类似,只要把 CLASS换成 ID即可 。
要将一个 ID样式包括在样式定义中,应用一个 #号作为 ID名称的前缀,如下所示：
#IDname{property,value…… }
定义了 ID样式后,需要在引用该样式的标记符内使用 id属性 。
可以单独对某种元素包含关系定义的样式表,元素
1里包含元素 2,这种方式只对在元素 1里的元素 2定义,
对单独的元素 1或元素 2无定义,例如：
TABLE A{font-size,10px}
使用上规则后,在表格内的链接改变了样式,文字大小为 10像素,而表格外的链接的文字仍为默认大小 。
5,包含 selector
层叠性,即继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素 。
不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级 。 ID选择符,类选择符和
HTML标记选择符,因为 ID选择符是最后加在元素上的,所以优先级最高,其次是类选择符 。 如果想超越这 三 者 之 间 的 关 系,可 以 在 定 义 样 式 时 加上 !important,来提升样式表的优先权 。
6,样式表的层叠性 selector
7,虚类 selector
虚类可以看作是一种特殊的类选择符,是能被支持
CSS的浏览器自动识别的特殊选择符 。 它最大的用处就是可以在不同状态下定义不同的样式超链接效果 。
将虚类和类组合起来用,就可以在同一个页面中做几组不同类型的链接效果了 。 所谓不同类型超链接,
是指访问过的 （ A:visited ）,未 访 问 过 的
（ A:link）,激活的 （ A:active） 以及鼠标指针悬停于其上 （ A:hover） 的这 4种状态的超链接 。
8,注释 selector
用户可以在 CSS中插入注释来说明用户代码的意思,
注释有利于用户或别人以后编辑和更改代码时理解代码的含义 。 在浏览器中,注释是不显示的 。 与 HTML注释一样,CSS注释也以,/*”开头,以,*/”结尾 。
11.3 在网页中使用 CSS
11.3.1 在标记符中直接嵌套样式信息在标记符中直接嵌套样式信息又称为,局部引用,,即将样式直接嵌套在 HTML标记里使用的 。
用这种方法,可以很简单的对某个元素单独定义样式 。
使用 style属性可以在 HTML标记符中直接嵌入样式定义,如下所示：
<标记符 style,"property l,value l； property 2：
value 2； …… ">
如果能将同类的样式都统一定义,然后再具体应用于网页中的元素,那么就能体现出 CSS的优越性了 。
实际上,这正是 CSS应用于网页的最常用方式,即在
HEAD标记符内使用 STYLE标记符,然后在 STYLE
标记符中定义样式 。 这种应用方式又称,内部引用,。
定义样式的方式为：
selector {property l,value l； property 2,value
2； …… }
其中,selector表示样式作用的对象,property和
value则表示相应 CSS属性和值的配对 。
11.3.2 在 STYLE标记符中定义样式信息
11.3.3 引用外部样式表中的样式信息在 STYLE标记符中定义样式对于单独网页的格式设置和维护很有效,但如果在一个大网站中,为每个页面都定义类似的样式,显然又是效率不高的,
这时最好的办法就是将重复在多个网页中使用的样式放在外部样式表文件中,然后通过链接的方式引用其中的样式 。 链接式样式的优点很明显,网页设计者可以在一个链接的 CSS文件上作修改,然后所有引用它的网页都会自动更新 。
引用链接外部样式表中的样式信息又称为,外部引用,。 外部引用又可以分为链入外部样式表和导入外部样式表两类 。
链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用 LINK标记符链接到这个样式表文件,这个 LINK标记符必须放到页面的 HEAD区内 。
导入外部样式表是指在内部样式表的 STYLE里导入一个外部样式表,导入时用 @import。
导入外部样式表输入方式比链入外部样式表更有优势,实质上它相当于存在内部样式表中 。
11.4 CSS属性字体属性用于控制网页中的文本的字符显示方式,例如控制文字的大小,粗细以及使用的字体等 。
CSS中的字体属性包括字体族科 （ font-family）,
字 体 风 格 （ font-style ）,字体变形 （ font-
variant）,字体加粗 （ font-weight）,字体大小
（ font-size） 五个属性 。 其中字体族科和字体大小属性是比较常用的 。
11.4.1 字体属性
1,字体族科属性 （ font-family）
字体族科属性相当于 HTML中 FONT标记符的 face
属性,用于设定文字的字体,当所设定的字体在用户端没有时会用浏览器默认的字体代替 。
该样式允许指定多种字体供选择,用逗号进行分隔即可 。 在客户端会根据字体指定的优先级 （ 先后顺序 ）
寻找字体予以显示 。 比如：
font-family：华文行楷,楷体 -GB2312,宋体
2,字体风格属性 （ font-style）
字体风格属性的值有三种：普通 （ normal）,斜体 （ italic） 和倾斜 （ oblique）,默认值为 normal。
3,字体变形属性 （ font-variant）
字体变形属性有普通 （ normal） 和小型大写字母
（ small-caps） 两个值,默认值为 normal。 当使用
small-caps属性时,文字一律转换为大写字母,并且都会以一种大小介于普通小写字母和大写字母之间的字体显示 。
字体加粗属性用于设定字体的粗细,跟 HTML中的 B标记符效果相似 。 它的取值可以是以下值中的一个,normal,bold,bolder,lighter,100,200,300、
400,500,600,700,800,900,默认值为 normal，
表示正常粗细； bold表示粗体 。 也可以使用数值,范围为 100至 900,对应从最细到最粗 。 normal相当于
400,bold相当于 700。 如果使用 bolder或 lighter,则表示相对于上一级元素中的字体更粗或更细 。
4,字体加粗属性 （ font-weight）
字体大小属性用来定义字体的大小 。
可以使用的值包括绝对大小,相对大小,长度,
百分比,其中使用长度时单位又分为绝对单位 [磅
（ pt）,毫米 （ mm）,厘米 （ cm）,帕 （ pc）,英寸 （ in） ]和相对单位 [像素 （ px）,em]。
5,字体大小属性 （ font-size）
文字间隔属性定义一个附加在文字 （ 单词 ） 之间的间隔数量 。 该值必须符合长度格式,允许使用负值 。
需要特别说明的是,该属性是针对英文单词的间隔,而不是中文的文字间隔,中文的文字间隔应该用下面讲到的 letter-spacing。 同时在中文版的
IE浏览器中也不支持该属性 。
11.4.2 文本属性
1,文字间隔属性 (word-spacing)
字母间隔属性定义一个附加在字符之间的间隔数量 （ 间距 ） 。 它的取值可以是 normal或具体的长度值 （ 该值必须符合长度格式 ）,也可以是负值 。 默认值为 normal,表示浏览器根据最佳状态调整字符间距 。 一个设为 0的值会阻止显示文字时的间隔调整 。
2,字母间隔属性 (1etter-spacing)
纵向排列属性可以用来定义一个内部元素的纵向位置,相对于它的上级元素或者相对于元素行 。
该值可以是一个相对于元素行高属性的百分比,
它会在上级基线上增高元素基线的指定数量 。 允许使用负值,也可以是一个关键字 。 该属性对于图像设置特别有用 。
3,纵向排列属性 (vertical-align)
指定了所选元素的对齐方式 （ 类似于 HTML标记符的 align 属性 ）,取 值可以 是,left,right,
center、,分别表示左对齐,右对齐,居中对齐和两端对齐 。 此属性的默认值依浏览器的类型而定 。 若浏览器不支持 justify属性 。 则使用左对齐或者右对齐代替 。
4,文本排列属性 (text-align)
文本缩进属性可以应用于块级元素 （ P,H1等 ）,
以定义该块级元素第一行可以接受的缩进数量 。 该值必须是一个长度或者百分比 。 若为百分比则视上级元素的宽度而定 。 该属性常用于段落的缩进 。 此属性的默认值是 0,表示无缩进 。
5,文本缩进属性 (text-indent)
文字修饰属性可以对特定选项的文本进行修饰,
它 的取值 为,none,underline,overline,line-
through,blink,默认值为 none,表示不加任何修饰 。 underline表示添加下划线； overline表示添加上划线； line-through表示添加删除线； blink表示添加闪烁效果 。
另外 IE浏览器并不支持文字修饰属性值 blink（ 闪烁 ） 。
6,文字修饰属性 （ text-decoration）
行高属性决定了相邻行之间的间距 。 其取值可以是数字,长度或百分比,默认值是 normal。 当以数字指定值时,行高就是当前字体高度与该数字相乘的倍数 。 如果指定具体的长度值,则行高为该值 。 如果用百分比指定行高,则行高为当前字体高度与该百分比相乘 。 该属性不允许使用负值 。
7,行高属性 (line-height)
文本转换属性用于转换文本,取值为,capitalize、
uppercase,lowercase,none,默认值是 none表示使用原始值 。 capitalize值表示所选元素中文本的每个单词的首字母以大写显示； uppercase值表示所有的文本都以大写显示； lowercase值表示所有文本都以小写显示 。
8,文本转换属性 (text-transform)
background属性是一个组合属性,可用于同时设置 background- color,background- image,
back2round-attachment,background-position,
background-repeat等背景属性 。
11.4.3 颜色与背景属性
1,background属性用于设置 HTML元素的背景颜色 。 此属性的默认值是 transparent,表示没有任何颜色,此时上级元素的背景可以在子元素中显示出来 。
2,background-color属性用于设置 HTML元素的背景图案,取值为 url或
none。 默认值为 none,即没有背景图案 。 该属性相当于 HTML中 BODY标签的 background属性,只是它可以定义更多元素的背景图像 。
3,background-image属性用于控制背景图像是否随内容一起滚动,取值为
scroll,fixed。 默认值为 scroll,表示背景图案随着内容一起滚动； fixed表示背景图案静止,而内容可以滚动 。
4,background-attachment属性用于指定背景图案相对于关联区域左上角的位置 。
该属性通常指定由空格隔开的两个值 。
5,background-position属性表示当使用背景图案时,背景图案是否重复显示 。 取值可以是,repeat表示在水平方向和垂直方向都重复,即像铺地板一样将背景图案平铺；
repeat-x表示在水平方向上平铺； repeat-y表示在垂直方向上平铺； no-repeat表示不平铺,即只显示一幅背景图案 。
6,background-repeat属性所有网页上的元素都有边框,只是大部分缺省没有显示出来 。 CSS边框属性设置包括三项：边框颜色 （ color）,边框样式 （ style） 和边框宽度
（ width）,而边框又包括四个方向：上 （ top）,
下 （ bottom）,左 （ 1eft） 和右 （ right） 。 将边框设置和方向组合起来,则构成了多种属性 。 如：
border-bottom,border-bottom-color,border-
bottom-style,border-bottom-width,border-right-
color,border-right-style,border-right-width等等 。
11.4.4 布局属性
1,边框属性
CSS边界属性包括边界 margin,下边界 margin-
bottom,左边界 margin-left,右边界 margin- right
以及上边界 margin-top。
margin-left,margin-fight,margin-top 和
margin-bottom属性可以分别用来设置左,右,上,
下边界的宽度,它们的取值可以是长度,百分比或
auto。
margin属性可以同时指定上,右,下,左 （ 以此顺序 ） 边界的宽度 。
2,边界属性
CSS填充属性包括填充 padding,左填充 padding-
left,右填充 padding-right,上填充 padding-top以及下填充 padding-bottom。
padding-left,padding-right,padding-top 和
padding-bottom这四个属性用于设置左,右,上,下填充区的宽度,取值可以是长度和百分数 。
padding属性用于同时指定上,右,下,左四个方向填充的宽度 。
3,填充属性
CSS浮动属性包括 float和 clear。 float属性可以将元素的内容浮动到页面左边缘或右边缘,该属性的取值为,none,left,right,默认值为 none。 clear属性指定了元素是否允许浮动元素在它旁边,取值可以是：
none,left,right,both,默认值为 none,表示允许浮动元素在其旁边； left表示跳过左边的浮动元素；
right表示跳过右边的浮动元素,both表示跳过所有的浮动元素 。
4,浮动属性
CSS定位属性包括 position,top,bottom,left、
right和 z-index,宽,高属性包括 width和 height。
position属性用来规定元素怎样在 Web页上定位,
它的取值为,static（ 默认值 ）,relative或 absolute。
top和 left属性用来规定某个元素与其他元素之间的距离 。
width和 height属性可以控制元素的宽度和高度,
此时 position属性必须指定为 absolute。
11.4.5 定位和显示属性
1,定位属性和宽高属性在 CSS中,有两个属性可以控制元素的显示和隐藏,即 display属性和 visibility属性 。
display属性确定一个元素是否应绘制在页面上,
它的取值有多个,但在一般的浏览器中,只有一个
none值可以使用 。
visibility属性有时也被分类为定位属性,用来控制定位的元素是否可见,取值包括,visible（ 可见 ）,
hidden（ 隐藏 ） 和 inherit（ 继承 ）,默认值为 inherit。
2,显示属性
CSS的鼠标样式属性用于设置鼠标移到元素上时的鼠标形状 。 通常情况下,鼠标呈指向左上方的箭头,
而当鼠标移到超链接上时呈手的形状 。 有了鼠标样式属性,用户就可以随意地设定鼠标的形状 。
CSS的鼠标样式是通过 cursor样式表属性定义的,
格式为：
cursor：属性值
11.4.6 鼠标样式属性列表样式属性用于设置页面中的列表格式 。 CSS中的列表样式属性包括,list-style,list-style-type,list-
style-image以及 list-style-position。
list-style-type属性用于设置项目符号和编号样式,
取值为,disc（ 默认值,实心黑点 ）,circle（ 空心圆圈 ）,square（ 方块 ）,decimal（ 十进制数 1,2,3
等 ）,lower-roman（ 小罗马数字 ）,upper-roman
（ 大罗马数字 ）,lower-alpha（ 小写字母 ）,upper-
-alpha（ 大写字母 ） 和 none（ 无 ） 。
11.4.7 列表样式属性滤镜 （ filter） 是 CSS的一种扩充 。 使用这种技术只用几句代码就可以把类似于 Photoshop中的滤镜效果添加到图片,文本等 HTML元素上 。
filter样式表的属性定义为：
filter：过滤器名称 （ 参数 ）
11.4.8 CSS滤镜选择,窗口,|,CSS样式,命令可以打开,CSS
样式,面板,如图所示 。
11.5 在 Dreamweaver MX中 使用 CSS样式
11.5.1 CSS样式面板示范演示
11.5.2 新建一个 CSS样式表示范演示
11.5.3 重新定义 HTML标签示范演示
11.5.4 设置页面背景颜色示范演示
11.5.5 设置链接颜色
CSS样式建好之后,接下来就是要把它应用到文档中去 。 对于自定义的样式,需要将新样式应用到相应的对象上,而重新定义的 HTML标签样式是不需要应用的,只要选择相应的标签样式就能自动应用新样式 。
应用 CSS样式的方法如下：
将插入点移到需要套用样式的文本段落中,单击
CSS样式面板上的 CSS样式,则插入点所在的段落的文字就应用了新样式 。
11.5.6 应用 CSS样式
11.5.7 修改样式若要修改 CSS样式,首先打开 CSS样式面板,编辑样式,视窗,这时所有的 CSS样式 （ 包括自定义的
CSS样式和重新定义 HTML标签 ） 都出现在面板上 。
然后采用如下两种方法之一,打开样式定义对话框进行编辑修改 。
（ 1） 在 CSS样式面板上双击该样式名 。
（ 2） 选中要修改的 CSS样式,单击 CSS样式面板右下角的编辑样式按钮 。
链接一个外部样式表的操作步骤如下：
（ 1） 选择,窗口,|“CSS样式,命令,打开 CSS样式面板 。
（ 2） 单击该面板上的,附加样式表,按钮,或单击该面板顶部右边的三角按钮,从弹出的菜单中选择
,附加样式表,命令,出现,链接外部样式表,对话框 。
（ 3） 在该对话框中选择,添加为,,链接,,并在
,文件 /URL”文本框中输入外部样式表文件名,或单击,浏览,按钮选择外部样式表文件 （ 外部样式表文件必须以,css为扩展名 ）,单击,确定,按钮 。
11.5.8 链接外部 CSS样式表
E N D
1,什么是 CSS
2,CSS样式和常用的 selector
3,在网页中使用 CSS的方法
4,CSS的各种属性第 11章 在网页中使用 CSS样式
11.1 CSS简介
CSS（ Cascading Style Sheet,层叠样式表 ）
技术是一种格式化网页的标准方式,它通过设置 CSS
属性使网页元素获得各种不同效果 。 CSS不是一种程序设计语言,而只是一种用于网页排版的标识性语言,
是对现有 HTML语言功能的补充和扩展 。
CSS的主要功能是通过对 HTML选择器进行设定,
来实现对网页中的字体,字号,颜色,背景,图像记其他元素的控制,使网页能够完全按照设计者的要求来显示 。
CSS的定义由三部分构成：选择符 selector,属性 property和属性值 value。 其基本格式如下：
selector{property l,value l ； property 2,
value 2； …… }
其中 selector（ 选择符 ） 表示需要应用样式的内容,
property表示由 CSS标准定义的样式属性,value表示样式属性的值 。
11.2 CSS样式
11.2.1 CSS样式表组成
11.2.2 几种常用的 selector
HTML标记符是最典型的 selector类型,网页设计者可以为某个或某些具体的 HTML元素应用样式定义 。 如：
BODY{color,black}
如果属性的值是多个单词组成的,必须在值前加上双引号 。 如果需要对一个 selector指定多个属性时,应使用分号将所有的属性和值分开 。
1,HTML标记符 selector
如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将 selector指定为具有上下文关系的 HTML标记符 。 例如,如果只想使位于 H1标记符内的 A标记符具有特定的属性,则应使用以下格式：
H1 A{color,blue}
注意 H1和 A之间以空格分隔 。
2,具有上下文关系的 HTML标记符 selector
可以使用类 （ class） 来为单一 HTML标记符创建多个样式 。 要想将一个类包括到样式定义中,可将一个句点和一个类名称添加到 selector后,如下所示：
selector.classname {property,value； …… }
可以使用任何名称命名类,但通常使用具体含义的名称 。
3,用户定义的类 selector
4,用户定义的 ID selector
当网页设计者想在整个网页或几个页面上多处以相同样式显示标记符时,除了使用类定义一个通用类样式以外,还可以使用 ID定义样式 。 ID选择符的应用和类选择符类似,只要把 CLASS换成 ID即可 。
要将一个 ID样式包括在样式定义中,应用一个 #号作为 ID名称的前缀,如下所示：
#IDname{property,value…… }
定义了 ID样式后,需要在引用该样式的标记符内使用 id属性 。
可以单独对某种元素包含关系定义的样式表,元素
1里包含元素 2,这种方式只对在元素 1里的元素 2定义,
对单独的元素 1或元素 2无定义,例如：
TABLE A{font-size,10px}
使用上规则后,在表格内的链接改变了样式,文字大小为 10像素,而表格外的链接的文字仍为默认大小 。
5,包含 selector
层叠性,即继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素 。
不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级 。 ID选择符,类选择符和
HTML标记选择符,因为 ID选择符是最后加在元素上的,所以优先级最高,其次是类选择符 。 如果想超越这 三 者 之 间 的 关 系,可 以 在 定 义 样 式 时 加上 !important,来提升样式表的优先权 。
6,样式表的层叠性 selector
7,虚类 selector
虚类可以看作是一种特殊的类选择符,是能被支持
CSS的浏览器自动识别的特殊选择符 。 它最大的用处就是可以在不同状态下定义不同的样式超链接效果 。
将虚类和类组合起来用,就可以在同一个页面中做几组不同类型的链接效果了 。 所谓不同类型超链接,
是指访问过的 （ A:visited ）,未 访 问 过 的
（ A:link）,激活的 （ A:active） 以及鼠标指针悬停于其上 （ A:hover） 的这 4种状态的超链接 。
8,注释 selector
用户可以在 CSS中插入注释来说明用户代码的意思,
注释有利于用户或别人以后编辑和更改代码时理解代码的含义 。 在浏览器中,注释是不显示的 。 与 HTML注释一样,CSS注释也以,/*”开头,以,*/”结尾 。
11.3 在网页中使用 CSS
11.3.1 在标记符中直接嵌套样式信息在标记符中直接嵌套样式信息又称为,局部引用,,即将样式直接嵌套在 HTML标记里使用的 。
用这种方法,可以很简单的对某个元素单独定义样式 。
使用 style属性可以在 HTML标记符中直接嵌入样式定义,如下所示：
<标记符 style,"property l,value l； property 2：
value 2； …… ">
如果能将同类的样式都统一定义,然后再具体应用于网页中的元素,那么就能体现出 CSS的优越性了 。
实际上,这正是 CSS应用于网页的最常用方式,即在
HEAD标记符内使用 STYLE标记符,然后在 STYLE
标记符中定义样式 。 这种应用方式又称,内部引用,。
定义样式的方式为：
selector {property l,value l； property 2,value
2； …… }
其中,selector表示样式作用的对象,property和
value则表示相应 CSS属性和值的配对 。
11.3.2 在 STYLE标记符中定义样式信息
11.3.3 引用外部样式表中的样式信息在 STYLE标记符中定义样式对于单独网页的格式设置和维护很有效,但如果在一个大网站中,为每个页面都定义类似的样式,显然又是效率不高的,
这时最好的办法就是将重复在多个网页中使用的样式放在外部样式表文件中,然后通过链接的方式引用其中的样式 。 链接式样式的优点很明显,网页设计者可以在一个链接的 CSS文件上作修改,然后所有引用它的网页都会自动更新 。
引用链接外部样式表中的样式信息又称为,外部引用,。 外部引用又可以分为链入外部样式表和导入外部样式表两类 。
链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用 LINK标记符链接到这个样式表文件,这个 LINK标记符必须放到页面的 HEAD区内 。
导入外部样式表是指在内部样式表的 STYLE里导入一个外部样式表,导入时用 @import。
导入外部样式表输入方式比链入外部样式表更有优势,实质上它相当于存在内部样式表中 。
11.4 CSS属性字体属性用于控制网页中的文本的字符显示方式,例如控制文字的大小,粗细以及使用的字体等 。
CSS中的字体属性包括字体族科 （ font-family）,
字 体 风 格 （ font-style ）,字体变形 （ font-
variant）,字体加粗 （ font-weight）,字体大小
（ font-size） 五个属性 。 其中字体族科和字体大小属性是比较常用的 。
11.4.1 字体属性
1,字体族科属性 （ font-family）
字体族科属性相当于 HTML中 FONT标记符的 face
属性,用于设定文字的字体,当所设定的字体在用户端没有时会用浏览器默认的字体代替 。
该样式允许指定多种字体供选择,用逗号进行分隔即可 。 在客户端会根据字体指定的优先级 （ 先后顺序 ）
寻找字体予以显示 。 比如：
font-family：华文行楷,楷体 -GB2312,宋体
2,字体风格属性 （ font-style）
字体风格属性的值有三种：普通 （ normal）,斜体 （ italic） 和倾斜 （ oblique）,默认值为 normal。
3,字体变形属性 （ font-variant）
字体变形属性有普通 （ normal） 和小型大写字母
（ small-caps） 两个值,默认值为 normal。 当使用
small-caps属性时,文字一律转换为大写字母,并且都会以一种大小介于普通小写字母和大写字母之间的字体显示 。
字体加粗属性用于设定字体的粗细,跟 HTML中的 B标记符效果相似 。 它的取值可以是以下值中的一个,normal,bold,bolder,lighter,100,200,300、
400,500,600,700,800,900,默认值为 normal，
表示正常粗细； bold表示粗体 。 也可以使用数值,范围为 100至 900,对应从最细到最粗 。 normal相当于
400,bold相当于 700。 如果使用 bolder或 lighter,则表示相对于上一级元素中的字体更粗或更细 。
4,字体加粗属性 （ font-weight）
字体大小属性用来定义字体的大小 。
可以使用的值包括绝对大小,相对大小,长度,
百分比,其中使用长度时单位又分为绝对单位 [磅
（ pt）,毫米 （ mm）,厘米 （ cm）,帕 （ pc）,英寸 （ in） ]和相对单位 [像素 （ px）,em]。
5,字体大小属性 （ font-size）
文字间隔属性定义一个附加在文字 （ 单词 ） 之间的间隔数量 。 该值必须符合长度格式,允许使用负值 。
需要特别说明的是,该属性是针对英文单词的间隔,而不是中文的文字间隔,中文的文字间隔应该用下面讲到的 letter-spacing。 同时在中文版的
IE浏览器中也不支持该属性 。
11.4.2 文本属性
1,文字间隔属性 (word-spacing)
字母间隔属性定义一个附加在字符之间的间隔数量 （ 间距 ） 。 它的取值可以是 normal或具体的长度值 （ 该值必须符合长度格式 ）,也可以是负值 。 默认值为 normal,表示浏览器根据最佳状态调整字符间距 。 一个设为 0的值会阻止显示文字时的间隔调整 。
2,字母间隔属性 (1etter-spacing)
纵向排列属性可以用来定义一个内部元素的纵向位置,相对于它的上级元素或者相对于元素行 。
该值可以是一个相对于元素行高属性的百分比,
它会在上级基线上增高元素基线的指定数量 。 允许使用负值,也可以是一个关键字 。 该属性对于图像设置特别有用 。
3,纵向排列属性 (vertical-align)
指定了所选元素的对齐方式 （ 类似于 HTML标记符的 align 属性 ）,取 值可以 是,left,right,
center、,分别表示左对齐,右对齐,居中对齐和两端对齐 。 此属性的默认值依浏览器的类型而定 。 若浏览器不支持 justify属性 。 则使用左对齐或者右对齐代替 。
4,文本排列属性 (text-align)
文本缩进属性可以应用于块级元素 （ P,H1等 ）,
以定义该块级元素第一行可以接受的缩进数量 。 该值必须是一个长度或者百分比 。 若为百分比则视上级元素的宽度而定 。 该属性常用于段落的缩进 。 此属性的默认值是 0,表示无缩进 。
5,文本缩进属性 (text-indent)
文字修饰属性可以对特定选项的文本进行修饰,
它 的取值 为,none,underline,overline,line-
through,blink,默认值为 none,表示不加任何修饰 。 underline表示添加下划线； overline表示添加上划线； line-through表示添加删除线； blink表示添加闪烁效果 。
另外 IE浏览器并不支持文字修饰属性值 blink（ 闪烁 ） 。
6,文字修饰属性 （ text-decoration）
行高属性决定了相邻行之间的间距 。 其取值可以是数字,长度或百分比,默认值是 normal。 当以数字指定值时,行高就是当前字体高度与该数字相乘的倍数 。 如果指定具体的长度值,则行高为该值 。 如果用百分比指定行高,则行高为当前字体高度与该百分比相乘 。 该属性不允许使用负值 。
7,行高属性 (line-height)
文本转换属性用于转换文本,取值为,capitalize、
uppercase,lowercase,none,默认值是 none表示使用原始值 。 capitalize值表示所选元素中文本的每个单词的首字母以大写显示； uppercase值表示所有的文本都以大写显示； lowercase值表示所有文本都以小写显示 。
8,文本转换属性 (text-transform)
background属性是一个组合属性,可用于同时设置 background- color,background- image,
back2round-attachment,background-position,
background-repeat等背景属性 。
11.4.3 颜色与背景属性
1,background属性用于设置 HTML元素的背景颜色 。 此属性的默认值是 transparent,表示没有任何颜色,此时上级元素的背景可以在子元素中显示出来 。
2,background-color属性用于设置 HTML元素的背景图案,取值为 url或
none。 默认值为 none,即没有背景图案 。 该属性相当于 HTML中 BODY标签的 background属性,只是它可以定义更多元素的背景图像 。
3,background-image属性用于控制背景图像是否随内容一起滚动,取值为
scroll,fixed。 默认值为 scroll,表示背景图案随着内容一起滚动； fixed表示背景图案静止,而内容可以滚动 。
4,background-attachment属性用于指定背景图案相对于关联区域左上角的位置 。
该属性通常指定由空格隔开的两个值 。
5,background-position属性表示当使用背景图案时,背景图案是否重复显示 。 取值可以是,repeat表示在水平方向和垂直方向都重复,即像铺地板一样将背景图案平铺；
repeat-x表示在水平方向上平铺； repeat-y表示在垂直方向上平铺； no-repeat表示不平铺,即只显示一幅背景图案 。
6,background-repeat属性所有网页上的元素都有边框,只是大部分缺省没有显示出来 。 CSS边框属性设置包括三项：边框颜色 （ color）,边框样式 （ style） 和边框宽度
（ width）,而边框又包括四个方向：上 （ top）,
下 （ bottom）,左 （ 1eft） 和右 （ right） 。 将边框设置和方向组合起来,则构成了多种属性 。 如：
border-bottom,border-bottom-color,border-
bottom-style,border-bottom-width,border-right-
color,border-right-style,border-right-width等等 。
11.4.4 布局属性
1,边框属性
CSS边界属性包括边界 margin,下边界 margin-
bottom,左边界 margin-left,右边界 margin- right
以及上边界 margin-top。
margin-left,margin-fight,margin-top 和
margin-bottom属性可以分别用来设置左,右,上,
下边界的宽度,它们的取值可以是长度,百分比或
auto。
margin属性可以同时指定上,右,下,左 （ 以此顺序 ） 边界的宽度 。
2,边界属性
CSS填充属性包括填充 padding,左填充 padding-
left,右填充 padding-right,上填充 padding-top以及下填充 padding-bottom。
padding-left,padding-right,padding-top 和
padding-bottom这四个属性用于设置左,右,上,下填充区的宽度,取值可以是长度和百分数 。
padding属性用于同时指定上,右,下,左四个方向填充的宽度 。
3,填充属性
CSS浮动属性包括 float和 clear。 float属性可以将元素的内容浮动到页面左边缘或右边缘,该属性的取值为,none,left,right,默认值为 none。 clear属性指定了元素是否允许浮动元素在它旁边,取值可以是：
none,left,right,both,默认值为 none,表示允许浮动元素在其旁边； left表示跳过左边的浮动元素；
right表示跳过右边的浮动元素,both表示跳过所有的浮动元素 。
4,浮动属性
CSS定位属性包括 position,top,bottom,left、
right和 z-index,宽,高属性包括 width和 height。
position属性用来规定元素怎样在 Web页上定位,
它的取值为,static（ 默认值 ）,relative或 absolute。
top和 left属性用来规定某个元素与其他元素之间的距离 。
width和 height属性可以控制元素的宽度和高度,
此时 position属性必须指定为 absolute。
11.4.5 定位和显示属性
1,定位属性和宽高属性在 CSS中,有两个属性可以控制元素的显示和隐藏,即 display属性和 visibility属性 。
display属性确定一个元素是否应绘制在页面上,
它的取值有多个,但在一般的浏览器中,只有一个
none值可以使用 。
visibility属性有时也被分类为定位属性,用来控制定位的元素是否可见,取值包括,visible（ 可见 ）,
hidden（ 隐藏 ） 和 inherit（ 继承 ）,默认值为 inherit。
2,显示属性
CSS的鼠标样式属性用于设置鼠标移到元素上时的鼠标形状 。 通常情况下,鼠标呈指向左上方的箭头,
而当鼠标移到超链接上时呈手的形状 。 有了鼠标样式属性,用户就可以随意地设定鼠标的形状 。
CSS的鼠标样式是通过 cursor样式表属性定义的,
格式为：
cursor：属性值
11.4.6 鼠标样式属性列表样式属性用于设置页面中的列表格式 。 CSS中的列表样式属性包括,list-style,list-style-type,list-
style-image以及 list-style-position。
list-style-type属性用于设置项目符号和编号样式,
取值为,disc（ 默认值,实心黑点 ）,circle（ 空心圆圈 ）,square（ 方块 ）,decimal（ 十进制数 1,2,3
等 ）,lower-roman（ 小罗马数字 ）,upper-roman
（ 大罗马数字 ）,lower-alpha（ 小写字母 ）,upper-
-alpha（ 大写字母 ） 和 none（ 无 ） 。
11.4.7 列表样式属性滤镜 （ filter） 是 CSS的一种扩充 。 使用这种技术只用几句代码就可以把类似于 Photoshop中的滤镜效果添加到图片,文本等 HTML元素上 。
filter样式表的属性定义为：
filter：过滤器名称 （ 参数 ）
11.4.8 CSS滤镜选择,窗口,|,CSS样式,命令可以打开,CSS
样式,面板,如图所示 。
11.5 在 Dreamweaver MX中 使用 CSS样式
11.5.1 CSS样式面板示范演示
11.5.2 新建一个 CSS样式表示范演示
11.5.3 重新定义 HTML标签示范演示
11.5.4 设置页面背景颜色示范演示
11.5.5 设置链接颜色
CSS样式建好之后,接下来就是要把它应用到文档中去 。 对于自定义的样式,需要将新样式应用到相应的对象上,而重新定义的 HTML标签样式是不需要应用的,只要选择相应的标签样式就能自动应用新样式 。
应用 CSS样式的方法如下：
将插入点移到需要套用样式的文本段落中,单击
CSS样式面板上的 CSS样式,则插入点所在的段落的文字就应用了新样式 。
11.5.6 应用 CSS样式
11.5.7 修改样式若要修改 CSS样式,首先打开 CSS样式面板,编辑样式,视窗,这时所有的 CSS样式 （ 包括自定义的
CSS样式和重新定义 HTML标签 ） 都出现在面板上 。
然后采用如下两种方法之一,打开样式定义对话框进行编辑修改 。
（ 1） 在 CSS样式面板上双击该样式名 。
（ 2） 选中要修改的 CSS样式,单击 CSS样式面板右下角的编辑样式按钮 。
链接一个外部样式表的操作步骤如下：
（ 1） 选择,窗口,|“CSS样式,命令,打开 CSS样式面板 。
（ 2） 单击该面板上的,附加样式表,按钮,或单击该面板顶部右边的三角按钮,从弹出的菜单中选择
,附加样式表,命令,出现,链接外部样式表,对话框 。
（ 3） 在该对话框中选择,添加为,,链接,,并在
,文件 /URL”文本框中输入外部样式表文件名,或单击,浏览,按钮选择外部样式表文件 （ 外部样式表文件必须以,css为扩展名 ）,单击,确定,按钮 。
11.5.8 链接外部 CSS样式表
E N D
