第十一章CSS属性

1、本章内容本章内容11.1 CSS 背景背景11.2 CSS 文本文本11.3 CSS 字体字体11.4 CSS 列表列表11.5 CSS 表格表格11.1 CSS背景背景背景色背景色背景图像背景图像背景重复背景重复背景定位背景定位背景属性简写背景属性简写背景色背景色 可以使用可以使用 background-color 属性为元素设置背景色。属性为元素设置背景色。基本语法：基本语法： selector background-color: 颜色值颜色值; 可以为所有元素设置背景色可以为所有元素设置背景色，这包括，这包括 body 一直到一直到 em 和和 a 等行内元等行内元素。素。 backgr

2、ound-color 不能继承不能继承，其默认值是，其默认值是 transparent。transparent 有有“透明透明”之意。也就是说，如果一个元素没有指定背之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。景色，那么背景就是透明的，这样其祖先元素的背景才能可见。背景图像背景图像 要把图像放入背景，需要使用要把图像放入背景，需要使用 background-image 属性。属性。background-image 属性的属性的默认值是默认值是 none，表示背景上没有放置任，表示背景上没有放置任何图像。何图像。基本语法：基本语法： select

3、or background-image: url(图像路径图像路径); 另外还要补充一点，另外还要补充一点，background-image 也不能继承。事实上，也不能继承。事实上，所有所有背景属性都不能继承背景属性都不能继承。 背景重复背景重复 如果需要在页面上对背景图像进行平铺，可以使用如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。属性。基本语法：基本语法： selector background-image: url(图像路径图像路径); background-repeat: 属性值属性值; 可能的值：可能的值： repeat 导致图像在水平垂直

4、方向上都平铺。导致图像在水平垂直方向上都平铺。repeat-x 和和 repeat-y 分别导致图像只在水平或垂直方向上重复，分别导致图像只在水平或垂直方向上重复，no-repeat 则不则不允许图像在任何方向上平铺。允许图像在任何方向上平铺。 背景定位背景定位通过通过 background-position 属性改变图像在背景中的位置。属性改变图像在背景中的位置。 基本语法：基本语法： selector background-image:url(图像路径图像路径); background-repeat:属性值属性值; background-position:属性值属性值; 为为backgro

5、und-position 属性值：属性值：1、关键字：、关键字：top、bottom、left、right 和和 center。通常，这些关键字会成对出现，不过也不总是这样。通常，这些关键字会成对出现，不过也不总是这样。2、长度值，如、长度值，如 100px 或或 5cm，最后也可以使用，最后也可以使用百分数值百分数值。背景属性简写背景属性简写基本语法：基本语法： selector background: #ff0000 url(图像路径图像路径) no-repeat bottom center; CSS背景属性表背景属性表属性属性描述描述background简写属性，作用是将背景属性设置在一

6、个声简写属性，作用是将背景属性设置在一个声明中。明中。background-attachment背景图像是否固定或者随着页面的其余部分背景图像是否固定或者随着页面的其余部分滚动。滚动。background-color设置元素的背景颜色。设置元素的背景颜色。background-image把图像设置为背景。把图像设置为背景。background-position设置背景图像的起始位置。设置背景图像的起始位置。background-repeat设置背景图像是否及如何重复。设置背景图像是否及如何重复。11.2 CSS文本文本 文本颜色文本颜色对齐方式对齐方式文本装饰文本装饰缩进文本缩进文本行间距行间

7、距字间距字间距字符间距字符间距字母控制字母控制文本颜色文本颜色基本语法：基本语法： Selector color: red; color: #00ff00; color: rgb(0,0,255); 对齐方式对齐方式text-align是一个基本的属性，它会影响一个元素中的文本行互相之间是一个基本的属性，它会影响一个元素中的文本行互相之间的的水平对齐方式水平对齐方式。基本语法：基本语法： selector text-align : 属性值属性值; 属性值属性值 left、right 和和 center实现元素中的文本分别左对齐、右对齐和实现元素中的文本分别左对齐、右对齐和居中。居中。 属性值属

