姬小光前端小讲堂【第003期】

在上一期的代码中，我们用到 h1，p，a 等标签，这些标签确定了我们想在网页中展示一个标题，一个段落，和一个链接。

在上一节我们也看到了，浏览器会给我们的标签“渲染”一个默认的样式，包括默认的字体大小，颜色，间距等。

那么，如果我们想自己改变这些字体大小和颜色的话，该怎么做呢？这一期，我们来谈谈所谓“样式”。

所谓样式

我们所说的样式，是特指可以改变 HTML 表现的一种代码，全称叫做“层叠样式表”，英文为 CSS（ Cascading Style Sheets），稍后我们会再深入讲解。

我们首先从“内联样式”开始，内联样式是以 HTML 属性（回复 002 ）的形式定义的，属性名为 style。

我们再次打开记事本，编辑上一次的 index.html 文件并保存：

<h1 style="font-size: 14px; color: red;">此非然并卵</h1>

这里，从字面意思上大致可以猜到，一个是设置了字体大小（font-size），一个是设置了颜色（color）。那么让我们来预览一下效果：

我们可以看到图中的 h1 标签已经变成了我们设置的字体和颜色了。接下来，我们再做一点点改变：

<a style="text-decoration:none;" href=“http://diao.it” target=“_blank” title=“Why are you so diao?”>DIAO.IT</a>

这个单词貌似复杂一点了... 这个属性是用来设置文本的一些“装饰”性的表现的，类似 Word 里面的 U 和 I 功能。

这里，我们设置 text-decoration:none; 意思就是让文本没有任何修饰，所以下划线也就不复存在了：

关于 CSS 还有很多属性可以设置，几乎可以控制一切你能想到的方方面面。想了解更多 CSS 属性，建议去 www.w3school.com.cn 学习或查找资料。

当然，对于你安装的不同浏览器来说，同样的代码在显示的时候会略有差异，处理这些浏览器之间的展示差异，也是前端工程师的重要工作内容之一。

下一节，我们将简单介绍一下与这些兼容性相关的东西。