css讲解
首先在我们学习css之前先来思考一个问题，为什么html标签上不直接改变样式，而要将文档结构和样式分离，分别用html和css来表示呢?
其实我个人认为这样分离带来的好处明显，我总结了几点：
1. 可以实现样式重用，提高了工作效率。
2. 可以更加细致的分工开发。
3. 使文件结构变的更加清晰。
1:css语法
CSS规则由两个主要的部分构成：选择器以及一条或多条声明，即：选择器{属性:值;属性:值;…. }
请注意：
将所有声明放到{ }中
每条声明由三部分组成——属性:值
声明以;结束
2：css常见属性
|
字符颜色 |
color:red; |
|
字号大小 |
font-size:40px; |
|
背景颜色 |
background-color:blue; |
|
宽度 |
Width:10px; |
|
长度 |
Height:40px; |
|
背景图片 |
background-image:url(“1.png”); |
|
文字居中 |
text-align:center;left|right; |
|
行高 |
line-height |
|
加粗 |
font-weight:bold; |
|
不加粗 |
font-weight:normal; |
|
斜体 |
font-style:italic; |
|
不斜体 |
font-style:normal; |
|
下划线 |
text-decoration:underline; |
|
没有下划线 |
text-decoration:normal |
|
首行缩进 |
Text-indent：2em; |
在使用background-image属性时请注意：一定要设置其宽和高，例如：
50px;
height: 90px;
background-image: url("x.jpg");
还有之前在html中标签设置背景图片使用：background，同时可以不用放在style中，而这里css是background-image；注意区分。
同时要知道：浏览器默认文字大小为16px，默认行高(line-height)为18px
3：css写法
在这里写3中常见的css写法：
（1）第一种：内嵌式写法
1 1 <head> 2 2 <style type="text/css"> 3 3 /*此处为CSS代码----在该写法中，可以将CSS样式写在<head></head>标签中*/ 4 4 </style> 5 5 </head>
（2）第二种：外链式写法
与内嵌式写法中直接把CSS写在了<head></head>中不同，在外嵌式写法中是把CSS写在了专门的.css文件里，然后在html中通过<link>标签引用就可以了，请看如下示例：
1 <head> 2 <link rel="stylesheet" type="text/css" href="csstest.css" /> /*在实际开发中，这种运用最多，因为可以降低后期的维护性成本*/ 3 </head>
（3）第三种：行内式写法，这种写法作用范围相对小，但优先级最高，具体后面讲
1 <body> 2 <p style="color:blue; font-size:40px">欢迎访问蜗牛的博客。</p> 3 </body>
CSS选择器
CSS常见选择器的分类:
基础选择器
标签选择器
类选择器
id选择器
通配符选择器
复合选择器
并集选择器
后迭代选择器
交集选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 6 p{ 7 color: red; 8 background-color: pink; 9 } 10 .testclass{ 11 color: red; 12 background-color: white; 13 } 14 15 #testid{ 16 color: red; 17 background-color:green; 18 } 19 20 </style> 21 </head> 22 <body> 23 <p>我是标签选择器</p> <!--标签选择器只要把标签名放前面就好，也可以同时放多个--> 24 <h4 class="testclass">我是类选择器</h4> <!--类选择器签名前面加一点在取一个名字--> 25 <h4 id="testid">我是id选择器> <!--id选择器前面加#在取一个名字--> 26 <h4>我什么都不是</h4> 27 </body> 28 </html>
演示效果：
注意：
id选择与类选择器不同的是：一个标签只能调用一个ID选择器。虽然多个标签可以使用同一ID选择器，但是强烈不建议这么做，如果出现多个标签id相同的情况下，那么当你用js获得属性的时候，往往只能获得第一个。所以，在实际开发中极少采用ID选择器而多用类选择器。
通配符选择器：
通配符使用星号*表示，意思是“所有的”
*{
padding:0;
margin:0;
}
这里是设置所有元素的外边距margin和内边距padding都为0。
不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0;padding:0}
复合选择器
并集选择器： <!--并集选择器有几个标签就对几个标签起作用，标签之间用逗号隔开-->
1 <!DOCTYPE html> 2 <head> 3 <title>并集选择器</title> 4 </head> 5 <style type="text/css"> 6 h4,span{ 7 color:red; 8 } 9 </style> 10 <body> 11 <h4>我是h4标签</h4> 12 <span>我是span标签</span> 13 </body 14 </html>
运行结果如下：
后迭代选择器 ：
特点：向后面迭代选择（向子标签)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>后迭代选择器</title> 5 </head> 6 <style type="text/css"> 7 .testdiv span{ 8 color:green; 9 } 10 </style> 11 <body> 12 <div class="testdiv"> 13 <p>我是p标签</p> 14 <span>子标签（孙子）</span> <!--表面该css只对class为testdiv中嵌套的span标签起作用--> 15 </div> 16 </body 17 ></html>
运行结果如下：
交集选择器
交集选择器一般是以标签选择开头，类选择器结尾
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>交集选择器</title> 5 </head> 6 <style type="text/css"> 7 div span.redspan{ 8 color:red; 9 } 10 </style> 11 <body> 12 <div> 13 <span>span1</span><br> 14 <span class="redspan">sapn2</span><br> <!--只对这个有效果--> 15 <span>span3</span><br> 16 </div> 17 </body> 18 </html>
运行结果如下：
上面这些是一些有关基础css和选择器，接下来还有许多，我会一一道来！