font-family就是字体，如果用户电脑里面没有这个字体，那么就会变成宋体。页面中，我们只使用微软雅黑，宋体，黑体，如果页面中需要其他的字体，那么需要切图。
font-family: "Arial", "宋体"; 我们需要先将英文字体写在前面，否则英文字体会出错。
行高可以用百分比。 font: 12px/200% "宋体";等价于font: 12px/24px "宋体";
同一个标签，根据用户的某种状态不同，有不同的样式，这就叫做“伪类”。伪类用冒号来表示，a标签有4个伪类：
a:link { color: red; } a:visited { color: orange; } a:hover { color: green; } a:active { color: black; }:link表示用户没有点击过这个链接的样式，:visited表示用户访问过这个链接的样式，:hover表示鼠标悬停的时候链接的样式，:active表示用户点击这个链接但是不松手的样式。
这四种状态在css中必须按照固定顺序写，如果不按照顺序，那么将失效。“爱恨准则”link，visited，hover，active（love，hate）。
.nav ul li a { display: block; width: 120px; height: 40px; } .nav ul li a:link, .nav ul li a:visited{ text-decoration: none; color: white; background-color: green ; } .nav ul li a:hover { background-color: red; font-weight: bold; color: purple; }a标签在使用的时候，我们一定要将a标签写在前面，伪类写在后面。a标签中，描述盒子：伪类中描述文字的样式、背景。（如上）
记住，所有的a都不继承text、font这类东西，因为a有自己的伪类的权重。
url()提供背景图的地址。
用途：
大背景图居中通栏banner背景图固定，内容可以滚动。
综合起来：
background: red url(1.jpg) no-repeat 100px 100px fixed等价于：
background-color: red; background-image: url(1.jpg); background-repeat: no-repeat; background-position: 100px 100px; background-attachment: fixed;相对定位就是相对自己原来的位置进行移动，也就是说，相对定位就是微调元素位置的，让元素相对自己原来的位置进行定位。
position: relative; left: 100px; top: 150px;先声明相对定位，然后调整位置。
相对定位不脱标，如图，第三章图片没有顶上去。
不脱标，老家留坑，形影分离
微调button的位置和input输入框对齐：
<style type="text/css"> .txt { font-size: 20px; } .btn { position: relative; top: -1px; left: 0; } </style> </head> <body> <p> <input type="text" class="txt" /> <input type="button" value="我是一个小按钮" class="btn" /> </p>绝对定位是脱标的，所示绝对定位后的元素，就可以设置宽高了。
绝对定位的参考点：
top，使用top定位时，绝对定位的参考点是文档的左上角，而不是浏览器窗口的左上角。bottom，使用bottom定位时，参考点是浏览器首屏（记住是首屏幕，也不是浏览器窗口）的左下角！而不是文档的左下角。一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈的这个元素为参考点。
1.子绝父相
<div class="box1"> <div class="box2"> <div class="box3"> <p></p> </div> </div> </div>如果box1相对定位，box2也相对定位，p绝对定位，那么将以最近的box1为参考点。
不一定是相对定位，任何定位都可以作为参考点
2.子绝父绝 3.子绝父固
工程商，子绝父相有意义，父亲没有脱标，儿子脱标在父亲的宽度范围内移动。
绝对定位的儿子，无视父亲的padding，直接视border内侧为参考点
就是相对浏览器窗口定位，页面如何滚动，这个盒子显示地位置不变。 position: fixed;
如图：
本来后面的生效，由于第一个box的z-index值大，所以第一个压住第二个。
