CSS学习总结系列6——CSS属性:背景、文本、字体

CSS属性

1. 背景(background)
2. 文本(text)
3. 字体(font)

CSS背景(background)

编号	属性	含义	默认值	应用于	继承性	IE	FF	W3C
1	background	背景的综合属性。	根据单个属性	所有元素	无	4	1	1
2	background-color	背景颜色属性。	transparent	所有元素	无	4	1	1
3	background-image	背景图片属性。	none	所有元素	无	4	1	1
4	background-position	背景图片位置属性。	0% 0%	块级和替换元素	无	4	1	1
5	background-repeat	背景图片重复属性。	repeat	所有元素	无	4	1	1
6	background-attachment	背景图片的滚动属性。	scroll	所有元素	无	4	1	1

元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

1.background-color

取值： <color> | transparent | inherit

说明：

• color:颜色名称、rgb 值或者十六进制数
• transparent::默认值，透明色(不是白色)

注意：background-color覆盖整个背景。但在IE中背景颜色只覆盖补白和内容。

2.background-image

取值： <uri> | none | inherit

说明：

• uri:绝对URL、相对URL（是相对与样式表，而非引入样式表的文档）。

注意：使用背景图片的同时最好再指定一个背景颜色，以防止图片无法加载。

3.background-position

取值： [[<percentage> | <length> | left | center | right] [<percentage>] | <length> | top | center | bottom]?] | [[left | center | right] || [top | center | bottom]] | inherit

说明：

• percentage:相对长度偏移。左上角是 0% 0%。右下角是 100% 100%。图片中心坐标定位。
• length:绝对长度偏移。左上角是 0 0。图片左上角坐标定位。
• left、center、right:水平位置。
• top、center、right:垂直位置。

注意：

• 两个值分别代表水平位置、垂直位置。第二个值是center或50%则可省略不写。最好先指定水平位置。
• 使用百分数：图片中心的坐标=img.width/2+(width-img.width)*percent。
• background-position沿着背景中的补白放置图像。长度可取负值。

4.background-repeat

取值： repeat | repeat-x | repeat-y | no-repeat | inherit

说明：

• repeat:从background-position定义的起始位置分别向水平和垂直两个方向重复。
• repeat-x:从background-position定义的起始位置分别向水平方向重复。
• repeat-y:从background-position定义的起始位置分别向垂直方向重复。
• no-repeat: 背景图片只显示一次。

注意：repeat方式会把图片延伸到整个背景。IE只是延伸到补白。

5.background-attachment

取值： scroll | fixed | inherit

说明：

• scroll:图片随页滚动。
• fixed:当页面的其余部分滚动时，背景图像不会移动。

注意：

• 背景将只在其包含元素中可见，源图像
• IE7开始支持fixed属性。IE6及以前版本不支持该属性应用到body以外的元素。

6.background

取值： [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ] | inherit

说明： 根据单个元素确定初始值。

注意：

• background和其他的简写属性一样，省略的值自动设置为相应属性的默认值。
• background-position属性在简写中，必须两个值一起出现且按照水平在前垂直在后的顺序。

CSS文本(Text)

使用文本属性，你可以改变文本的颜色，增加或减少文本中的字符间距，对齐文本，装饰文本，对文本中的首行进行缩进，以及其他等等。

编号	属性	含义	默认值	应用于	继承性	IE	FF	W3C
1	color	文本前景色属性。	用户代理决定	所有元素	有	3	1	1
2	text-align	文本的水平对齐属性。	用户代理和书写方向决定	块级元素	有	4	1	1
3	text-indent	文本的缩进属性。	0	块级元素	有	4	1	1
4	text-transform	控制元素中的字母。	none	所有元素	有	4	1	1
5	text-decoration	向文本添加修饰。	repeat	所有元素	无	4	1	1
6	letter-spacing	字符间距属性。	normal	所有元素	有	4	1	1
7	word-spacing	设置字间距。	normal	所有元素	有	6	1	1
8	white-space	文本空白处理属性。	normal	所有元素(2.1) 块级元素(1/2)	无	5	1	1
9	direction	文本流的方向属性。	ltr	所有元素	有	6	1	2.1
10	unicode-bidi	文本流的方向附加属性。	normal	所有元素	无	5		2.1

1.color

取值： <color> | inherit

说明：

2.text-align

取值： left | center | right | justify | inherit

注意：影响一个元素文本行框之间的对齐方式。justify 属性浏览器不支持。

3.text-indent

取值： <length> | <percentage> | inherit

注意：只应用与块级元素第一行，长度可取负值，实现悬挂缩进。

4.text-transform

取值： uppercase | lowercase | capitalize | none | inherit

说明：

• uppercase、lowercase :将文本转换为全大写或小写。
• capitalize:转换为单词首字母大写。

