通过前几个小节，我们了解了HTML及基础的标签，当我们自己练习的时候发现，自己写出来的网页没有我们平时在网上看起来那么漂亮、炫酷。要想把网页变的酷炫，我们就需要借用CSS.所以从这节开始，我们开始学习CSS，一起来探索以下CSS化腐朽为神奇的力量吧。
认识CSS
CSS(层叠样式表)，用来指定文档如何展示给用户的一门语言，包含页面的布局，样式等。具体我们可以举个例子，比如我们前面提高的标题元素h1,它的默认颜色是黑色，我们可以通过css将它变成红色，实现这个效果也很简单，首先我们得先了解下CSS语言。
CSS语法，就是基于规则得语言，可以指定网页上特定元素样式的规则，正如我们上面提到的，我们想到实现这个效果只需要帮h1制定以下这样的规则。
h1{
color:red //color控制元素颜色的样式属性
}是不是很简单，我们只需要把标签写在前面，然后在{}里面指定出我们想要的规则即可，按照这个思路，如果我们想要把一个段落内容字体颜色变成红色，我们就可以这么写。
p {
color:red
}知道了css语言，下一步我们就可以在HTML引入规则，这样装扮网页的过程就完成了。
添加CSS
为了更加直观，我们可以先创建一个HTML文件，然后添加自己想添加的内容，然后保存下来。在HTML中使用CSS有三种方式。
- 链接外部文档。这也是我们最常用的做法，把css写在css文档里，然后在HTML中用link进行引用。我们需要先创建一个css文档就像这样
接着我们写上代码，需要注意link里的href里面路径一定要对照着，这里我们是在HTML文件同一级下创建的CSS文件，所以用./style.css就行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>学习CSS</title>
<link rel="stylesheet" href="./sytle.css" />
</head>
<body>
<h1>我要学前端</h1>
</body>
</html>
就得到字体为红色的h1标签
- style标签。第二种方法是直接添加到style标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>学习CSS</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>我要学前端</h1>
</body>
</html>这个看起来比创建CSS文件更加简便，但是当一个页面大量使用CSS的时候，这个文档内容会很长，不利于我们的维护、阅读。所以我们将样式统一到CSS文件中是最好的。
- 在HTML中直接写样式。这个其实我们在前面学的时候也用到过
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>学习CSS</title>
</head>
<body>
<h1 style="color:red">我要学前端</h1>
</body>
</html>这个其实就相当于第二种换了一种写法，但是两者的区别还是挺大的，这个后续我们会讲到。这个方法跟第二种也有同样的弊端，大量样式时并不使用。
CSS也是学习前端不可或缺的一步，如果你将CSS研究得很透彻，那么做出来得效果可以让人非常震惊的。
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
