样式三种使用方式
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">//""中不能有空格#####jstl的uri也是
</head>
内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
<p style="color: red; margin-left: 20px">
第一节：id,可以被js+css共用
选择器：
元素选择器
id选择器
类选择器
派生选择器-#header p{...}
权重
style=1000
id=0100
class,属性选择符(形如[attr=”"]等)=0010
元素=0001
权重按十进制理解，比如body div p为0003小于.a的0010
p.a与div .a权重一样高，后面的覆盖前面的。
p.a表示<p class="a">，用p .a无效（p与.a为父子关系是才有效）
1,例子1
<style>
h1.one{
visibility:visible;
}
h1.two{
visibility:visible;
position:relative;
left:200;
}
h1.three{
visibility:hidden;
left:10;
}
</style>
<h1 class="one">标题一</h1>
<h1 class="two">标题 二</h1>
<h1 class="three">标题 三</h1>
2,滤镜：
使用 filter 属性，必须指定元素的宽度。
向文本和图像添加更多的样式效果。比如：发光，模糊，阴影，波浪等
3,z-index层次序
<style>
img.x{
position:absolute;
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
</style>
<h1>这是一个标题小心覆盖</h1>
<img class="x" src="a.gif" tppabs="#"/>
<p>默认 z-index 是 0。Z-index 1 有更高的优先级。Z-index -1 有更低的优先级</p>
4,background
body{
background-attachment: scroll;//scroll默认情况//fixed-背景不随页面滚动条滚动
background-image: url("b.jpg");
background-repeat: no-repeat;//repeat-x横向填充
background-position:bottom;
}
5,innerHTML
修改一个元素的内容,不是追加内容，且元素的样式style不变
火狐不支持innerText故不要用innerText
6, onkeydown 按下键盘。 onkeypress 按压键盘。onkeyup 松开键盘。
//必须是如<input type="text"/>能接受键盘输入的，才有效。
onload
IE:页面完成加载。
ff:页面加载时。
7，经验：
css设置默认值时，不用加前缀直接用比如：
td{
border-bottom:1px solid #B7BDC3;
}
#coupon_table.tr3点前面必须有空格#coupon_table .tr3
8，Readonly-vs-disabled
Readonly只针对input(text / password)和textarea有效，
disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。元素的值不会被GET/POST传递
9，diplay-vs-visbility?
10， <div style="overflow: auto;height:500px;width:300px">
11，input--file只读
onkeypress="event.returnValue=false;" type="file" 只读，
id,class,标签3种选择器
12，指定作用范围################################
#couponDetail li{
width:33%;
float:left;
text-align:center;
}
#couponDetail li.title{
font-weight:bold;
}
.main li a{//混合嵌套
}
.main li a,.hmain li a{//2个class共用
}
border-collapse:collapse;//相邻边被合并
background-image:url("../img/line.jpg");
background-color:#eeeeee;
可以相互覆盖，后来者覆盖先来的
可以连续用2个并列的class--<div class="contentIn content1">
clear left;清除继承的left修饰
-------------------实例------------------------------
1，图文混排
<div><img/>...</div>对
<img/><div>...</div>错
当子元素width,height固定时，可以这样居中：
position: absolute;left: 50%;top: 50%;margin-left: -380px;margin-top: -200px;