简单的说一下CSS，这对入门者而言会有用，CSS大拿们见笑。
CSS解释
html和css是如何建立联系的？
这一点很重要，做任何事情之前都要明确问题的关键点。做开发更是如此，不去思考，对事情的来龙去脉不去深入理解，写再多代码也是枉然。
css文件不是必须的。
我们完全可以把样式写到html里面，比如这样：
<div style="width:100%;color:red">
</div>
div的样式是可以完成通过style标签去定义的。那么，我们为什么要使用css文件来“画蛇添足”呢？初学者肯定觉得不可思议，写到一个html文件里面多好？省事，方便，也不会出现诸如文件未找到之类的错误。
其实，随着我们后续接触项目，慢慢就会发现这其中的奥妙了。
使用css文件的优点
诸位可以设想一下这样的场景，我有100个html网页，其中顶部的样式完全一样，比如均使用类似百度的样式，右上角的按钮排列样式。
image.png
我有100个网页，每个网页里面我都需要去添加style吗？就算是复制粘贴也能把人累死。
更严重的是，假如后续我改了样式，那么我是不是需要改100遍html网页呢？想想都头大。为了解决这个问题，css文件就应运而生了。我只要这般写网页就可以了：
<div class="test"></div>，在css文件里面定义test样式就可以了：.test{width:100%;}。如果有一天，客户彪了，提出了新的需求，要求width全部改成50%，我们只需要改一下css文件就好了：
.test{width:50%} 综上，css文件的好处显而易见：
- 消灭重复代码
- 修改需求方便
html和css建立联系
废话落落了那么多，具体是如何建立联系的呢？
- 使用link标签将css文件引入进来
- css文件里面定义样式
- html里面使用样式
css定义样式的方式
class定义
.定义法，在css文件使用.样式名{}的形式来定义样式，在html里面则使用class='样式名'来引入样式
id定义法
‘#定义法’，在css文件里面使用#样式名{}的形式来定义样式，在html里面则使用id='样式名'来引入样式
标签定义法
标签名定义法，如div{width:100%}或者input{width:100%}，以html标签直接定义，之后只要通过link将文件成功引入，那么对应的所有的标签都会使用该样式。
标签选择器
一定要记得在样式名中间加空格，非常重要。否则就引用不到。
通过了解上文说的定义样式的方式，相信这里就非常好理解了，举例：
.a .b .c {
这里表示样式a之下样式b之下样式c的样式
}
对应的html应该这样写：
<div class="a">
<div class="b">
<div class="c">
其中的元素会使用css里面的样式
</div>
</div>
</div>
<div class="aaaa">
<div class="b">
<div class="c">
这里面的元素则不会使用css里面的样式
</div>
</div>
<div>
假如，我的css文件这样写，就会全部生效了：
.c{}
同样，我可以混合样式的定义方式使用：
.a #abc{}
.a div{}
chrome的使用
chrome是html的神器了，可以即时的修改css，查看样式，同时还可以调试脚本，好用的一塌糊涂。
f12
按一下f12键，一切网页无法遁形：
image.png
介绍一个各个功能栏
Elements
这里可以查看到所有的元素：
鼠标滑到每一个标签，左侧的网页都会高亮显示：
image.png
同时我们还可以看到css：
image.png
红框框起来的地方为css，当然，我们可以修改css，左侧实时就显示出效果了，比如，我们把float浮动效果去掉：
image.png
是不是变得不一样了？
Console
此为控制台，主要打印日志，js日志可以从这里打印出来。报错信息也可以打印出来：
image.png
我修改一下css引用路径：
image.png
再打开网页，在控制台就报错了：
image.png
报错信息为：无法加载文件，错误在第五行。
Source
此为资源展示界面，可以在该界面进行js的调试。
image.png
比如，我在第七行加一个断点，f5刷新之后，程序会在第七行停止，然后等待我们去执行。
左下方的两个常用按钮为跳到下一个断点，和跳到下一行。假如我们定义了两个断点，第一个按钮点击之后就会到下一个断点。第二个按钮则会到下一行。
简单说这些，希望对初学者有帮助。
网友评论