1、在html中引入css的方法
1.行内式
行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。
例如：<h1 style="属性名称:属性值;">这是一行文本/h1>
2.嵌入式
嵌入式将对页面中各种元素的设置写在<head></head>之间。
例如： <head>
<style type="text/css">
h1{
color:white;
background-color:blue;
}
</style>
</head>
3.导入式
<style type="text/css">
@import"mystyle.css"; >>要有style标签，import引用
</style>
4.链接式
和导入式差不多，都是引用外部样式表。导入式：先加载html在加载css。 链接式：同步加载
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" /> >>stylesheet样式表，rel指定你引入的是样式表
</head>
外部css样式表，后缀名为.css
@charset "UTF-8" >>编码格式，"UTF-8"用于国际，"GBK"用于国内
/*css*/ >>css样式表的注释
p {
color:red;
background:silver;
}
h1 {
color:white;
font-size:25px;
}
...
5.标签选择器
一标签的名字作为css样式的名字，比如：h2，p
标签选择器会控制页面所有同类标签的样式，不能做到同样的标签显示不同的样式
6.类别选择器
在css样式表用"."声明，比如：.p1{...}; >>class可以多次引用
以标签的css属性为基础来做的一个选择器
<p class="p1">...</p>
7.ID选择器
在css样式表用"#"声明，比如：#p1{...}; >> id一个页面只可以使用一次
<p id="p1">...</p>
8.交集选择器
1 <html> 2 <head> 3 <title>交集选择器</title> 4 <style type="text/css"> 5 p{color:blue;} 6 .class12{color:green;} 7 p.class12{color:red;} 8 </style> 9 </head> 10 <body> 11 <p>p段落</p> 12 <p class="class12">交集段落</p> <!--只有是<p>标签并且class属性和交集处一样才能应用到交集的样式--> 13 <h3 class="class12">h3段落</h3> <!--这里不是<p>标签，所以应用的是类别选择器处的样式--> 14 </body> 15 </html>
9.并集选择器
并集选择器用","隔开标签
1 <html> 2 <head> 3 <title>并集选择器</title> 4 <style type="text/css"> 5 p,h1,h4,a{color:silver;font-size:20px;} <!--同时给多个标签添加样式--> 6 </style> 7 </head> 8 <body> 9 <p>p段落</p> 10 <h1>h1段落</h1> 11 <h4>h4段落</h4> 12 <a href="#">超链接</a> 13 </body> 14 </html>
10.后代选择器
后代选择器用空格隔开，找父元素下的子元素的子元素添加样式
1 <html> 2 <head><title>后代选择器</title> 3 <style type="text/css"> 4 ol,h1,p{font-size:50px;} 5 ol li li{color:red;} 6 ol li ul .class123{color:skyblue;} 7 ol #id123{color:purple;} 8 p b{color:blue;} 9 </style> 10 </head> 11 <body> 12 <ol> 13 <li>无序列表 14 <ul> 15 <li>子列表</li> 16 <li class="class123">子列表</li> 17 <li>子列表</li> 18 </ul> 19 </li> 20 <li>无序列表</li> 21 <li id="id123">无序列表</li> 22 </ol> 23 <h1>h1段落</h1> 24 <p><b>加粗段落</b></p> 25 </body> 26 </html>
css的层叠性：行内样式>ID样式>类别样式>标记样式
原文：http://www.cnblogs.com/hejincheng/p/5233285.html