1.导入外联式：<link rel="stylesheet" type="text/css" href="../common.css"/>
2.宽高度属性： 像素（绝对） 百分比（根据窗口伸缩，相对上一级）
3.优先级：行内样式>内联样式>外联样式 （后定先用，若有重复则先用最后面的样式）
4.选择器
关联选择器：标签下的标签关联设置 .nav| .nav-wrap p{}|.nav .wrap a{} 组合选择器：多个标签一起定义 p a h1{} 伪元素选择器：例如a标签 a:hover{font-size:14px;color:red;} p:first-line:red;p标记的第一行 第一个字母设置样式 p:first-letter:red 5.文本： text-align:right left center;水平对齐 text-decoration:underline overline line-through 下划线 上划线 删除线 text-indent:10px;首行文本缩进 line-height:20px 行高 text-transform:capitalize 每个单词首字母大写 uppercase 全部大写 lowercase全小写 direction:文本方向 ltr左 rtl右 letter-spacing:10px字符间距 word-spacing:单词间距字体： font-size:10px;
font-family:'黑体';(字体使用：要保证别的电脑也有你用的字体，所以用一般电脑都有的字体，如果想用特殊字体，用图片代替) font-size:14px; font-weight:400（normal） 700(bold) 900(bolder)段落对齐方式： vertical-align:middle top bottom sub下标 super上标 例如设置表格里的字体显示方式<td style="vertical-align:middle/top/bottom">排版方式设置：
white-space:normal pre 原样输出 nowrap 不换行6.背景：
background-color:#fff 颜色 background-image:url() 图片 background-repeat:repeat-y;repeat-x;no-repeat 平铺 background-position:center(center center) top(top center)bottom(bottom center)right(right center) left(left center) background-attachment:fixed固定或scroll(默认)滚动背景设置组合写法：{background:#00ccff url(logo.png) no-repeat bottom right;}7.定位：
position:relative;top:20px;left:30px; 相对偏移，相对于文档流
position:absolute;top:20px;left:30px; 绝对偏移 从文档流中分离出去 例如：注册弹出窗口等 好处，不影响原有文档流 z-index 深度改变显示层8.鼠标样式
cursor:url("m.ani") 加载自己的样式文件 cursor:move 移动样式 text 光标样式 pointer 小手 crosshair 十字焦点光标 wait;等待9.列表样式 ul li(无序) ol(有序)
list-style-type:disc(实心圆) circle(空心圆) square(方块) none无 list-style-image 列表图片符号 list-style-position inside内部与所有文本同行 outside 外部与多行文本隔离10.滚动条样式设置(若文本超出标签，内容溢出，则使用滚动条显示)
overflow:visible(默认溢出) hidden scroll auto overflow:hidden 隐藏 scroll滚动条 overflow-x：hidden scroll水平滚动条 overflow-y:hidden scroll垂直滚动条 div{overflow:scroll;} 为一个div设置滚动条11.表格：
table-layout:automatic;表格会根据内容改变宽度 fixed;不根据内容长短改变宽度caption-side：top left| bottom设置表格标题的位置
border-spacing:10px 20px td单元格离表格左右10px 上下20px
border-collapse:collapse td单元格和表格边框合并(忽略 border-spacing:20px 100px;) td:hover{color:red;} 鼠标放到td里文本变色12.边框：
border:solid 1px #ccff66;
border:none 隐藏边框 border-width:1px border-style:solid 实线 dotted 点虚线 dashed 块虚线 border-color: border-top-width:13.为元素选择器
a:link{} 默认样式 a:hover{} 鼠标放上后样式 a:visited{} 访问后样式 a:active{} 按下时样式p:first-letter{}p标记中第一个字符的样式
p:first-line{}p标记中第一个字符的样式h1:first-child{color:red;} 文档中的第一个h1标签字体为红色
div.lt>h1:first-child{color:red;} class为lt的div中的第一个h1标签的字体为红色代码： <div class="lt"> <h1>111111</h1><h1>456987</h1></div> <div class="lt"> <h1>222222</h1><h1>456987</h1></div>效果：111111和222222变为红色14.文本框
{border:#00F solid 2px; background:#fff color:red;}边框 背景色 输入的文本的显示颜色一条线的文本输入框 {border:none;border-bottom:#ccc solid 1px;}只显示底部一条边框
15.按钮样式定义
{width:100px;height:50px;background:#930 ;background-image:url()border:none;color:#6F0;}宽 高 背景色 边框 字体颜色
.ip{width:242px;height:38px;background-image:url(login-btn.png);border:none;color:#6F0;}.ip_hover{border:solid 2px #900;width:242px;height:38px;background-image:url(login-btn.png);color:#6F0;cursor:pointer;}cursor:pointer;鼠标放上去后显示一个手型cursor:crosshair;十字焦点型<input class="ip" type="submit" value="" οnmοusemοve="this.className='ip_hover'" οnmοuseοut="this.className='ip'"/>16.矩形剪裁：对图片进行裁切显示
clip：rect(top right bottom left) auto 上 右下左 clip:rect(10px 30px 50px 20px); 17.显示隐藏属性 visibility:visible hidden(不隐藏空间位) display:none 同时隐藏空间位 18.display属性 display：block inline inline-block 行内块元素 list-item(转换为列表级样式如:转换h1) none(隐藏) float:left right none例如：分页a超链接转换成块元素 设置间距