块级标签:block ` div p ul li table
行内标签:in line span
A：在标签中的style属性里书写css代码
例：<div style="color:red;" >大家好</div>
B：把css代码写到head中的style标签里，可提高css代码的重用性.
例：
<style type="text/css" >
div{
color:red;
}
</style>
C：导入外部css，在ie中这种方式导入外部css文件,最多导入33个.这种导入方式是输入css代码的范畴.
例：
<style type="text/css" >
@import url(div.css);
</style>
D：导入外部css，输入HTML代码的导入方式.导入数量没有上限.
与css中import的方式的不同:
link加载步骤:
1 加载所有html标签
2 加载css
3 出效果
import 步骤:
1加载所有html标签
2.加载css
3.加载外部css
4.出效果
区别1:link效率更高一些
区别2:link加载的css可直接受控于js
import加载的css不能被js所控制.
例：
A：标签选择器:直接写标签名
覆盖原则:
1由内到外
2由下到上
例：
<style type="text/css" >
div {
color:red;
}
</style>
B：class选择器:.class名称，
相同元素不同效果时使用.
例：
<style type="text/css" >
.one{
color: red;
}
</style>
. . . . . .
<body><div class="one" >大家好</div></body>
C ：id选择器:#id名称
注意:给html元素加id属性时,要保证id的唯一性.
相同class不同效果时使用.
例：
<style type="text/css" >
#div01{
color: red;
}
</style>
. . . . .
<body>
<div class="one" >大家好</div>
<div id="div01" class="one" >大家好</div>
<span class="one" >大家好</span>
</body>
D：复合选择器:选择器1,选择器2,.....
可以同时应用多个选择器.
例：
<style type="text/css" >
div,span{
color:red;
}
</style>
. . . . . .
<body>
<div >大家好</div>
<div id="div01" >大家好</div>
<span >大家好</span>
</body>
E ：后代选择器:祖先元素 后代元素
//将所有div中的span标签变成红色
例：
<style type="text/css" >
div span{
color:red;
}
</style>
. . . . . . .
<body>
<span>span</span>
<div>大家好<div>span<span>span</span></div>大家好</div>
</body>
F：子元素选择器:父元素>子元素
//将所有div中的子span标签变成红色
例：
<style type="text/css" >
div > span{
color:red;
}
</style>
. . . . .
<body>
<span>span</span>
<div>大家好<span>span</span>大家好<span>span</span></div>
</body>
G：相邻兄弟选择器:标签+相邻标签
注意: 只选择相邻的下个兄弟,也就是2弟.//与span相邻的div变红
例：
<style type="text/css" >
span + div{
color:red;
}
</style>
. . . . . .
<body>
<span>span</span>
<div>大家好<span>span</span>大家好<span>span</span></div>
<span>span</span>
</body>
H：属性选择器:[属性名称]
例：
<style type="text/css" >
[href]{
color:red;
}
</style>
. . . . . .
<body>
<a href="#">问世间情为何物!</a><br/>
<a>问世间情为何物!</a><br/>
</body>
I：伪类选择器:
1.从来没点过 :link 向未被访问的链接添加样式。
2.点的时候 :active 向被激活的元素添加样式。
3.点过的效果 :visited
4.鼠标指上去的时候 :hover 当鼠标悬浮在元素上方时，向元素添加样式。
例：
<style type="text/css" >
a:link {
color:pink;
}
a:active{
color:black;
}
a:hover{
color:white;
}
a:visited{
color:green;
}
</style>
. . . . .
<body>
<a href="01-标签类型.html">大家好</a><br/>
</body>
原文地址：http://blog.csdn.net/u013033038/article/details/44522223
