CSS基础知识之（背景、文本格式、字体）

背景

顾名思义，背景属性是用来定义HTML元素的背景。

包括颜色（background-color）、图像（background-image）等

背景颜色

例如，页面的背景颜色使用在person的选择器中：

person{background-color:#ff0000;}

CSS中，颜色值通常以以下方式定义：

• 十六进制：如“#ff0000”
• RGB：如“rgb（255,0,0）”
• 颜色名称：如“red”

背景图像

background-image属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示(x轴或y轴)，以覆盖整个元素实体。

如：

person{background-image:url('paper.gif');}

当然，如果要求只在水平方向重铺，可以用：repeat-x；

只在垂直方向重铺，可以用：repeat-y；

若不想让图像平铺，可以使用no-repeat；

另外，如果要改变图像在背景中的位置，可以使用background-position。如：background-position:right top

background-attachment：用于设置背景图像是否固定或者随着页面的其余部分滚动。

属性值有：

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的
fixed	背景图片不会随着页面的滚动而滚动
local	背景图片会随着元素内容的滚动而滚动
initial	设置该属性的默认值
inherit	指定background-attachment的设置应该从父元素继承

也可以将上述所有属性合并到同一个属性中，并可以将背景颜色的简写属性为：“background”：

person {background:#ffffff url('img_tree.png') no-repeat}

顺序为：颜色、图像、图像重复方向、图像是否滚动及位置。

文本格式

文本颜色

颜色属性color用来设置文字的颜色，和背景颜色类似：

• 十六进制，如#FF0000；
• RGB值，如RGB(255,0,0)；
• 颜色的名称：如red；

文本对齐方式

文本排列属性text-align是用来设置文本的水平对齐方式；文本可居中或对齐到左或右，两端对齐。

属性值有center、left、right、justify（每一行被展开为宽度相等，左、右外边距是对齐的）。

文本修饰

利用text-decoration属性来设置或删除文本的装饰。属性值有none、overline（在文本上方）、line-through（从文本中穿过）

、underline（从文本下方）；

文本缩进

该属性text-indent是用来指定文本的第一行的缩进。

其它属性

属性	描述	属性值
color	文本颜色	见上
direction	文本方向	ltr（从左到右） rtl（从右到左） inherit（从父元素继承direction属性的值）
letter-spacing	字符间距	normal（默认字符间没有额外的空间） length（如3px、-3px） inherit
line-height	设置行高	normal（默认） number（设置数字，此数字会与当前的字体尺寸相乘来设置行间距） length（设置固定的行间距） %（基于当前字体尺寸的百分比行间距） inherti
text-align	对齐元素中的文本	见上
text-decoration	向文本添加修饰	见上
text-indent	缩进元素中文本的首行	见上
text-shadow	文本阴影	h-shadow（必须项，水平阴影的位置。允许负值） v-shadow（必须项，垂直阴影的位置。允许负值） blur（可选项，模糊的距离） color（可选项，阴影的颜色）
text-transform	控制元素中的字母大小写	none（默认，定义带有小写字母和大写字母的标准的文本）capitalize（文本中的每个单词都以大写字母开头） uppercase（定义仅有大写字母） lowercase（定义仅有小写字母） inherit
unicode-bidi	设置或返回文本是否被重写	该属性与direction属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。
vertical-align	元素的垂直对齐	见上
white-space	元素中空白的处理方式	normal（默认，空白会被浏览器忽略） pre（空白会被浏览器保留，其行为方式类似HTML中的<pre>标签） nowrap（文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止） pre-wrap（保留空白符序列，但正常的进行换行） pre-line（合并空白符序列，但保留换行符） inherit
word-spacing	设置字间距，增加或减少字与字之间的空白	normal（默认为标准空间） length（定义单词间的固定空间）

字体

该属性定义字型、加粗、大小、文字样式

字形

有两种类型的字体系列名称：

• 通用字体类型-拥有相似外观的字体系统组合（如“Serif”或“Monospace”）
• 特定字体系列-一个特定的字体系列（如“Times”或“Courier”）

字体系列

利用font-family属性来设置文本的字体系列。并且应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，将自动尝试下一种字体。

注意：如果字体系列的名称超过一个字，则必须用引号，如Font Family：“宋体”。多个字体之间用一个逗号分隔开。

字体样式

font-style主要用于指定斜体文字的字体样式属性。属性值为：normal（正常）、italic（斜体）、oblique（倾斜的文字-文字向一边倾斜）

字体大小

font-size用于设置文本大小。

注意：不能通过调整字体大小使段落看上去像标题，或使标题看上去像段落。应该使用<p>表示段落，<h1>-<h6>表示标题；如果不指定一个字体的大小，默认大小和普通文本段落一样，是16px（16px=1em）。

字体粗细

font-weight用于指定字体的粗细。

属性值有light（更细）、normal（标准字符）、bold（粗体）、bolder（更粗的）。