【CSS属性大全】

CSS的文本属性

文本属性-字体风格

font-style：设置字体风格；

常用的属性：normal(常规字体)、italic(斜体)、oblique(倾斜)；

通常italic和oblique在浏览器上看上去是一样。

文本属性-字体粗细

font-weight：设置字体粗细;

常用的属性：normal(正常)、bold(加粗)、bolder（特粗）、lighter（细体）。

文本属性-字体大小

font-size：设置字体大小；

常用的单位：px（像素），em（相对倍数），百分比；

网页中的最小字体大小是：12px；

网页中的默认字体大小是：16px；

页面字体大小的设置都使用偶数、整数。

文本属性-字体格式

font-family：设置字体格式；

常用的中文字体：黑体-SimHei、宋体-SimSun、微软雅黑-Microsoft YaHei；

常用的英文字体：Arial、sans-serif(无衬线体)。

font的复合书写顺序

font：style  weight  size  family；（属性必须全部都有才能合写）

例如：font：italic bold 12px "Microsoft YaHei";

font的书写格式与要求

复合书写时，字体大小和字体必须写，不然无效；

复合书写顺序不能变换；

字体设置时，英文字体在前，中文字体在后；

分开书写视具体需要而定。

单行文本垂直居中

行距line-height(行高) : px / normal(正常)；

用于单行文本垂直居中。

颜色的设置

color : 颜色属性值；

颜色属性包括：单词、rgb、rgba、6位/3位16进制；

透明颜色的设置：

opacity：数值取值0-1之间，对应透明到不透明；（会同时设置背景颜色、字体颜色、边框颜色）

rgba() : a即是alpha （不透明度）,取值在0-1之间，透明同上；

IE8及更早的浏览器支持替代的filter属性，例如：filter: Alpha(opacity = 数值);数值取值0-100之间;

文本对齐方式

水平方向text-align :

center(中间对齐)、left(左对齐)、right(右对齐)、justify(两端对齐)；

垂直方向vertical-align：

top(顶部)、bottom(底部)、middle(中间对齐)；

此属性除了table标签外其他标签支持的不是太好，只做了解，不建议使用。

文本修饰

text-decoration : 属性值；

属性值：

none(无修饰，默认值)；

underline(下划线)；

overline(上划线)；

line-through(删除线)。

文本缩进

text-indent : 属性值；

属性值：

常用单位px或者em；

em指文字倍数；

首行缩进设置2em即可。

单词间距及字母间距

word-spacing :normal(默认值)、设置正负数值；

letter-spacing :normal(默认间隔)、设置正负数值；

断句方式

word-wrap :break-word; 仅块元素内容在边界换行；

word-break :break-all; 用于处理单词折断；

背景属性

背景属性—颜色

background-color：背景颜色（颜色方法）；

颜色的书写方法：

#16进制数；

英文单词；

rgb( )；

rgba( )。

transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

背景属性—图片

background-image：背景图片(存放url路径)；

注意图片的路径地址的读取。

背景属性—重复

background - repeat：背景图重复；

背景重复：

no-repeat（不重复）；

repeat-x（在x轴上重复）；

repeat-y（在y轴上重复）。

背景属性—定位

background - position：背景图定位；

背景定位：x值  y值（两者都写，用于定位）；

背景属性—滚动

background - attachment：背景图滚动；

背景滚动：

scroll（随着滚动而滚动）；

fixed（不随着滚动而滚动）。

复合属性background

background : color url( ) repeat position ；

没有的属性可以省略不写。

背景图合并的原理：

把本网站用的多张背景图都合并到一张背景图上，利用CSS中的 background-position 属性去进行图片的定位。用来加快浏览器的显示速度。

背景图合并的优势：

使用背景图合并技术，可以达到减少图片数量，从而减少HTTP请求的目的，对网站加速有着举足轻重的作用。