//CSS代码可以放置的位置----------------------------------------------------------
1.外部文件.css
<link type="text/css" rel="stylesheet" href="ui/css/css.css" />
2.放在当前文档内
<style type="text/css"></style>
3.放在HTML标签内部
<div style="属性名:属性值;属性名:属性值;"></div>
//放在网页内部的CSS标签写法-------------------------------------------------------
<style type="text/css">
.class名|#id名|html标签名 {
属性名:属性值;
}
</style>
//并行写法-----------------------------------------------------------------------
.test1, .test2, .test3 {}
//向内部索引---------------------------------------------------------------------
.样式名|#ID名|标签名 .样式名|#ID名|标签名{}
//同一个标签里写多个样式名-------------------------------------------------------
<div class="test1 test2"></div>
//常用样式属性 布局--------------------------------------------------------------
border:1px solid red; 记住以下值：solid--实线 dashed--虚线 dotted--虚线
边框一共有四个边，可以分别控制
width: 300px;
height: 100px;
background-color: yellow;
background-image:url();
相关扩展属性：-top:上，-right右, -bottom底部 -left左
块级元素-------------------------------------------------------------------------
块级元素一个最重要的特点就是：独占一行
非块级元素（内联元素）最重要的特点：都在同一行。
<div><p><h1-h6>
display: block(块级化)|none（隐藏）|inline（内联）|inline-block（块级并且在同一行）;
内联元素（非块级元素）inline
<a><span><b><strong>
浮动对齐-------------------------------------------------------------------------
float:left|right;一般情况下，配合宽高才能达到一定的效果
清除浮动元素
clear:left|right|both(两端);一般配合float使用，both一般单独使用
防溢出
overflow:hidden|auto|scroll;auto一般情况下，可以根据标签大小自动显示滚动条
overflow-x,overflow-y
[技巧]
display,(float|clear),overflow这些属性，一般会同时出现。可以有效地防止部分浏览器样式不兼容现象
//盒子原理 [间距]----------------------------------------------------------------
margin 外边距
--margin:10px;四边
--margin:10px 15px 20px 5px;上右下左
--margin:10px 15px; 上下 左右
--margin-top|margin-right|margin-bottom|margin-left
--margin:5px auto; 自动居中，一般情况下，这个要居中的元素，必须有宽度。
padding 内边距 用法和margin一样
margin和padding只会产生空隙，占位，它们是透明的。
margin:10px auto;
//文字--------------------------------------------------------------------------
font-size:60px;
color:red;
font-weight:bold; 100-900中间的任何一个整百数值，400代表正常粗细，没有单位
font-style: italic;
line-height: 60px;
font-family: 黑体,Arial;
text-align: right|left|center;
text-decoration: underline|overline|line-through|none;
letter-spacing: 20px;字间距
word-wrap:normal | break-word 文本断开换行属性
word-break:break-all | keep-all 单词换行属性
vertical-align:sub|super|;文件垂直对齐,M的平方
layout-flow:vertical-ideographic;文本垂直排列
//列表元素（ul,ol,dl） ----------------------------------------------------------
margin: 0;
padding:0;
margin-left: 40px;
list-style: none|armenian(圆点)|circle(空心圆点)|decimal(数字，最大值999，多于999行以后，会自动变成001)|lower-alpha(英文小写字母)|url(图片地址);
//伪类--------------------------------------------------------------------------
伪类的标志是一个冒号，几乎任何HTML元素都有伪类，但是IE6只认识A标签的伪类
:hover|:link|:active|:focus|:lang
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
:focus 伪类在元素获得焦点时向元素添加特殊的样式
:lang 伪类向带有指定 lang 属性的元素添加样式。
//鼠标指针形状------------------------------------------------------------------
cursor:pointer;
//背景 [CSS切图]----------------------------------------------------------------
background-image: url(/ui/images/bd.gif);
background-color: #FFCC00;
background-repeat: no-repeat|repeat-x|repeat-y;
background-position: -50px -50px;
background-position:left bottom; left|right|center|top|bottom
background: url(/ui/images/002.png) no-repeat -100px -150px;配合宽高
//绝对定位和相对定位-------------------------------------------------------------
position: absolute;
z-index: 100;
left: 100px;
top: 100px;
--------------------
position: relative;父元素
position: absolute;子元素
//滤镜--------------------------------------------------------------------------
filter:alpha(opacity=50);
//通配符------------------------------------------------------------------------
*{}
body{字体，大小，原始颜色，背景}
a{字体，大小，链接色，是否要下划线}
img{border:0;}
例如：
*{
margin: 0;
padding: 0;
}
body{
font-family: 宋体,Arial;
font-size: 12px;
color:#000;
background-color: #FFF;
}
a{
font-size: 12px;
color:REd;
_color:#000;
text-decoration: none;
}
img{border:0;}
//兼容性------------------------------------------------------------------------
*写在属性前面（IE6认识）
_写在属性前面（IE6认识）
>写在属性前面（IE6认识）
!importent写在属性值后面（IE6认识）
上面四种用其中一种即可
<!--[if lte IE 6]>
HTML标签
<![endif]-->
//浏览器-------------------------------------------------------------------------
IE6,7,8,9
火狐
google
opera
Mosaic
Safari
//样式命名及HTML语义