8、性值justify实现两端对齐文本效果。实现两端对齐文本效果。在在justify实现两端对齐时，文本行的左右两端都放在父元素的内边界实现两端对齐时，文本行的左右两端都放在父元素的内边界上。然后，上。然后，调整单词和字母间的间隔调整单词和字母间的间隔，使各行的长度恰好相等。，使各行的长度恰好相等。文本装饰文本装饰text-decoration 属性规定添加到文本的修饰。属性规定添加到文本的修饰。基本语法：基本语法： selector text-decoration: 属性值属性值; text-decoration有有6个值：个值：none，默认值，定义标准的文本。，默认值，定义标准的文本。und

9、erline定义文本下的一条线。定义文本下的一条线。overline定义文本上的一条线。定义文本上的一条线。line-through定义穿过文本下的一条线。定义穿过文本下的一条线。blink定义闪烁的文本。定义闪烁的文本。注释：注释：IE、Chrome 或或 Safari 不支持不支持 blink 属性值属性值。缩进文本缩进文本text-indent 属性实现文本缩进。属性实现文本缩进。 通过使用通过使用 text-indent 属性，所有元素的属性，所有元素的第一行第一行都可以缩进一个给定的都可以缩进一个给定的长度，长度，甚至该长度可以是负值甚至该长度可以是负值。基本语法：基本语法： sel

10、ector text-indent: 缩进值缩进值; 注意：注意：一般来说，可以为所有一般来说，可以为所有块级元素块级元素应用应用 text-indent，但无法将该，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。属性。 行间距行间距line-height 属性设置行间的距离（行高）。属性设置行间的距离（行高）。 line-height 与与 font-size 的计算值之差（在的计算值之差（在 CSS 中成为中成为“行间距行间距”）分为两半，分别加到一个文本行内容的顶部和底部。分为两半，分别加到一

11、个文本行内容的顶部和底部。 基本语法：基本语法： selector line-height : 属性值属性值; 可能的值：可能的值：normal默认，设置合理的行间距。默认，设置合理的行间距。number设置数字，此设置数字，此数字会与当前的字体尺寸相乘来设置行间距。数字会与当前的字体尺寸相乘来设置行间距。Length 设置固定的行间设置固定的行间距。距。% 基于当前字体尺寸的百分比行间距。基于当前字体尺寸的百分比行间距。字间距字间距word-spacing 属性增加或减少单词间的空白（即属性增加或减少单词间的空白（即字间隔字间隔）。）。 该属性定义元素中字之间插入多少空白符。针对这个属性，该

12、属性定义元素中字之间插入多少空白符。针对这个属性，“字字” 定定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，的通常间隔；所以，normal 就等同于设置为就等同于设置为 0。允许指定负长度值，允许指定负长度值，这会让字之间挤得更紧这会让字之间挤得更紧。 基本语法：基本语法： selector word-spacing :属性值属性值; 可能的值可能的值: normal默认，定义单词间的标准空间。默认，定义单词间的标准空间。length定义单词间定义单词间的固定空间。的固定空间。字符间距字符间距lett

13、er-spacing 属性增加或减少字符间的空白（属性增加或减少字符间的空白（字符间距字符间距）。）。 该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。其字符框要窄，指定长度值时，会调整字母之间通常的间隔。基本语法：基本语法： selector letter-spacing : 属性值属性值 ; 可能的值：可能的值：normal默认。规定字符间没有额外的空间。默认。规定字符间没有额外的空间。length定义字定义字符间的固定空间（允许使用负值）。符间的固定空间（允许使用

14、负值）。 字母控制字母控制text-transform 属性控制文本的大小写。属性控制文本的大小写。 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。 基本语法：基本语法： selector text-transform : 属性值属性值 ; 可能的值可能的值: none默认，定义带有小写字母和大写字母的标准的文本。默认，定义带有小写字母和大写字母的标准的文本。capitalize文本中的每个单词以大写字母开头。文本中的每个单词以大写字母开头。uppercase定义仅有大定义仅有大写字母。写字母。lowercase定义

15、无大写字母，仅有小写字母。定义无大写字母，仅有小写字母。11.3 CSS字体字体 设置文本的字体设置文本的字体设置字体尺寸设置字体尺寸设置字体风格设置字体风格设置字体的粗细设置字体的粗细字体属性简写字体属性简写设置文本的字体设置文本的字体font-family 规定元素的字体系列。规定元素的字体系列。 font-family 可以把多个字体名称作为一个可以把多个字体名称作为一个“回退回退”系统来保存，用系统来保存，用逗逗号号分割每个值，如果浏览器不支持第一个字体，则会尝试下一个。分割每个值，如果浏览器不支持第一个字体，则会尝试下一个。 基本语法：基本语法： selector font-fami

