CSS入门系列（一）概述&和html结合的方式

CSS入门系列（一）概述&和html结合的方式

　　自己在关注招聘信息的时候经常发现很多公司都要求要有前端的基础，不一定搞前端，但是前端的基础是要有的。所以，我就学习了一下前端的技术。
　　本文系列是在毕向东java视频的基础上总结的，自己也是边学习边总结，主要还是为自己能复习和回顾。如何能对大家也有帮助，那就更好了。另外提示，本系列的总结默认是已经知道了html的一些基础知识。

目录

1. CSS介绍

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。CSS将网页内容和显示样式进行分离（降低了耦合性，这样就增强了扩展性），提高显示的功能。

2. Html与CSS如何在网页代码中相结合的呢？

一共有4种结合方式

1. 第一种方式

所有的Html标签都有style属性，style属性样式的值就是css代码。以div标签为例：

<div style="background-color:#06F"> 这是一个div区域</div>

这代码中是设置一行中的背景颜色，如果想有多种属性，可以用分号分开

<div style="background-color:#06F；color：#F00"> 这是一个div区域</div>

这样就把前景的汉字的颜色设置为红色。

2.第二种方式

使用style标签的 方式，可以减少代码的复用性。
我们把样式直接独立出来，而且我们希望样式能在页面一加载的时候就有，所以我们把样式写在head标签中。而且我们还要知道这个标签是谁的样式标签，所以要有个范围。

<style type="text/css">
div{
background-color:#06F；
color：#F00
}
</style>

这样body中的div区域所有的样式都是style定义的，但是如果你又在div中重新定义了样式，那么新样式会覆盖之前定义的，这也是层叠样式表的由来。

3.第三种方式

考虑如果有多个html文件都有div的问题，为了提高代码的复用性，我们直接创建一个css文件，把样式写在css文件中，然后在html中引用这个css文件。以上面的例子讲解，css文件命名为div.css，其中的代码如下:

div{
background-color:#06F；
color：#F00
}

然后在html中，代码改为：

<style type="text/css">
@import url(div.css)
</style>

针对这种方式有一种改进，就是不直接在html中引用，而是创建一个专门的css，把所有的样式都导入到这个css文件中，而html只需要只需要导入这个css文件即可。

4. 第四种方式

使用html连接，和第三种的区别是：第三种是css文件的导入，而第四种是html直接链接css文件。在html中写如下代码：

<link rel="stylesheet" href="div.css" type="text/css" />

3. 样式的优先级

样式是会出现覆盖的，其优先级是，从上到下， 从外到内，由低到高。总结就是后加载的为主。但是后面还是有细节的优先级就不一定了。

4.CSS代码格式

选择器名称{属性名：属性值；属性名：属性值…}如果一个属性有多个属性值，用空格隔开。