-
所有背景属性都不能继承。
背景颜色（background-color）
背景图像（background-image）
背景重复（background-repeat）
- repeat-y repeat-x no-repeat
背景定位（background-position）
- top、bottom、left、right 和 center
- 保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
- 如果只出现一个关键字，则认为另一个关键字是 center。
背景关联（ background-attachment）
声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响
<head> <style type="text/css"> body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed <!--background-attachment 属性的默认值是 scroll，背景会随文档滚动。--> } </style> </head>
-
数值
百分数值
默认值是 0% 0%（中心点），在功能上相当于 top left。
长度值
偏移点是图像的(左上角)
-
CSS 文本属性可定义文本的外观。
缩进文本：使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值（加一个内边距）。可继承
p {text-indent: -5em; padding-left: 5em;} div {width: 500px;} p {text-indent: 20%;} <!--缩进值是父元素的 20%，即 100 个像素：-->水平对齐：text-align 属性，会影响一个元素中的文本行互相之间的对齐方式
left、right 、 center 、justify（两边对齐）
-
Text-align:center 与<CENTER>的区别
后者不仅影响文本，还会把整个元素居中
字间隔；word-spacing 属性可以改变字（单词）之间的标准间隔
letter-spacing 属性字符或字母之间的间隔的修改
<html> <head> <style type="text/css"> p.left {word-spacing: normal;} p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} </style> </head> <body> <p class="spread">This is some text. This is some text.</p> <p class="tight">This is some text. This is some text.</p> <p class="left">This is some text. This is some text.</p> </body> </html>
字体转换：text-transform 属性处理文本的大小写
- None 对文本不做任何改动
- uppercase 将文本转换为全大写字符
- lowercase 将文本转换为全小写字符
- capitalize 只对每个单词的首字母大写
文本装饰：
- none 关闭原本应用到一个元素上的所有装饰
- underline 对元素加下划线
- overline 在文本的顶端画一个上划线
- line-through 在文本中间画一个贯穿线
- blink 让文本闪烁
-
字体
- font-family 属性 定义文本的字体系列
h1 {font-family: Georgia, 'New York', serif;} <!--serif是候选字体-->当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号
- font-style 属性最常用于规定斜体文本。
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} <!--italic和oblique一样，都是倾斜-->font-size 属性设置文本的大小
-
普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
- 使用像素来设置字体大小
h2 {font-size:40px;} p {font-size:14px;}-
使用 em 来设置字体大小(1em 等于当前的字体尺寸)
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */ <!--16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em--> <!--结合使用百分比和em--> <!--在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：--> body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
-
链接
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
文本修饰：text-decoration 属性大多用于去掉链接中的下划线
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}背景色：
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} -
列表
ul {list-style-type : square}<!--列表类型--> ul {list-style-image : url(xxx.gif)}<!--列表图像--> ul {list-style-position: inside;}<!--列表位置--> -
表格
- 表格边框，boder属性
table { border-collapse:collapse;<!--表格单边框--> } <!--表格边框、内边距：padding、--> table, td, th { border:1px solid black; } <!--表格宽度和高度--> table { width:100%; } th { height:50px; } <!--表格对齐方式--> td { text-align:right; } <!--垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：--> td { height:50px; vertical-align:bottom; } <!--表格颜色--> table, td, th { border:1px solid green; } th,td<!--如果只有th，只有第一行有颜色--> { background-color:red; color:white; } -
轮廓
outline 属性规定元素轮廓的样式、颜色和宽度。
p { border:red solid thin; outline:#00ff00 dotted thick; } outline-style <!--solid dotted--> outline-color outline-width<!--3px-->