16、ly:字体字体1,字体字体2, ; 注意：使用某种特定的字体系列（注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推强烈推荐使用一个通用字体系列名作为后路荐使用一个通用字体系列名作为后路。设置字体尺寸设置字体尺寸font-size 属性可设置字体的尺寸。属性可设置字体的尺寸。基本语法：基本语法： selector font-size : 属性值属性值 ; 注意：实际上注意：实际上font-size设置的是字体中字符框的高度，实际的字符字设置的

17、是字体中字符框的高度，实际的字符字形可能比这些框高或矮（通常会矮）。形可能比这些框高或矮（通常会矮）。 所有主流浏览器都支持所有主流浏览器都支持 font-size 属性。属性。 font-size 属性值表属性值表值值描述描述xx-small x-small small medium large x-large xx-large 把字体的尺寸设置为不同的尺寸，从把字体的尺寸设置为不同的尺寸，从 xx-small 到到 xx-large。默认值：。默认值：medium。 smaller把把 font-size设置为比父元素更小的尺寸。设置为比父元素更小的尺寸。larger把把 font-siz

18、e 设置为比父元素更大的尺寸。设置为比父元素更大的尺寸。length把把 font-size 设置为一个固定的值。设置为一个固定的值。%把把 font-size 设置为基于父元素的百分比值。设置为基于父元素的百分比值。设置字体风格设置字体风格font-style 属性定义字体的风格。属性定义字体的风格。 该属性设置使用该属性设置使用斜体、倾斜或正常字体斜体、倾斜或正常字体。斜体字体通常定义为字体系。斜体字体通常定义为字体系列中的一个单独的字体。列中的一个单独的字体。 基本语法：基本语法： selector font-style : 属性值属性值 ; 可能的值：可能的值：normal默认值。浏览

19、器显示一个标准的字体样式。默认值。浏览器显示一个标准的字体样式。italic浏浏览器会显示一个斜体的字体样式。览器会显示一个斜体的字体样式。oblique浏览器会显示一个倾斜的字浏览器会显示一个倾斜的字体样式。体样式。设置字体的粗细设置字体的粗细font-weight 属性设置文本的粗细。属性设置文本的粗细。该属性用于设置显示元素的文本中所用的字体加粗。数字值该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当相当于于 关键字关键字 normal，700 等价于等价于 bold。 基本语法：基本语法： selector font-weight : 属性值属性值 ; 可能的值：可能

20、的值：normal默认值。定义标准的字符。默认值。定义标准的字符。bold定义粗体字符。定义粗体字符。bolder定义更粗的字符。定义更粗的字符。lighter定义更细的字符。数字定义更细的字符。数字100、200 800、900，定义由粗到细的字符。，定义由粗到细的字符。400 等同于等同于 normal，而，而 700 等同等同于于 bold。 字体属性简写字体属性简写简写在简写在font 属性一个声明中设置所有字体属性。属性一个声明中设置所有字体属性。 基本语法：基本语法： selector font: italic bold 12px arial,sans-serif ; 可以不设置其

21、中的某个值，比如可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。也是允许的。未设置的属性会使用其默认值。未设置的属性会使用其默认值。 11.4 CSS列表列表列表类型列表类型列表项标志位置列表项标志位置设置列表项标志图象设置列表项标志图象列表属性简写列表属性简写列表类型列表类型要影响列表的样式，最简单（要影响列表的样式，最简单（同时支持最充分同时支持最充分）的办法就是改变其标）的办法就是改变其标志类型。志类型。list-style-type 属性设置列表项标记的类型。属性设置列表项标记的类型。基本语法：基本语法： selector list-style-type

