【 HTML&CSS 课程02】 CSS又是干什么的？
2019-11-25 本文已影响0人
剽悍一小兔
站长建议：视频只是作为知识点补充，不要一开始就直接看视频，最好是在阅读之后，带着疑问去看视频。
点击此处，在线观看视频
步骤1： 用HTML做一个页面，配上简单样式
首先，请新建一个index.html，贴上如下的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">一些段子</h1>
<p align="center"><font color="blue"><b>1.“怎样才算喜欢一个人？”</b></font></p>
<p align="center"><font color="blue"><b>-----“加钟。”</b></font></p>
<p align="center"><font color="blue"><b>2.在公司唱歌，被老板听到了</b></font></p>
<p align="center"><font color="blue"><b>老板说:在办公室不允许大声喧哗！</b></font></p>
</body>
</html>
效果如下：
image.png
代码讲解：HTML标签可以加上属性，但是我们不推荐这样做，因为HTML是用来表示语义的。比如，h1代表一级标题，p代表段落，font代表字体，b代表加粗。而且这样做比较复杂，不利于代码的维护。
步骤2： 改用CSS来给页面配色和布局
首先，在head标签里面加上style标签，这个叫做内嵌样式表。
image.png
代码讲解，p，h1表示p标签和h1标签都用同一套样式，样式就是右边加上的花括号，每一个样式都是** xxx:xxx;** 的形式。
image.png
image.png
新改动后的HTML标签代码：
<h1>一些段子</h1>
<p>1.“怎样才算喜欢一个人？”</p>
<p>-----“加钟。”</p>
<p>2.在公司唱歌，被老板听到了</p>
<p>老板说:在办公室不允许大声喧哗！</p>
效果是差不多的：
image.png
这样的好处就是，可以在style里面对标签进行统一的样式管理。本教程由Java520官方网站 - 适合小白的Java学习网提供。
