CSS-样式

CSS背景

背景色 例如：

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

背景图像 要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。 如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。 另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。

背景重复 如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。 默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

背景定位 可以利用 background-position 属性改变图像在背景中的位置。 下面的例子在 body 元素中将一个背景图像居中放置：

背景关联 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。 您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

CSS文本

缩进文本 把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。例如：

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

水平对齐 text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

字间隔 Word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。 word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。

字母间隔 letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。 与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量。

字符转换 text-transform 属性处理文本的大小写。 这个属性有 4 个值：

文本装饰 text-decoration 有 5 个值：

处理空白符 white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

文本方向 direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

CSS字体

在 CSS 中，有两种不同类型的字体系列名称：

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

指定字体系列 使用 font-family 属性 定义文本的字体系列。

通用字体系列，如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：

因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。

特定字体系列，除了使用通用的字体系列，您还可以通过 font-family 属性设置更具体的字体。 下面的例子为所有 h1 元素设置了 Georgia 字体：

这样的规则同时会产生另外一个问题，如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题。 如果您对字体非常熟悉，也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：

字体风格 font-style 属性最常用于规定斜体文本。 该属性有三个值：

字体变形 font-variant 属性可以设定小型大写字母。 小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。例如：

字体加粗 font-weight 属性设置文本的粗细。 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。 如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。 例如：

字体大小 font-size 属性设置文本的大小。 绝对值：

相对大小：

注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

使用像素来设置字体大小 通过像素设置文本大小，可以对文本大小进行完全控制： 例如：

使用 em 来设置字体大小 如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。

结合使用百分比和 EM 在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

CSS链接

链接的四种状态：

当为链接的不同状态设置样式时，请按照以下次序规则： a:hover 必须位于 a:link 和 a:visited 之后 a:active 必须位于 a:hover 之后

文本修饰 text-decoration 属性大多用于去掉链接中的下划线：

背景色 background-color 属性规定链接的背景色：

CSS列表

属性：

CSS轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 属性：

CSS框模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。 提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

内边距 padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。 例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

边框 元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。 每个边框有 3 个方面：宽度、样式，以及颜色。 边框样式

边框宽度

由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。

边框颜色

注释：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

注释：transparent表示透明。

外边距 设置外边距的最简单的方法就是使用 margin 属性。 例如：

百分数是相对于父元素的 width 计算的。

单边外边距属性

外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。