5.text-decoration

取值： none | [ underline || overline || line-through || blink ] | inherit

说明：

• underline:下划线。
• overline:上划线。
• line-through:贯穿线。
• blink:闪烁效果(IE不支持)。

注意：类继承的效果，子元素显示父元素定义的修饰，但是无法取消父元素传递的显示效果。

6.letter-spacing

取值： <length> | normal | inherit

注意：normal 就相当于值为 0。允许使用负值，这会让字母之间挤得更紧。

7.word-spacing

取值： <length> | normal | inherit

注意：normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。

8.white-space

取值： normal | nowrap | pre | pre-wrap | pre-line | inherit

说明：

• normal:常规文本。合并空白符，忽略换行符，允许自动换行。
• nowrap:强制同行显示。合并空白符，忽略换行符，不允许自动换行。可使用
  元素达到手动换行的目的。
• pre:保持源文件格式。保留空白符，保留换行符，不允许自动换行。
• pre-wrap:CSS2.1中新增加的属性，保留空白符，保留换行符，不允许自动换行。
• pre-line:CSS2.1中新增加的属性，合并空白符序列，保留换行符，允许自动换行。

9.direction

取值： ltr | rtl | inherit

注意： 该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

• direction属性影响块级元素中文本的书写方向、表中列布局的方向、水平填充其元素框的方向，以及两端对齐元素中最后一行的位置。
• 只有当unicode-bidi属性设置为embed或bidi-override时才会应用该属性。
• 该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

10.unicode-bidi

取值： normal | embed | bidi-override | inherit

说明：

• normal:常规文本。
• embed:附加层，隐式排列。
• bidi-override:按照direction属性排列。

CSS字体(font)

设置字体属性是样式表的最常见用途之一。CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。

编号	属性	含义	默认值	应用于	继承性	IE	FF	W3C
1	font-family	字体选择属性。	用户代理决定	所有元素	有	3	1	1
2	font-size	字体大小属性。	medium	所有元素	有	3	1	1
3	font-style	字体样式属性。	normal	所有元素	有	4	1	1
4	font-variant	英文小型大写字母转换属性。	normal	所有元素	有	4	1	1
5	font-weight	字体加粗属性。	normal	所有元素	有	4	1	1
6	font	字体综合属性。	根据单个属性	所有元素	有	4	1	1

1.font-family

取值： [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit

说明：

• family-name:用于某个元素的字体名称或/及字体系列名称的一个优先表。
• generic-family:默认值：取决于浏览器。

CSS定义的五种通用字体系列

• serif:这些字体成比例，而且有上下短线。包括Times、Georgia和New Gentury Schoolbook。
• sans-serif:这些字体是成比例的，而且没有上下短线。包括Helvetica、Geneva、Verdana、Arial和Univers。
• monospace:不成比例的，每个字符的宽度都完全相同的字体。包括Courier、Courier new和Andale Mono。
• cursive:这些字体视图模仿人的手写体。包括Zapf Chancery、Author和Comic Sans。
• fantasy:其他字体。

注意：

• 推荐名称中有空格的字体或字体系列采加引号。
• 使用逗号分割每个值，并始终提供一个通用字体系列名称作为最后的选择。

2.font-size

取值： xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inherit

说明：

• xx-small、x-small、small、medium、large、x-large、xx-large:绝对大小关键字。
• smaller、larger:相对大小关键字。把 font-size 设置为比父元素更大或更小的尺寸。

注意：

• IE6及其之前的浏览器不允许调整font-size单位是px 的字体大小。
• 字体大小设置的实际上是字体的字符框的高度。字体大小继承的是计算值而非百分数。

3.font-style

取值： italic | oblique | normal | inherit

说明：

• italic:浏览器会显示一个斜体风格的字体。斜体字体通常定义为字体系列中的一个单独的字体。
• oblique:浏览器会显示一个字体的倾斜样式。
• normal:非斜体或倾斜体的常规竖直文本。

4.font-variant

取值： small-caps | normal | inherit

说明：small-caps:浏览器会显示小型大写字母的字体。

5.font-weight

取值： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

说明：

6.font

取值： [[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar | inherit

说明：

• caption:定义被有标题的控件使用的字体（比如按钮、下拉列表等）。
• icon:定义被图标标记使用的字体。
• menu:定义用于菜单，即下拉菜单和菜单列表使用的字体。
• message-box:定义被对话框使用的字体。
• small-caption:用于对小控件加标签。
• status-bar:定义被窗口状态栏使用的字体。

注意：

• font简写属性的前三个值可以任意顺序，font-size和font-family必须先后顺序出现在font声明中。
• 文本属性line-height可以在font-size值后面采用斜线分隔。line-height相对于font-size计算。