1、HTML，CSS,JavaScript的关系
1、html是网页内容的载体，CSS样式是外观控制，javaScript是行为，是实现网页特效效果。
2、CSS叫做层叠样式表，由于手机对H5和CSS3支持效果好，所以在手机端开发经常会使用到新的按本的CSS。
3、为什么要使用CSS？
（1）CSS简化相关HTML的标签，网页体积小，下载快
（2）解决内容与表现分离的问题
（3）更好的维护网页，提高效率
2、CSS样式规则
1、CSS规则由两个部分组成，选择器，声明。
2、CSS引用，CSS的引用要写在<head></head>标签当中，使用下面的方式去编写CSS的样式
<style type="text/css">
CSS样式
</style>3、很多不同标签有相同的属性，可以将标签并排写在一起：
<style type="text/css">
p,h1,h2,h3,h4{color:red;}
</style>4、CSS的注释方法：/*注释语句*/
3、CSS使用方法
1、CSS的使用有4种，行内样式（内联样式），内部样式表（嵌入样式），外部样式，导入表。
3.1、CSS行内样式(不建议大量使用)
1、在开始标签内添加style样式属性，比如说
<p style="color:red;">内容</p>3.2、CSS内部样式
1、将样式写在<head></head>标签当中。
<style type="text/css">
CSS样式
</style>3.3、CSS外部样式
1、外部样式表就是把CSS样式代码写在独立的一个文件中，扩展名：CSS文件名.css
2、外部文件的引入：href表示引入的外部文件的路径，可以是绝对路径，也可以是相对路径，rel表示定义了文档和连接的一个关系是stylesheet，type表示内容是样式表,值得注意的就是link也要放在<head></head>标签中。
<head>
<link href="XXX.css" rel="stylesheet" type="text/css">
</head>3.4、CSS导入式
1、@import "外部CSS样式"，需要写在style中，语法规则如下：
<style type="text/css">
@import url(css.css)
</style>总结，四种方法的使用和选择：通常使用的是link方法，方便CSS和html的结合和修改
4、CSS使用方法的优先级
5、CSS选择器
1、CSS选择器包括：标签选择器，类选择器，ID选择器，全局选择器，群组选择器，后代选择器。
5.1、标签选择器
1、以HTML标签作为选择器：
/*p标签样式*/
p{
color:blue;
font-family:"隶书";
}
h1{color:red;}5.2、类选择器
1、因为标签选择器如果将一个标签的样式写好，那么整个容器的所有该标签都用的这个样式，但是我们相同的标签需要不同的样式的时候，我们就需要使用类选择器。
2、需要做的就是：（1）为HTML标签添加class属性。（2）通过类选择器来为具有此class属性的元素设置CSS样式
<!DOCTYPE html>
<html>
<head>
<title>css_base</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.special{
color:blue;
}
.red{
color:red;
}
</style>
</head>
<body>
<p class="red">CSS层叠样式</p>
<p class="special">定义HTML内容在浏览器中的显示样式</p>
</body>
</html>
我们在内部样式中写了两个类，在相同的<p>标签中分别使用的不同类，以此达到我们相同标签使用不用样式的效果。
3、不同标签使用相同的类选择器的解决方法：使用 标签.类名{...}的方法
<!DOCTYPE html>
<html>
<head>
<title>css_base</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.special{
color:red;
}
p.special{
font-size:60px;
}
</style>
</head>
<body>
<h1 class="special">CSS层叠样式</h1>
<p class="special">定义HTML内容在浏览器中的显示样式</p>
</body>
</html>
注意的是，.special这个类的样式对所有class为special的标签都有效，而p.special只对class为special的<p>标签有效，也就是说，上面的代码中h1只有color：red这个样式，而p有color:red和font-size:60px两个样式。
4、同一元素可以设置多个类，之间有空格隔开。
<p class="special font">定义HTML内容在浏览器中的显示样式</p>5.3、ID选择器
1、ID选择器和类选择器一样，只是需要给HTML标签添加id的属性，并在书写样式的时候使用#，如下所示
<!--为HTML标签添加ID属性-->
<p id="p1">内容1<p>
<p id="p2">内容2<p>
<!--使用ID选择器来为具有此ID的元素设置CSS样式-->
<style type="text/css">
#p1{color:red;}
#p2{color:blue;}
</style>2、但是注意，id选择器不能使用在不同的标签上，同样，一个标签也不能使用多个ID选择器。和身份证一样是唯一的，唯一是指不同的人不能拿同一张身份证，同样，一个人也不能拿不同的身份证。
5.4、群组选择器
1、很多选择器具有相同的属性，我们就可以将它们写在一起。
p,h1,h2,h3{font-size:30px;}
p.special,#three,h1{font-size:50px;}2、特别注意的是：class和id的值是区分大小写的。
5.5、全局选择器
对所有标签设置样式：使用 *{ 样式 } 的方法，这种方法要谨慎使用，通常是在代码的最开始，对边距等属性进行处理。
*{
color:blue;
}6、后代选择器
1、使用后代选择器，需要使用空格隔开，比如说这样：就是说p标签中的em标签的样式
p em{....} 2、上面的是对所有p标签下的em标签都改变了样式，现在我们只对一些固定class的标签制定样式：下面这样就是对class为special的h1标签中的em标签进行样式的修改
//样式
h1.special{color:orange}
//内容
<h1><em>CSS</em>是什么</h1>3、由于后代选择器书写方式，造成写法的多样性，我们要熟练识别
p a em{....} /*p标签中a标签中的em标签*/
#p1 em{....} /*id为p1标签下的em标签*/
p.red a em{....} /*class为red的p标签中的a标签中的em标签*/4、伪类
那么我们现在写一个小的Demo来看看这个伪类的样式使用：
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
a:link{color:blue}
a:visited{color:gray}
a:hover{color:green}
a:active{color:orange}
p:hover{color:red}
p:active{font-size:20px}
</style>
</head>
<body>
<a href="http://www.imooc.com" target="_blank">CSS使用方法</a>
<p>慕课网</p>
</body>
</html>5、现在我们想对同一个标签实现不同的伪类样式的实现：通过对标签设置不同的类来实现。或者通过套用不同的外部标签
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
a.one:link{color:blue}
a.one:visited{color:gray}
a.one:hover{color:green}
a.one:active{color:orange}
a.two:link{color:red}
a.two:visited{color:blue}
a.two:hover{color:yellow}
a.two:active{color:orange}
</style>
</head>
<body>
<a href="http://www.imooc.com" target="_blank" class="one">CSS使用方法</a>
<a href="http://coding.imooc.com" target="_blank" class="two">CSS使用方法</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
p a:link{color:blue}
p a:visited{color:gray}
p a:hover{color:green}
p a:active{color:orange}
div a:link{color:red}
div a:visited{color:blue}
div a:hover{color:yellow}
div a:active{color:orange}
</style>
</head>
<body>
<p><a href="http://www.imooc.com" target="_blank" >CSS使用方法</a></p>
<div><a href="http://coding.imooc.com" target="_blank" >CSS使用方法</a></div>
</body>
</html>两者都可以实现对同一个文件下不同链接设置不同样式的效果。
7、CSS的继承和层叠
1、父元素设置样式，子元素可以继承部分CSS属性，这样我们可以降低CSS代码的复杂度。
2、我们来写一段简单的代码来说明一下：下面的p标签定义了red的样式，而span是在p标签里面的，它继承了p标签的color属性，所以也是红色的，那么div标签定义了红色边框的样式，div中还有div标签，然而里面的div同样有红色的边框，这是层叠。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
p{color:red;}
div{border:1px solid red;}
</style>
</head>
<body>
<div>
<p>css<span>继承</span></p>
<div>css层叠</div>
</div>
</body>
</html>3、css层叠：可以定义多个样式，不冲突时，多个样式可以层叠为一个，冲突的时候按照不同的样式规则优先级应用样式。这句话什么意思，比如说下面的代码：
h1{color:red;}
h1{color:blue;}
/* 同时定义了同一个标签的同一属性，按照就近原则，应该是蓝色*/
h1{color:red;}
h1{font-size:12px;}
/*同一标签的不同属性分别定义，可以层叠在一起，即两个不同的样式都起作用*/8、CSS优先级总结
1、根据上面的规则我们来看一段代码，可以看到，权值决定样式，谁的权值大，就用谁的样式，权值相同就使用就近原则，如果没有行内样式，那么！important的权值最大。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
*{color:black;}/*权值0*/
b{color:purple;}/*权值1*/
p b{color:yellow;}/*权值2*/
p b{color:write !important;}/*权值无穷*/
.classblue{color:blue;}/*权值10*/
div #test2 b{color:gray;}/*权值102*/
#test1 p b{color:orange;}/*权值102*/
div p .calssblue{color:red;}/*权值12*/
</style>
</head>
<body>
<div id="test1">
<p id="test2">所谓<b class="classblue" style="color:pink;">CSS优先级</p>
</div>
</body>
</html>2、CSS优先级总结图如下：
9、CSS样式命名规则
1、id不要滥用，适当使用class，其他命名规则如下：
