【 HTML&CSS 课程02】 CSS又是干什么的？

站长建议：视频只是作为知识点补充，不要一开始就直接看视频，最好是在阅读之后，带着疑问去看视频。

点击此处，在线观看视频
步骤1： 用HTML做一个页面，配上简单样式

首先，请新建一个index.html，贴上如下的代码：

    


    
一些段子
    
1.“怎样才算喜欢一个人？”
    
-----“加钟。”
    
2.在公司唱歌，被老板听到了
    
老板说:在办公室不允许大声喧哗！

效果如下：

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标签代码：

一些段子
1.“怎样才算喜欢一个人？”
-----“加钟。”
2.在公司唱歌，被老板听到了
老板说:在办公室不允许大声喧哗！

效果是差不多的：

image.png

这样的好处就是，可以在style里面对标签进行统一的样式管理。本教程由Java520官方网站 - 适合小白的Java学习网提供。