22、 : 属性值属性值; 语法解释：其属性取值范围固定，如下表所示。语法解释：其属性取值范围固定，如下表所示。list-style-type属性值表属性值表值值描述描述none无标记。无标记。disc默认。标记是实心圆。默认。标记是实心圆。circle标记是空心圆。标记是空心圆。square标记是实心方块。标记是实心方块。decimal标记是数字。标记是数字。lower-roman小写罗马数字小写罗马数字(i, ii, iii, iv, v, 等。等。)upper-roman大写罗马数字大写罗马数字(I, II, III, IV, V, 等。等。)lower-alpha小写英文字母小写英文字母 (

23、a, b, c, d, e, 等。等。)upper-alpha大写英文字母大写英文字母 (A, B, C, D, E, 等。等。)list-style-type属性值表属性值表值值描述描述decimal-leading-zero0开头的数字标记。开头的数字标记。(01, 02, 03, 等。等。)hebrew传统的希伯来编号方式传统的希伯来编号方式cjk-ideographic简单的表意数字简单的表意数字hiragana标记是：标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）等。（日文片假名）katakana标记是：标记是：A, I, U, E, O, KA等。（日文片

24、假名）等。（日文片假名）hiragana-iroha标记是：标记是：i, ro, ha, ni, ho, he, to等。（日文片假名）等。（日文片假名）katakana-iroha标记是：标记是：I, RO, HA, NI, HO, HE等。（日文片假名）等。（日文片假名）列表项标志位置列表项标志位置list-style-position 属性设置在何处放置列表项标记。属性设置在何处放置列表项标记。 基本语法：基本语法： selector list-style-position : 属性值属性值; 可能的值：可能的值：inside 列表项目标记放置在文本以内，且环绕文本根据标列表项目标记放置

25、在文本以内，且环绕文本根据标记对齐。记对齐。outside 默认值，保持标记位于文本的左侧，列表项目标记默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。放置在文本以外，且环绕文本不根据标记对齐。设置列表项标志图象设置列表项标志图象list-style-image 属性使用图像来替换列表项的标记。属性使用图像来替换列表项的标记。 这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用表项内容的放置位置通常使用 list-style-position 属性控制。属性控制

26、。基本语法：基本语法： selector list-style-image: url(图像路径图像路径) ; 可能的值：可能的值：URL图像的路径；图像的路径；none默认值，无图形被显示。默认值，无图形被显示。列表属性简写列表属性简写list-style 简写属性在一个声明中设置所有的列表属性。简写属性在一个声明中设置所有的列表属性。 基本语法：基本语法： selector list-style:square inside url(/i/arrow.gif); 可能的值：可能的值：list-style-type设置列表项标记的类型。设置列表项标记的类型。list-style-position

27、设置在何处放置列表项标记。设置在何处放置列表项标记。list-style-image使用图像来替换列表项使用图像来替换列表项的标记。的标记。CSS列表属性表列表属性表属性属性描述描述list-style-type设置列表项标志的类型。设置列表项标志的类型。list-style-position设置列表中列表项标志的位置。设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。设置列表项标志的类型。list-style简写属性。用于把所有用于列表的属性设置简写属性。用于把所有用于列表的属性设置于一个声明中。于一个声明中。11.5 CSS 表格表格设置表格的布局设置表格的布

28、局表格边框合并表格边框合并单元格边框距离单元格边框距离表格标题位置表格标题位置设置表格的布局设置表格的布局table-layout 属性用来显示表格单元格、行、列的算法规则。属性用来显示表格单元格、行、列的算法规则。该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。表。基本语法：基本语法： selector table-layout :属性值属性值; 可能的值：可能的值：automatic默认，列宽度由单元格内

29、容设定。默认，列宽度由单元格内容设定。fixed列宽由列宽由表格宽度和列宽度设定。表格宽度和列宽度设定。表格边框合并表格边框合并border-collapse 属性设置表格的边框是否被合并为一个单一的边框，属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的还是象在标准的 HTML 中那样分开显示。中那样分开显示。基本语法：基本语法： selector border-collapse :属性值属性值; 注释：注释：所有主流浏览器都支持所有主流浏览器都支持 border-collapse 属性。属性。 可能的值：可能的值：separate默认值，边框会被分开。默认值，边框会被分开。collapse，边框会合并，边框会合并为一个单一的边框。为一个单一的边框。单元格边框距离单元格边框距离border-spacing 属性设置相邻单元格的边框间的距离（仅用于属性设置相邻单元格的边框间的距离（仅用于“边框边框分离分离”模式）。模式）。基本语法：基本语法： select