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="" onmousemove="this.className=‘ip_hover‘" onmouseout="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超链接转换成块元素 设置间距