通过前几个小节,我们了解了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研究得很透彻,那么做出来得效果可以让人非常震惊的。