从这一小节开始，我们开始学习CSS的内容。之前都是学习的HTML标签，还用几节课的时间做了纯HTML标签的实战。
但是只用纯HTML标签做出来的东西呢，不是那么好看，而且你看那么多网站，没有哪个网站只用纯HTML标签做东西的，所以CSS是必须要学习的一个知识体系。这一小节，我们开始学习CSS的知识内容。
目录
1 CSS有什么用？
1.1 让网页好看一些
我们之前做的纯HTML标签实战，可以发现，做出来的确是不怎么好看。所以，学了CSS样式以后，可以对标签们做一定的装饰，甚至一些布局就可以不考虑使用 table 了，而是采用 DIV + CSS的方式。
其实现在项目开发，大家也都不使用table表格进行开发了（不过很多B端的表格，还在使用table，但C端的网站，几乎已经不使用table进行开发了）。
但很多时候，为了好看实用CSS的话，还不如直接放一张图片来的省事呢。但图片毕竟需要加载，越高清的图片质量越大，加载起来就需要考虑更多的问题。所以，为了网页更加漂亮呢，HTML标签，图片和CSS样式结合起来，会更加完美。
1.2 统一样式管理
除了对标签做样式修饰呢，我们会发现网站上有很多样式相同，或者相近的元素。比如你看这些菜单们：
比如你看这些菜单们：
比如你看这些列表元素们：
你会发现，这些内容除了数据不同，但样式都是一样的。 所以，就不能一个一个的去设置CSS样式，就可以写一个CSS样式，然后通过这一个样式去控制N个HMTL标签的展现形式。
1.3 JS获取网页元素信息
在后续的前端学习，和真实项目开发中，大家经常会需要获取网页的某个元素。这个时候可能就会拿到我们定义的那个CSS样式类，通过这个样式类去获取网页元素，然后做一些JS事件的开发。
其实前端开发呀，说到底，就是搞一搞标签，获取一下标签，往标签里放一些数据，从标签里拿一些数据，跟后端交互一下。90%的工作是这些个东西。
2 CSS样式往哪里写？
我们在这一节：【HTML入门】第二课 - head标签下的常见标签们-CSDN博客 应该是在 index.html 文件中加过一个 style 标签，不明白上下文的同学，可以回过头去看一眼。
接下来，我们说一下这一节的主要内容，CSS样式的代码应该往哪里写呢？
2.1 行内样式
行内元素，我们之前说过，对吧。行内元素，或者叫内联元素。这里，我们说行内样式，行内样式就是把样式写到标签上。看下面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<div style="width: 300px;height: 300px;border: 1px solid red;">我在学习前端开发</div>
</body>
</html> 
从上面代码，我们可以看出：
- 我们在div标签上，加了一个 style 属性；
- 属性值呢，是放在一对双引号里；
- 内容是一组一组成对出现的，每一组中间用分号隔开
2.2 写到 style 标签里
我们在head标签内，有个style标签，还可以写到这里，就像这样（效果是一样的）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div class="box">我在学习前端开发</div>
</body>
</html>从上面代码，我们可以看出：
- 需要在div标签中添加 class="" , 而这里的双引号中，写入的是 css 的 类名，我们本案例中命名为 box；
- 在 style 标签中，以 .box 开始；与标签中的 类名 相呼应；
- 也可以理解为，style标签中的 .box 为css 的样式类定义，而标签中通过 class="box" 的方式实现调用类；
- style标签中，类名 然后是一对大括号，里面也是一组一组成对出现的，以分号为组的结尾。
2.3 写到外部css文件中
我们还可以让html文档清爽一些，不在行内写，也不在style标签中写，而是写入外部的css样式文件中。
我们可以新建一个css文件，如 index.css。
从上面代码，我们可以看出：
- 我们新建了 css/index.css 的文件；
- 在html标签中，我们仍然调用这个 box 的css类；
- 在head标签中，我们通过 link 标签的形式引入css外部文件；
2.4 @import的方式引入
这个引入方式可以后面再看，也可以看这篇文章提前学一学：HTML - 你是如何理解link和@import的_html link import-CSDN博客
3 小结
这一下节我们就说到这里，小伙伴们可以练一练这几种方式，在本案例中，达到的效果是相同的。后边，我们再慢慢说，这几种方式的不同点。
我们后续的课程中，将会主要采用第3中方式，也就是外部文件引入的方式来学CSS的课程。
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
