标签：
一、CSS背景
1.背景颜色
p {background-color: gray;}
background-color不能继承，其默认值是transparent。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
2.背景图像
(1)背景图像: body {background-image: url(/Images.02.jpg); }
(2)背景重复: background-repeat: repeat-y;
(3)背景定位: 可通过关键字、百分数值及长度值来进行定位。
关键字: top right使图像放置在元素内边距区的右上角根据规范: 位置关键字可以按任何顺序出现，只要保证不超过两个关键字，一个对应水平方向，一个对应垂直方向。如果只出现一个关键字,
则认为另一个关键字是center。
百分数值:
假设希望用百分数值将图像在其元素中居中:
body
{
background-image: url(/Images/02.jpg);
background-position: 50% 50%;
}
这会导致图像的中心与元素的中心对齐。换句话说，百分比数值同时应用于元素和图像。也就是说图像中描述为50% 50%的点与元素中描述为50% 50%的点对齐。
假设你想把图像放在左上角的位置，可以这样声明:
body
{
background-image: url(/Images/02.jpg);
background-position: 0% 0%;
}
长度值: 长度值解释的是背景图像距元素内边距区左上角的偏移。比如，如果设置值为50px 100px,图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上:
(4)背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。可以通过设置background-attachment属性防止这种滚动。
二、CSS文本
1.缩进文本(可以继承)
通过使用text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
(1)使用负值
p{text-indent: -5em;}
不过在为text-indent设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距。
(2)使用百分比值
百分相对于缩进元素父元素的宽度。
2.水平对齐
text-align: left 、 center 、 right 、justify
3.字间隔
word-spacing
4.字母间隔
letter-spacing
5.字符转换
text-transform属性处理文本的大小写。这个属性有4个值:
none 、 uppercase 、lowercase 、capitalize
6.文本装饰
text-decoration: none 、 underline 、 overline 、 line-through 、 blink
7.处理空白符
white-space:会影响到用户代理对源文档中的空格、换行和tab字符的处理。
从某种程度上讲，默认的XHTML处理已经完成了空白符处理:它会把所有空白符合并为一个空格。
(1)pre
如果white-space属性的值为pre,浏览器将注意额外的空格，甚至回车。
(2)nowrap
它会防止元素中的文本换行，除非使用了一个br元素。
三、CSS字体
1.CSS字体系列
在CSS中，有两种不同类型的字体系列名称:
通用字体系列:拥有相似外观的字体系统组合(Serif、Sans-serif、Monospace、Cursive、Fantasy)
特定字体系列:具体的字体系列
2.字体风格
font-style属性最常用于倾斜文本。
该属性有三个值:normal 、italic 、oblique
3.字体变形
font-variant属性可以设定小型大写字母。
4.字体加粗
font-weight设置文本的粗细
关键字100~900为字体指定了9级加粗度。数字400等价于normal，而700等价于bold。
5.字体大小
如果没有规定字体大小，普通文本的默认大小是16像素(16px = 1em)。
(1)使用em来设置字体大小
W3C推荐使用em尺寸单位。1em等于当前的字体尺寸。如果一个元素的font-size为16像素，那么对于该元素，1em就等于16像素。在设置字体大小时，em的值会相对于父元素的字体大小改变。
可以使用下面这个公式将像素转换为em: pixels / 16 = em
(注:16等于父元素的默认字体大小，假设父元素的font-size为20px,那么公式需改为: pixels / 20 = em)。
(2)结合使用百分比和em
body{ font-size: 100%; }
h1{ font-size: 3.75em; }
四、CSS表格
1.表格边框 table ,th, td
{
border: 1px solid blue;
}
请注意，上例中的表格具有两线条边框。这是由于table、th、td元素都有独立的边框。如果需要把表格显示为单线条边框，请使用border-collapse属性。
2.折叠边框
table
{
border-collapse: collapse;
}
3.border-spacing
该属性指定分隔边框模型中单元格之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非border-collapse被设置为separate,否则将忽略这个属性。
4.caption-side 规定表格标题的放置方式
caption
{
caption-side: bottom;
}
5.empty-cells 规定空单元格的处理方式
table
{
empty-cells: hide;
}
标签：
原文地址：http://www.cnblogs.com/JustYong/p/5045998.html
