第十一章CSS属性

第十一章CSS的属性本章内容11.1CSS背景11.2CSS文本11.3CSS字体11.4CSS列表11.5CSS表格11.1CSS背景背景色背景图像背景重复背景定位背景属性简写背景色

可以使用background-color

属性为元素设置背景色。基本语法：

selector{background-color:颜色值;}可以为所有元素设置背景色，这包括body一直到em和a等行内元素。background-color不能继承，其默认值是transparent。transparent有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。背景图像要把图像放入背景，需要使用background-image

属性。background-image属性的默认值是none，表示背景上没有放置任何图像。基本语法：

selector{background-image:url(图像路径);}

另外还要补充一点，background-image也不能继承。事实上，所有背景属性都不能继承。

背景重复如果需要在页面上对背景图像进行平铺，可以使用background-repeat

属性。基本语法：

selector{background-image:url(图像路径);background-repeat:属性值;}

可能的值：repeat

导致图像在水平垂直方向上都平铺。repeat-x

和repeat-y

分别导致图像只在水平或垂直方向上重复，no-repeat

则不允许图像在任何方向上平铺。背景定位通过background-position属性改变图像在背景中的位置。基本语法：

selector{background-image:url('图像路径');background-repeat:属性值;background-position:属性值;}为background-position属性值：1、关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。2、长度值，如100px或5cm，最后也可以使用百分数值。背景属性简写基本语法：

selector{background:#ff0000url(图像路径)no-repeatbottomcenter;}CSS背景属性表属性描述background简写属性，作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把图像设置为背景。background-position设置背景图像的起始位置。background-repeat设置背景图像是否及如何重复。11.2CSS文本

文本颜色对齐方式文本装饰缩进文本行间距字间距字符间距字母控制文本颜色基本语法：

Selector｛

color:red;color:#00ff00;color:rgb(0,0,255);}对齐方式text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的水平对齐方式。基本语法：

selector{text-align:属性值;}

属性值left、right

和center实现元素中的文本分别左对齐、右对齐和居中。属性值justify实现两端对齐文本效果。在justify实现两端对齐时，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。文本装饰text-decoration属性规定添加到文本的修饰。基本语法：

selector{text-decoration:属性值;}text-decoration有6个值：none，默认值，定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪烁的文本。注释：IE、Chrome或Safari不支持"blink"属性值。缩进文本text-indent

属性实现文本缩进。通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。基本语法：

selector{text-indent:缩进值;}

注意：一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。

行间距line-height

属性设置行间的距离（行高）。line-height与font-size的计算值之差（在CSS中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。

基本语法：

selector{line-height:属性值;}可能的值：normal默认，设置合理的行间距。number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。Length

设置固定的行间距。%

基于当前字体尺寸的百分比行间距。字间距word-spacing

属性增加或减少单词间的空白（即字间隔）。该属性定义元素中字之间插入多少空白符。针对这个属性，“字”定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal就等同于设置为0。允许指定负长度值，这会让字之间挤得更紧。

基本语法：

selector{word-spacing

:属性值;}可能的值:normal默认，定义单词间的标准空间。length定义单词间的固定空间。字符间距letter-spacing

属性增加或减少字符间的空白（字符间距）。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。基本语法：

selector{letter-spacing:属性值;}可能的值：normal默认。规定字符间没有额外的空间。length定义字符间的固定空间（允许使用负值）。

字母控制text-transform

属性控制文本的大小写。这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。基本语法：

selector{text-transform:属性值;}可能的值:none默认，定义带有小写字母和大写字母的标准的文本。capitalize文本中的每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase定义无大写字母，仅有小写字母。11.3CSS字体

设置文本的字体设置字体尺寸设置字体风格设置字体的粗细字体属性简写设置文本的字体font-family

规定元素的字体系列。font-family可以把多个字体名称作为一个“回退”系统来保存，用逗号分割每个值，如果浏览器不支持第一个字体，则会尝试下一个。基本语法：

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

selector{font-size:属性值;}注意：实际上font-size设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮（通常会矮）。

所有主流浏览器都支持font-size属性。

font-size属性值表值描述xx-smallx-smallsmallmediumlargex-largexx-large把字体的尺寸设置为不同的尺寸，从xx-small到xx-large。默认值：medium。

smaller把font-size设置为比父元素更小的尺寸。larger把font-size设置为比父元素更大的尺寸。length把font-size设置为一个固定的值。%把font-size设置为基于父元素的百分比值。设置字体风格font-style

属性定义字体的风格。该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。基本语法：

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

selector{font-weight:属性值;}可能的值：normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。数字100、200…800、900，定义由粗到细的字符。400等同于normal，而700等同于bold。字体属性简写简写在font

属性一个声明中设置所有字体属性。基本语法：

selector{font:

italicbold12pxarial,sans-serif;}可以不设置其中的某个值，比如font:100%verdana;

也是允许的。未设置的属性会使用其默认值。

11.4CSS列表列表类型列表项标志位置设置列表项标志图象列表属性简写列表类型要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。list-style-type

属性设置列表项标记的类型。基本语法：

selector{list-style-type:属性值;}语法解释：其属性取值范围固定，如下表所示。list-style-type属性值表值描述none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。lower-roman小写罗马数字(i,ii,iii,iv,v,…等。)upper-roman大写罗马数字(I,II,III,IV,V,…等。)lower-alpha小写英文字母(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等。（日文片假名）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列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside

默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。设置列表项标志图象list-style-image

属性使用图像来替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用list-style-position属性控制。基本语法：

selector{list-style-image:url("图像路径");}可能的值：URL图像的路径；none默认值，无图形被显示。列表属性简写list-style

简写属性在一个声明中设置所有的列表属性。基本语法：

selector{list-style:squareinsideurl('/i/arrow.gif');}可能的值：list-style-type设置列表项标记的类型。list-style-position设置在何处放置列表项标记。list-style-image使用图像来替换列表项的标记。CSS列表属性表属性描述list-style-type设置列表项标志的类型。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。list-style简写属性。用于把所有用于列表的属性设置于一个声明中。11.5CSS表格设置表格的布局表格边框合并单元格边框距离表格标题位置设置表格的布局table-layout

属性用来显示表格单元格、行、列的算法规则。该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的HTML表。基本语法：

selector{table-layout:属性值;}可能的值：automatic默认，列宽度由单元格内容设定。fixed列宽由表格宽度和列宽度设定。表格边框合并border-collapse

属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的HTML中那样分开显示。基本语法：

selector{border-collapse

:属性值;}注释：所有主流浏览器都支持border-collapse属性。可能的值：separate默认值，边框会被分开。coll