公众号文章排版学习（六）

CSS 学习（二）

今天继续CSS的学习，会涉及到具体的规则和属性。过两天需要设置的样式表内容，就在今天的学习内容里面了。

CSS 背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。可以使用background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。可以为所有元素设置背景色。

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

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

可以为任何元素设置背景图像，而不仅仅是body，background-image 也不能继承。所有背景属性都不能继承。

如果需要在页面上对背景图像进行平铺，可以使用background-repeat 属性。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。

可以利用background-position 属性改变图像在背景中的位置。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。

百分数值同时应用于元素和图像。如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

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

CSS 文本

CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS 提供了text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边。不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距。

text-indent 可以使用所有长度单位，包括百分比值。百分数要相对于缩进元素父元素的宽度。text-indent 属性可以继承。

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

将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

word-spacing 属性可以改变字（单词）之间的标准间隔。letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。text-transform 属性处理文本的大小写。

text-decoration 属性会起到文本装饰的作用，但是需要注意一个事项：text-decoration 值会替换而不是累积起来。

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

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。对于行内元素，只有当unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

CSS 字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

使用font-family 属性定义文本的字体系列。建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。把这些字体按照优先顺序排列，然后用逗号进行连接。

当字体名中有一个或多个空格（比如 New York），或者字体名包括 # 或 $ 之类的符号，需要在 font-family 声明中加引号。单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号。

font-style 属性最常用于规定斜体文本。

font-variant 属性可以设定小型大写字母。

font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

font-size 属性设置文本的大小。请始终使用正确的 HTML 标题，比如使用-来标记标题，使用来标记段落。如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。通过像素设置文本大小，可以对文本大小进行完全控制。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

CSS 链接

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。链接的四种状态：a:link - 普通的、未被访问的链接；；a:visited - 用户已访问的链接；a:hover - 鼠标指针位于链接的上方；a:active - 链接被点击的时刻。

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

CSS 列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。

要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用list-style-image属性做。

利用list-style-position可以确定列表标志的位置。

CSS 表格

CSS 表格属性可以极大地改善表格的外观。需在 CSS 中设置表格边框，使用 border 属性。border-collapse 属性设置是否将表格边框折叠为单一边框。

通过 width 和 height 属性定义表格的宽度和高度。text-align 和 vertical-align 属性设置表格中文本的对齐方式。如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性。

CSS 轮廓

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

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

以上内容，还是和之前一样，做了一个简单的记录。至此CSS的学习也就结束了。强烈建议需要的朋友去W3School官网学习：简单易懂，深入浅出，非常适合学习。

明天去研究一下图片的处理方式，这两天听到图床这个词，但是我不太明白是什么意思。总之目前进度还行，学习的这些知识也能应用于自己的博客领域，这就非常有价值了。

需要克服的一个问题就是有时候会耽误正常工作时间，一般工作时间到晚上十点，这些天为了写作，一般八九点就开始了，对正常的工作产生了一些影响。想把写作时间调整为早晨早餐前，但是一直没能成功早起。有点尴尬啊。从这个影响来看，坚持写公众号已经进入了第二阶段了。也就是进入了不稳定期，需要建立有效的行动机制才能更轻松的坚持下去。恩，加油！

希望以上内容对你有所帮助。

今日语录：

人生第一快乐是做到自己认为自己做不到的事，人生第二快乐是做到别人认为自己做不到的事。---李敖