我们在前面已经学习了常用的html基础，就可以画出一个最直接的‘裸体’ ，那么这么画出来的比较简陋，那怎么能让他变得更漂亮呢？这里就引出今天要讲的——css
我们先看看怎么把页面加上修饰的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>1</div> <div>2</div> <div>3</div> </body> </html>
上面的代码是一个最简单的页面，然后用style属性吧第一个div装饰一下
<div style="background-color: #2549a2;height:30px">1</div>
那如果我们需要把所有的div都用相同的效果装饰一下，最简单方式是把每个div都加上相同的style属性
<body> <div style="background-color: #2549a2;height:30px">1</div> <div style="background-color: #2549a2;height:30px">2</div> <div style="background-color: #2549a2;height:30px">3</div> </body>
那么如果有好多个div需要装饰，可见这个方式是不行的，下面我们分部来看怎么做！
CSS和选择器
1.css文件
这里就要先引入css的概念，就是把style里的属性放在一块，写在一个style标签内
<body> <style> #i1{background-color: red; height: 30px;} </style> <div id="i1">1</div> <div>2</div> <div>3</div> </body>
这个#i1就是一个id选择器，只要后面有标签的id和要求的一样，就直接套用上。可是前面说过，控件的id是不能重复的，那我们也不能有几个控件写几组style效果吧，看看div的一个新属性——class
<body> <style> .c1{background-color: red; height: 30px;} </style> <div class="c1">1</div> <div class="c1">2</div> <div class="c1">3</div> </body>
这样就可以了。这个class就是最常用的类选择器。
还有一种选择器：在效果前直接放上标签
<body> <style> div{background-color: red; height: 30px;} </style> <div class="c1">1</div> <span class="c1">2</span> <div class="c1">3</div> </body> </html>
这种方式叫标签选择器。
下面的是一种层级标签
<body> <style> span div{background-color: red; height: 30px;} </style> <div class="c1">1</div> <span class="c1"> <div>123</div> 12345 </span> <div class="c1">3</div> </body>
我们在css里定义了只对span里的div起效果。就是层级选择器。或者叫关联选择器。他可以多层级选择，每个层级用空格分隔，但是不要用的太深。
组合选择器
<body> <style> #i1,#i2,#i3{background-color: red; height: 30px;} </style> <div id="i1">1</div> <div id="i2">2</div> <div id="i3">3</div> </body> </html>
我们在css里用逗号把多个值分开，就实现了多个控件的选择。
属性选择器
属性选择器是根据属性来做
<body> <style> input[type='text']{width:100px;height:200px;} </style> <div id="i1"> <input type="text"> <input type="password"> </div> <div id="i2">2</div> <div id="i3">3</div> </body>
通过对选择到的标签在通过属性再进行一次筛选。
上面就是最常用选择器
CSS的存在形式和优先级
css的优先级
我们看看下面的代码
<body> <style> .c1{background-color: pink;} .c2{background-color: red;} </style> <div class="c1 c2" style="background-color: blue;">123</div> </body>
出来的效果是什么呢？不截图了，是蓝色的。所以css里的优先级是：标签上的style，然后是css里的编写顺序（靠下的优先）。
css的存在形式
我们现在都是把css放在body标签内的，但是如果有多个html文件都需要用到这一段效果，在每个文件里都复制粘贴一遍显然是不现实的。那怎么才能更有效率呢？我们可以把所有的style里的代码拿出来放在一个文件里，这个文件就是css文件。然后我们在head里把这个文件倒进去就可以了
##########test.css########## .c1{background-color: red} .c2{background-color: black}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel='stylesheet' href="test.css"> </head> <body> <div class="c1">1</div> <div class="c2">2</div> <div class="c1">3</div> </body> </html>
这样，在每个html文件里引入一下，就可以使用这个css文件，提高了代码的重用性。